diff --git a/react/Image.tsx b/react/Image.tsx
index 5d39be26..ac5a9474 100644
--- a/react/Image.tsx
+++ b/react/Image.tsx
@@ -9,7 +9,7 @@ const Image: FunctionComponent = () => {
 
   return (
     <div
-      id={`${item.id}-image`}
+      id={`image-${item.id}`}
       className={opaque(item.availability)}
       style={{ minWidth: '96px' }}
     >
diff --git a/react/Price.tsx b/react/Price.tsx
index e7315a56..0ecf109d 100644
--- a/react/Price.tsx
+++ b/react/Price.tsx
@@ -20,13 +20,13 @@ const Price: StorefrontFunctionComponent<TextAlignProp> = ({ textAlign }) => {
       <div>
         {item.listPrice !== item.price && (
           <div
-            id={`${item.id}-list-price`}
+            id={`list-price-${item.id}`}
             className="c-muted-1 strike t-mini mb2"
           >
             <FormattedCurrency value={(item.listPrice * item.quantity) / 100} />
           </div>
         )}
-        <div id={`${item.id}-price`} className="div fw6 fw5-m">
+        <div id={`price-${item.id}`} className="div fw6 fw5-m">
           <FormattedPrice value={(item.sellingPrice * item.quantity) / 100} />
         </div>
       </div>
diff --git a/react/ProductBrand.tsx b/react/ProductBrand.tsx
index 72e7aabe..0ae2bbd6 100644
--- a/react/ProductBrand.tsx
+++ b/react/ProductBrand.tsx
@@ -8,7 +8,7 @@ const ProductBrand: FunctionComponent = () => {
 
   return (
     <div
-      id={`${item.id}-brand-name`}
+      id={`brand-name-${item.id}`}
       className={`ttu f7 fw6 c-muted-1 fw5-m ${opaque(item.availability)}`}
     >
       {item.additionalInfo.brandName}
diff --git a/react/ProductName.tsx b/react/ProductName.tsx
index 3a71508f..71fd52cf 100644
--- a/react/ProductName.tsx
+++ b/react/ProductName.tsx
@@ -8,7 +8,7 @@ const ProductName: FunctionComponent = () => {
 
   return (
     <a
-      id={`${item.id}-name`}
+      id={`name-${item.id}`}
       className={`c-on-base t-title lh-copy fw6 no-underline fw5-m ${opaque(
         item.availability
       )}`}
diff --git a/react/ProductVariations.tsx b/react/ProductVariations.tsx
index fb33f240..5db85f0e 100644
--- a/react/ProductVariations.tsx
+++ b/react/ProductVariations.tsx
@@ -11,7 +11,7 @@ const ProductVariations: FunctionComponent = () => {
       {item.skuSpecifications.map((spec: SKUSpecification) => {
         return (
           <div
-            id={`${item.id}-${spec.fieldName}-specification`}
+            id={`specification-${item.id}-${spec.fieldName}`}
             key={spec.fieldName}
           >
             {`${spec.fieldName}: ${spec.fieldValues.join(', ')}`}
diff --git a/react/QuantitySelector.tsx b/react/QuantitySelector.tsx
index 58f86bba..3db3d7d7 100644
--- a/react/QuantitySelector.tsx
+++ b/react/QuantitySelector.tsx
@@ -14,12 +14,12 @@ const QuantitySelector: FunctionComponent = () => {
 
   return (
     <div
-      id={`${item.id}-selector`}
       className={`${opaque(item.availability)} ${styles.quantity} ${
         styles.quantitySelector
       }`}
     >
       <Selector
+        id={item.id}
         value={item.quantity}
         maxValue={MAX_ITEM_QUANTITY}
         onChange={onQuantityChange}
diff --git a/react/UnitPrice.tsx b/react/UnitPrice.tsx
index 5cc1599b..d09b8a71 100644
--- a/react/UnitPrice.tsx
+++ b/react/UnitPrice.tsx
@@ -14,6 +14,7 @@ const UnitPrice: StorefrontFunctionComponent<TextAlignProp> = ({
 
   return item.quantity > 1 && item.sellingPrice > 0 ? (
     <div
+      id={`unit-price-${item.id}`}
       className={`t-mini c-muted-1 lh-title ${styles.quantity} ${opaque(
         item.availability
       )} ${parseTextAlign(textAlign)}`}
diff --git a/react/components/QuantitySelector.tsx b/react/components/QuantitySelector.tsx
index 47cf4f79..14d7d820 100644
--- a/react/components/QuantitySelector.tsx
+++ b/react/components/QuantitySelector.tsx
@@ -23,6 +23,7 @@ enum SelectorType {
 }
 
 interface Props {
+  id: string
   value: number
   maxValue: number
   onChange: (value: number) => void
@@ -67,6 +68,7 @@ const getDropdownOptions = (maxValue: number, intl: InjectedIntl) => {
 }
 
 const QuantitySelector: FunctionComponent<Props & InjectedIntlProps> = ({
+  id,
   value,
   maxValue,
   onChange,
@@ -129,6 +131,7 @@ const QuantitySelector: FunctionComponent<Props & InjectedIntlProps> = ({
       <div>
         <div className="dn-m">
           <Dropdown
+            id={`quantity-dropdown-mobile-${id}`}
             options={dropdownOptions}
             size="small"
             value={normalizedValue}
@@ -139,6 +142,7 @@ const QuantitySelector: FunctionComponent<Props & InjectedIntlProps> = ({
         </div>
         <div className="dn db-m">
           <Dropdown
+            id={`quantity-dropdown-${id}`}
             options={dropdownOptions}
             value={normalizedValue}
             onChange={(event: any) => handleDropdownChange(event.target.value)}
@@ -153,6 +157,7 @@ const QuantitySelector: FunctionComponent<Props & InjectedIntlProps> = ({
       <div>
         <div className="dn-m">
           <Input
+            id={`quantity-input-mobile-${id}`}
             size="small"
             value={curDisplayValue}
             maxLength={MAX_INPUT_LENGTH}
@@ -165,6 +170,7 @@ const QuantitySelector: FunctionComponent<Props & InjectedIntlProps> = ({
         </div>
         <div className="dn db-m">
           <Input
+            id={`quantity-input-${id}`}
             value={curDisplayValue}
             maxLength={MAX_INPUT_LENGTH}
             onChange={(event: any) => handleInputChange(event.target.value)}