PI-2406: Created Playwright Basic Setup and Added Test for Manage a …

…Supervision Spike (#117)

* PI-2406-Created a basic setup for Playwright and added a test for spike

* PI-2406-Created a basic setup for Playwright and added a test for spike

* PI-2406-Created a basic setup for Playwright and added a test for spike

* Initial changes for running Playwright tests

* Re-use shared steps from e2e project + add CI workflow

---------

Co-authored-by: Marcus Aspin <[email protected]>

.eslintignore

@@ -1,6 +1,8 @@
 node_modules
 public
 assets
+test-results
+playwright-report
 cypress.json
 reporter-config.json
 dist/

.eslintrc.json

@@ -85,7 +85,7 @@
     "comma-dangle": ["error", "always-multiline"],
     "import/no-extraneous-dependencies": [
       "error",
-      { "devDependencies": ["**/*.test.js", "**/*.test.ts", "**/testutils/**", "cypress.config.ts"] }
+      { "devDependencies": ["**/*.test.js", "**/*.test.ts", "**/testutils/**", "cypress.config.ts", "e2e_tests/**", "playwright.config.ts"] }
     ],
     "no-only-tests/no-only-tests": "error",
     "prettier/prettier": [

.github/workflows/playwright.yml

@@ -0,0 +1,35 @@
+name: Playwright Tests
+on:
+  schedule:
+    - cron: "0 8 * * MON-FRI"
+  workflow_dispatch:
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: moj-cloud-platform
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install
+    - name: Add config
+      run: cp e2e_tests/.env.example e2e_tests/.env
+    - name: Run Playwright tests
+      run: npm run e2e-test
+      env:
+        DELIUS_USERNAME: ${{ secrets.E2E_DELIUS_USERNAME }}
+        DELIUS_PASSWORD: ${{ secrets.E2E_DELIUS_PASSWORD }}
+    - name: Publish HTML report
+      if: always()
+      uses: JamesIves/github-pages-deploy-action@94f3c658273cf92fb48ef99e5fbc02bd2dc642b2 # v4
+      with:
+        folder: playwright-report
+        target-folder: playwright-report/${{ github.ref_name }}/${{ github.run_id }}/${{ github.run_attempt }}
+    - name: Output HTML report URL
+      if: always()
+      run: echo '[🎭 Playwright HTML Report](https://ministryofjustice.github.io/hmpps-probation-integration-e2e-tests/playwright-report/${{ github.ref_name }}/${{ github.run_id }}/${{ github.run_attempt }})' | tee -a "$GITHUB_STEP_SUMMARY"

.gitignore

@@ -129,3 +129,7 @@ integration_tests/screenshots/
 
 # Sentry Config File
 .sentryclirc
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-NODE_ENV=dev && node_modules/.bin/lint-staged && npm run typecheck && npm test
+NODE_ENV=dev && node_modules/.bin/lint-staged && npm run typecheck && npm test

.zap/autorun.yml

@@ -25,8 +25,8 @@ env:
       users:
       - name: "TestUser"
         credentials:
-          username: "$ZAP_USERNAME"
-          password: "$ZAP_PASSWORD"
+          username: "$E2E_DELIUS_USERNAME"
+          password: "$E2E_DELIUS_PASSWORD"
   parameters:
     failOnError: true
     failOnWarning: false

README.md

@@ -104,6 +104,20 @@ npm run int-test
 npm run int-test-ui
 ```
 
+### Running end-to-end tests
+Create a `.env` file in the e2e_tests directory with your Delius credentials. You can use `.env.example` as a template.
+```shell
+cp -n .env.example .env
+```
+
+Run the tests
+```shell
+npm run e2e-test
+
+# Or, run in debug mode to enable breakpoints and test recorder
+npm run e2e-test:debug
+```
+
 ### Dependency Checks
 
 The template project has implemented some scheduled checks to ensure that key dependencies are kept up to date.

e2e_tests/.env.example

@@ -0,0 +1,7 @@
+# URLs
+DELIUS_URL=https://ndelius.test.probation.service.justice.gov.uk
+MANAGE_A_SUPERVISION_URL=https://manage-a-supervision-dev.hmpps.service.justice.gov.uk
+
+# Credentials
+#DELIUS_USERNAME=example
+#DELIUS_PASSWORD=example

e2e_tests/tests/view-case.spec.ts

@@ -0,0 +1,32 @@
+import { expect, test } from '@playwright/test'
+import * as dotenv from 'dotenv'
+import { DateTime } from 'luxon'
+import { deliusPerson } from '@ministryofjustice/hmpps-probation-integration-e2e-tests/steps/delius/utils/person'
+import { createOffender } from '@ministryofjustice/hmpps-probation-integration-e2e-tests/steps/delius/offender/create-offender'
+import { login as loginToDelius } from '@ministryofjustice/hmpps-probation-integration-e2e-tests/steps/delius/login'
+import { login as loginToManageMySupervision } from '@ministryofjustice/hmpps-probation-integration-e2e-tests/steps/manage-a-supervision/login'
+
+dotenv.config({ path: 'e2e_tests/.env' }) // read environment variables into process.env
+
+test('Verify the header details', async ({ page }) => {
+  // Create a person in Delius
+  await loginToDelius(page)
+  const person = deliusPerson()
+  const crn = await createOffender(page, { person })
+
+  // Search for the CRN
+  await loginToManageMySupervision(page)
+  await page.getByRole('link', { name: 'Search' }).click()
+  await page.getByLabel('Find a person on probation').fill(crn)
+  await page.getByRole('button', { name: 'Search' }).click()
+
+  // Verify the person appears in the search results and crn, name, dob & tier matches
+  await page.locator(`[href$="${crn}"]`).click()
+  await expect(page).toHaveTitle('Manage a Supervision - Overview')
+  await expect(page.locator('[data-qa="crn"]')).toContainText(crn)
+  await expect(page.locator('[data-qa="name"]')).toContainText(`${person.firstName} ${person.lastName}`)
+  await expect(page.locator('[data-qa="headerDateOfBirthValue"]')).toContainText(
+    DateTime.fromJSDate(person.dob).toFormat('d MMMM yyyy'),
+  )
+  await expect(page.locator('[data-qa="tierValue"]').first()).toContainText('D0')
+})