Playwright tests spike

src/Dfe.EarlyYearsQualification.Web/Views/Questions/Radio.cshtml

@@ -25,7 +25,7 @@
         }
         @using (Html.BeginForm(Model.ActionName, Model.ControllerName, FormMethod.Post, new { id = "radio-question-form"}))
         {
-            <div class="govuk-form-group @(Model.HasErrors ? "govuk-form-group--error" : "")">
+            <div data-testid="main-form-group" class="govuk-form-group @(Model.HasErrors ? "govuk-form-group--error" : "")">
                 <fieldset class="govuk-fieldset govuk-!-margin-bottom-4">
                     <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
                         <h1 class="govuk-heading-xl mb-1" id="question">

src/Dfe.EarlyYearsQualification.Web/Views/Shared/Partials/ErrorSummary.cshtml

@@ -2,7 +2,7 @@
 
 <div id="error-banner" class="govuk-error-summary" data-module="govuk-error-summary">
     <div role="alert">
-        <h2 class="govuk-error-summary__title">
+        <h2 data-testid="error-title" class="govuk-error-summary__title">
             @Model.ErrorBannerHeading
         </h2>
         <div class="govuk-error-summary__body">

tests/Dfe.EarlyYearsQualification.E2ETests/playwright/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "playwright",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@playwright/test": "^1.48.1",
+    "@types/node": "^22.7.9"
+  }
+}

tests/Dfe.EarlyYearsQualification.E2ETests/playwright/playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * 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: 'http://127.0.0.1:5025',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* 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,
+  // },
+});

tests/Dfe.EarlyYearsQualification.E2ETests/playwright/tests/Journey/journey.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page, context }) => {
+    await context.addCookies([
+        { name: 'auth-secret', value: 'CX', path: '/', domain: 'localhost' }
+    ]);
+});
+
+// Mock details found in Dfe.EarlyYearsQualification.Mock.Content.MockContentfulService. 
+
+test.describe("A spec that tests question pages", () => {
+    test("Checks the content on where-was-the-qualification-awarded page", async ({ page }) => {
+        await page.goto('/questions/where-was-the-qualification-awarded');
+
+        await expect(page.locator("#question")).toHaveText("Where was the qualification awarded?");
+        await expect(page.locator("#england")).toBeVisible();
+        await expect(page.locator("#scotland")).toBeVisible();
+        await expect(page.locator("#wales")).toBeVisible();
+        await expect(page.locator("#northern-ireland")).toBeVisible();
+        await expect(page.locator(".govuk-radios__divider")).toHaveText("or");
+        await expect(page.locator("#outside-uk")).toBeVisible();
+    });
+
+    test("Checks additional information on the where-was-the-qualification-awarded page", async ({ page }) => {
+        await page.goto('/questions/where-was-the-qualification-awarded');
+
+        await expect(page.locator(".govuk-details")).not.toHaveAttribute("open");
+        await expect(page.locator(".govuk-details__summary-text")).toHaveText("This is the additional information header");
+        await expect(page.locator(".govuk-details__text")).toHaveText("This is the additional information body");
+
+        await page.locator(".govuk-details__summary-text").click();
+        await expect(page.locator(".govuk-details")).toHaveAttribute("open");
+    });
+
+    test("Shows an error message when a user doesnt select an option on the where-was-the-qualification-awarded page", async ({ page }) => {
+        await page.goto('/questions/where-was-the-qualification-awarded');
+
+        await expect(page.locator(".govuk-error-summary")).not.toBeVisible();
+        await expect(page.locator("#option-error")).not.toBeVisible();
+        await expect(page.getByTestId("main-form-group")).not.toHaveClass("govuk-form-group--error");
+
+        await page.locator("#question-submit").click();
+        await page.waitForURL("/questions/where-was-the-qualification-awarded");
+
+        await expect(page.getByTestId("main-form-group")).toBeVisible();
+        await expect(page.getByTestId("error-title")).toBeVisible();
+        await expect(page.getByTestId("error-title")).toContainText("There is a problem");
+        await expect(page.locator("#error-banner-link")).toContainText("Test error banner link text");
+
+        await expect(page.locator("#option-error")).toBeVisible();
+        await expect(page.locator("#option-error")).toContainText("Test error message");
+        await expect(page.getByTestId("main-form-group")).toHaveClass(/govuk-form-group--error/);
+    });
+});