chore: tests

.gitignore

@@ -2,7 +2,9 @@
 coverage/*
 logs/*
 node_modules/*
-.vscode
+.vscode/settings.json
+playwright-report/*
+test-results/*
 
 helix-importer-ui
 .DS_Store

.vscode/launch.json

@@ -0,0 +1,44 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Current Test File",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/node_modules/@playwright/test/cli.js",
+      "args": [
+        "test",
+        "${file}",
+        "--project=chromium"
+      ],
+      "console": "integratedTerminal",
+      "cwd": "${workspaceFolder}",
+      "env": {
+        "PWDEBUG": "0",
+        "NODE_ENV": "development"
+      },
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
+    },
+    {
+      "name": "Debug All Tests",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/node_modules/@playwright/test/cli.js",
+      "args": [
+        "test",
+        "--project=chromium"
+      ],
+      "console": "integratedTerminal",
+      "cwd": "${workspaceFolder}",
+      "env": {
+        "PWDEBUG": "0",
+        "NODE_ENV": "development"
+      },
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
+    }
+  ]
+} 

README.md

@@ -29,3 +29,82 @@ npm run lint
 ## URL Syntax
 
 https://{branch}--vitamix--aemsites.aem.page/
+
+## Tests
+
+### Overview
+
+This project uses Playwright for end-to-end testing. The tests verify that key elements exist and function correctly across different product configurations.
+
+### Available Test Commands
+
+#### Basic Test Commands
+
+```bash
+# Runs all Playwright tests in headless mode with parallel execution
+npm test
+
+# Opens Playwright's interactive UI mode for debugging and test development
+npm run test:ui
+
+# Runs tests with visible browser windows (useful for debugging)
+npm run test:headed
+
+# Runs tests in debug mode with step-by-step execution
+npm run test:debug
+
+# Installs required browser binaries for Playwright
+npm run test:install
+
+# Opens the HTML test report in your browser
+npm run test:report
+```
+
+### Running Tests via Command Line
+
+> Before any tests will work you must run `npm run test:install` to install the browser dependancies
+
+#### Run All Tests
+```bash
+npm test
+```
+
+#### Run Specific Test File
+```bash
+npx playwright test tests/pdp/integration.spec.js
+```
+
+#### Run Tests with Specific Browser
+```bash
+# Run only on Chromium
+npx playwright test --project=chromium
+
+# Run only on Mobile Chrome
+npx playwright test --project="Mobile Chrome"
+```
+
+#### Run Tests with Custom Base URL (Branch)
+```bash
+BASE_URL=https://main--vitamix--aemsites.aem.network npm test
+```
+
+#### Run Tests for Specific Branch
+```bash
+BRANCH=staging npm test
+```
+
+#### Running Tests in CI
+
+Tests can be manually run within a PR on github by commenting `/run-tests`
+
+### Debugging Tests in VSCode
+
+There are two VCCode launch configurations to debug the tests. There is also an optional `Playwright Test for VS Code extension` you can install to VSCode.
+
+#### Debug Playwright Tests
+* Runs all tests in the project with debugging enabled.
+* Use when debugging issues that affect multiple tests or investigating test setup problems
+
+#### Debug Current Test File
+* Runs only the currently open test file with debugging enabled.
+* Use when focusing on debugging a specific test file for faster, targeted debugging

package.json

@@ -11,7 +11,13 @@
     "build:json:models": "merge-json-cli -i \"ue/models/component-models.json\" -o \"component-models.json\"",
     "build:json:definitions": "merge-json-cli -i \"ue/models/component-definition.json\" -o \"component-definition.json\"",
     "build:json:filters": "merge-json-cli -i \"ue/models/component-filters.json\" -o \"component-filters.json\"",
-    "prepare": "husky"
+    "prepare": "husky",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug",
+    "test:install": "playwright install",
+    "test:report": "playwright show-report"
   },
   "repository": {
     "type": "git",
@@ -25,6 +31,7 @@
   "homepage": "https://github.com/adobe/aem-boilerplate#readme",
   "devDependencies": {
     "@babel/eslint-parser": "7.25.1",
+    "@playwright/test": "^1.40.0",
     "eslint": "8.57.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-plugin-import": "2.29.1",

playwright.config.js

@@ -0,0 +1,52 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.BASE_URL || 'https://main--vitamix--aemsites.aem.network',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Take screenshot on failure */
+    screenshot: 'only-on-failure',
+
+    /* Record video on failure */
+    video: 'retain-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});