feat(e2e): add playwright navigation test suite and configuration

Author: Onibenjo

package.json

@@ -16,7 +16,12 @@
     "test": "yarn run lint-scss && yarn run lint-python && yarn run test-python",
     "test-python": "python3 -m unittest discover tests",
     "test-js": "jest --env=jsdom",
-    "test-marketo": "python3 -m unittest tests.test_marketo"
+    "test-marketo": "python3 -m unittest tests.test_marketo",
+    "test-e2e": "playwright test",
+    "test-e2e-forms": "playwright test --project=forms",
+    "test-e2e-navigation": "playwright test --project=navigation",
+    "test-e2e-navigation-headed": "playwright test --project=navigation --headed",
+    "test-e2e-navigation-debug": "playwright test --project=navigation --debug"
   },
   "dependencies": {
     "@canonical/cookie-policy": "^3.7.3",

playwright.config.ts

@@ -14,7 +14,7 @@ dotenv.config({
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: path.join(__dirname, "tests/playwright/tests/forms"),
+  testDir: path.join(__dirname, "tests/playwright/tests"),
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -38,8 +38,13 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'checkout',
-      testMatch: "*.spec.ts",
+      name: 'forms',
+      testMatch: "forms/*.spec.ts",
+      use: { ...devices['Desktop Chrome']},
+    },
+    {
+      name: 'navigation',
+      testMatch: "navigation/*.spec.ts", 
       use: { ...devices['Desktop Chrome']},
     },
   ],

scripts/test-navigation.sh

@@ -0,0 +1,123 @@
+#!/bin/bash
+
+# Navigation E2E Test Runner Script
+# Usage: ./scripts/test-navigation.sh [options]
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Default values
+HEADED=false
+DEBUG=false
+REPORTER="list"
+GREP=""
+BROWSER="chromium"
+
+# Function to display usage
+usage() {
+    echo "Usage: $0 [OPTIONS]"
+    echo ""
+    echo "Options:"
+    echo "  -h, --headed          Run tests in headed mode (show browser)"
+    echo "  -d, --debug           Run tests in debug mode"
+    echo "  -r, --reporter TYPE   Test reporter (list, html, json, junit)"
+    echo "  -g, --grep PATTERN    Run only tests matching pattern"
+    echo "  -b, --browser NAME    Browser to use (chromium, firefox, webkit)"
+    echo "  --help                Show this help message"
+    echo ""
+    echo "Examples:"
+    echo "  $0                                    # Run all navigation tests"
+    echo "  $0 --headed                          # Run with browser UI visible"
+    echo "  $0 --grep \"Primary Navigation\"       # Run only primary navigation tests"
+    echo "  $0 --reporter html                   # Generate HTML report"
+    echo "  $0 --debug --grep \"dropdown\"        # Debug dropdown tests"
+}
+
+# Parse command line arguments
+while [[ $# -gt 0 ]]; do
+    case $1 in
+        -h|--headed)
+            HEADED=true
+            shift
+            ;;
+        -d|--debug)
+            DEBUG=true
+            shift
+            ;;
+        -r|--reporter)
+            REPORTER="$2"
+            shift 2
+            ;;
+        -g|--grep)
+            GREP="$2"
+            shift 2
+            ;;
+        -b|--browser)
+            BROWSER="$2"
+            shift 2
+            ;;
+        --help)
+            usage
+            exit 0
+            ;;
+        *)
+            echo -e "${RED}Unknown option: $1${NC}"
+            usage
+            exit 1
+            ;;
+    esac
+done
+
+# Build the playwright command
+PLAYWRIGHT_CMD="npx playwright test --project=navigation"
+
+if [ "$HEADED" = true ]; then
+    PLAYWRIGHT_CMD="$PLAYWRIGHT_CMD --headed"
+fi
+
+if [ "$DEBUG" = true ]; then
+    PLAYWRIGHT_CMD="$PLAYWRIGHT_CMD --debug"
+fi
+
+if [ -n "$GREP" ]; then
+    PLAYWRIGHT_CMD="$PLAYWRIGHT_CMD --grep \"$GREP\""
+fi
+
+if [ "$REPORTER" != "list" ]; then
+    PLAYWRIGHT_CMD="$PLAYWRIGHT_CMD --reporter=$REPORTER"
+fi
+
+# Add browser selection
+PLAYWRIGHT_CMD="$PLAYWRIGHT_CMD --browser=$BROWSER"
+
+echo -e "${YELLOW}Running Navigation E2E Tests...${NC}"
+echo -e "${YELLOW}Command: $PLAYWRIGHT_CMD${NC}"
+echo ""
+
+# Check if the server is running
+if ! curl -s http://localhost:8002 > /dev/null 2>&1; then
+    echo -e "${RED}Warning: Development server not detected at http://localhost:8002${NC}"
+    echo -e "${YELLOW}Make sure to start the development server before running tests:${NC}"
+    echo "  python3 app.py"
+    echo ""
+fi
+
+# Run the tests
+eval $PLAYWRIGHT_CMD
+
+# Check exit code
+if [ $? -eq 0 ]; then
+    echo -e "${GREEN}✅ Navigation tests completed successfully!${NC}"
+    
+    if [ "$REPORTER" = "html" ]; then
+        echo -e "${YELLOW}📊 HTML report generated. Open playwright-report/index.html to view results.${NC}"
+    fi
+else
+    echo -e "${RED}❌ Navigation tests failed!${NC}"
+    exit 1
+fi