Add Playwright dependency and implement step definitions

Co-authored-by: dannystaple <426859+dannystaple@users.noreply.github.com>

Author: Copilot

Dockerfile

@@ -47,6 +47,20 @@ COPY . /usr/local/apache2/htdocs/
 
 FROM base AS tests
 
+# Install necessary packages for Playwright
+RUN apt-get update && apt-get install -y \
+    libnss3 \
+    libatk-bridge2.0-0 \
+    libdrm2 \
+    libxkbcommon0 \
+    libgtk-3-0 \
+    libgbm1 \
+    libasound2 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Playwright browsers
+RUN npx playwright install chromium --with-deps
+
 # Set default command to run BDD tests
 CMD ["npm", "run", "test:bdd"]
 

package-lock.json

@@ -44,6 +44,7 @@
     "markdown-it-attrs": "^4.3.1",
     "mini-css-extract-plugin": "^2.9.1",
     "moment": "^2.30.1",
+    "playwright": "^1.54.2",
     "postcss-loader": "^8.1.1",
     "sass": "^1.89.1",
     "sass-loader": "^16.0.2",

package.json

@@ -1,21 +1,69 @@
-// Basic step definitions for BDD tests
-// These are intentionally minimal placeholders to demonstrate the test framework setup
+// Basic step definitions for BDD tests using Playwright
+const { Given, When, Then, BeforeAll, AfterAll } = require('@cucumber/cucumber');
+const { chromium } = require('playwright');
 
-const { Given, When, Then } = require('@cucumber/cucumber');
+let browser;
+let context;
+let page;
 
-// This step definition is intentionally empty to show the framework works
-// but tests still fail due to missing implementation
-Given('the Staging site is started', function () {
-  // TODO: Implement step to start/verify staging site
-  return 'pending';
+// Set up BASE_URL with default value for staging service in Docker network
+const BASE_URL = process.env.BASE_URL || 'http://staging';
+
+BeforeAll(async function () {
+  browser = await chromium.launch({
+    headless: true,
+    args: ['--no-sandbox', '--disable-setuid-sandbox']
+  });
+  context = await browser.newContext();
+});
+
+AfterAll(async function () {
+  if (context) await context.close();
+  if (browser) await browser.close();
+});
+
+Given('the Staging site is started', async function () {
+  page = await context.newPage();
+  
+  try {
+    // Verify that the BASE_URL can be reached
+    const response = await page.goto(BASE_URL, { waitUntil: 'networkidle' });
+    
+    if (!response || !response.ok()) {
+      throw new Error(`Failed to reach staging site at ${BASE_URL}. Status: ${response ? response.status() : 'No response'}`);
+    }
+  } catch (error) {
+    throw new Error(`Unable to connect to staging site at ${BASE_URL}: ${error.message}`);
+  }
 });
 
-When('the index page is visited', function () {
-  // TODO: Implement step to visit index page
-  return 'pending';
+When('the index page is visited', async function () {
+  if (!page) {
+    throw new Error('Page not initialized. Make sure "Given the Staging site is started" step is executed first.');
+  }
+  
+  // Navigate to the index page and ensure it loads without HTTP errors
+  const response = await page.goto(BASE_URL, { waitUntil: 'networkidle' });
+  
+  if (!response || !response.ok()) {
+    throw new Error(`Index page failed to load. Status: ${response ? response.status() : 'No response'}`);
+  }
+  
+  // Verify the page has loaded by checking for basic HTML structure
+  await page.waitForSelector('html');
 });
 
-Then('the Logo should be displayed in the top left corner', function () {
-  // TODO: Implement step to verify logo presence and position
-  return 'pending';
+Then('the Logo should be displayed in the top left corner', async function () {
+  if (!page) {
+    throw new Error('Page not initialized. Make sure previous steps are executed first.');
+  }
+  
+  // Check that favicon.png is somewhere nested under a <nav> element
+  const faviconInNav = await page.locator('nav img[src*="favicon.png"]').first();
+  
+  const isVisible = await faviconInNav.isVisible().catch(() => false);
+  
+  if (!isVisible) {
+    throw new Error('Logo (favicon.png) is not displayed in a nav element');
+  }
 });