diff --git a/package-lock.json b/package-lock.json
index a1fad3a7ac9..ae07a69da56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -65640,6 +65640,7 @@
         "react-dom": "^18.2.0"
       },
       "devDependencies": {
+        "@playwright/test": "1.45.3",
         "@types/node": "20.14.12",
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
@@ -65649,6 +65650,21 @@
         "typescript": "5.4.5"
       }
     },
+    "packages/samples/headless-ssr-commerce/node_modules/@playwright/test": {
+      "version": "1.45.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.3.tgz",
+      "integrity": "sha512-UKF4XsBfy+u3MFWEH44hva1Q8Da28G6RFtR2+5saw+jgAFQV5yYnB1fu68Mz7fO+5GJF3wgwAIs0UelU8TxFrA==",
+      "dev": true,
+      "dependencies": {
+        "playwright": "1.45.3"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "packages/samples/headless-ssr-commerce/node_modules/agent-base": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
@@ -65704,6 +65720,20 @@
         "node": ">= 6"
       }
     },
+    "packages/samples/headless-ssr-commerce/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "packages/samples/headless-ssr-commerce/node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -65793,6 +65823,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "packages/samples/headless-ssr-commerce/node_modules/playwright": {
+      "version": "1.45.3",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.3.tgz",
+      "integrity": "sha512-QhVaS+lpluxCaioejDZ95l4Y4jSFCsBvl2UZkpeXlzxmqS+aABr5c82YmfMHrL6x27nvrvykJAFpkzT2eWdJww==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.45.3"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "packages/samples/headless-ssr-commerce/node_modules/playwright-core": {
+      "version": "1.45.3",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.3.tgz",
+      "integrity": "sha512-+ym0jNbcjikaOwwSZycFbwkWgfruWvYlJfThKYAlImbxUgdWFO2oW70ojPm4OpE4t6TAo2FY/smM+hpVTtkhDA==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "packages/samples/headless-ssr-commerce/node_modules/tough-cookie": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
diff --git a/packages/samples/headless-ssr-commerce/components/cart.tsx b/packages/samples/headless-ssr-commerce/components/cart.tsx
index c5106df9b74..44f0cf308f4 100644
--- a/packages/samples/headless-ssr-commerce/components/cart.tsx
+++ b/packages/samples/headless-ssr-commerce/components/cart.tsx
@@ -17,7 +17,7 @@ export default function Cart() {
 
   return (
     <div>
-      <ul>
+      <ul id="cart">
         {state.items.map((item, index) => (
           <li key={index}>
             <p>
diff --git a/packages/samples/headless-ssr-commerce/e2e/cart/cart.spec.ts b/packages/samples/headless-ssr-commerce/e2e/cart/cart.spec.ts
index b4aee30e07d..34ed42720ae 100644
--- a/packages/samples/headless-ssr-commerce/e2e/cart/cart.spec.ts
+++ b/packages/samples/headless-ssr-commerce/e2e/cart/cart.spec.ts
@@ -56,7 +56,7 @@ test.describe('default', () => {
 
       const cartItemsCount = await cart.items.count();
 
-      expect(cartItemsCount).toBe(4);
+      expect(cartItemsCount).toBe(3);
     });
   });
 
@@ -221,6 +221,7 @@ test.describe('default', () => {
     });
   });
 });
+
 test.describe('ssr', () => {
   const numItemsInCart = 0; // Define the numResults variable
   const numItemsInCartMsg = `Items in cart: ${numItemsInCart}`;
@@ -238,7 +239,7 @@ test.describe('ssr', () => {
       numItemsInCartMsg
     );
 
-    expect(dom.window.document.querySelectorAll('ul li').length).toBe(
+    expect(dom.window.document.querySelectorAll('ul#cart li').length).toBe(
       numItemsInCart
     );
     expect(
diff --git a/packages/samples/headless-ssr-commerce/e2e/page-objects/cart.page.ts b/packages/samples/headless-ssr-commerce/e2e/page-objects/cart.page.ts
index 50a12e2c4f6..002fd38cddc 100644
--- a/packages/samples/headless-ssr-commerce/e2e/page-objects/cart.page.ts
+++ b/packages/samples/headless-ssr-commerce/e2e/page-objects/cart.page.ts
@@ -13,7 +13,7 @@ export class CartPageObject {
 
   get items() {
     const cart = this.cart;
-    return cart.locator('ul > li');
+    return cart.locator('ul#cart > li');
   }
 
   async getItemQuantity(item: Locator) {
diff --git a/packages/samples/headless-ssr-commerce/package.json b/packages/samples/headless-ssr-commerce/package.json
index ab8dacbbf82..718070a2460 100644
--- a/packages/samples/headless-ssr-commerce/package.json
+++ b/packages/samples/headless-ssr-commerce/package.json
@@ -20,6 +20,7 @@
     "@types/node": "20.14.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@playwright/test": "1.45.3",
     "eslint": "8.57",
     "eslint-config-next": "14.2.5",
     "jsdom": "25.0.1",