Merge pull request #1120 from nationalarchives/task/setup-cypress-e2e…

…-to-run-against-staging-when-it-is-updated/1287

Setup cypress e2e tests with simple login test test and configure CI to run the test suite against staging

.github/workflows/e2e_cypress_tests.yml

@@ -0,0 +1,32 @@
+name: E2E Cypress Tests
+
+on:
+  workflow_call:
+    inputs:
+      CYPRESS_BASE_URL:
+        required: true
+        type: string
+    secrets:
+      CYPRESS_USERNAME:
+        required: true
+      CYPRESS_PASSWORD:
+        required: true
+
+jobs:
+  run-e2e-cypress-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code Repository
+        uses: actions/checkout@v3
+
+      - name: Install Node.js and npm
+        uses: actions/setup-node@v2
+        with:
+          node-version-file: .node-version
+
+      - name: Install Cypress
+        run: npm install cypress
+
+      - name: Run Cypress Tests
+        run: CYPRESS_BASE_URL=${{inputs.CYPRESS_BASE_URL}} CYPRESS_USERNAME=${{secrets.CYPRESS_USERNAME}} CYPRESS_PASSWORD=${{secrets.CYPRESS_PASSWORD}} npx cypress run --headless

.github/workflows/e2e_staging_tests.yml

@@ -0,0 +1,21 @@
+name: E2E Staging Tests
+
+on:
+  schedule:
+    - cron: "0 8 * * *"
+  workflow_call:
+    secrets:
+      CYPRESS_USERNAME:
+        required: true
+      CYPRESS_PASSWORD:
+        required: true
+
+jobs:
+  qa_e2e_tests_on_staging:
+    name: Run Staging E2E Cypress Tests
+    uses: ./.github/workflows/e2e_cypress_tests.yml
+    with:
+      CYPRESS_BASE_URL: "https://editor.staging.caselaw.nationalarchives.gov.uk"
+    secrets:
+      CYPRESS_USERNAME: ${{ secrets.CYPRESS_USERNAME }}
+      CYPRESS_PASSWORD: ${{ secrets.CYPRESS_PASSWORD }}

.github/workflows/release.yml

@@ -4,7 +4,14 @@ on:
     types: [published]
 
 jobs:
-  run:
+  pre_release-qa_e2e_tests_on_staging:
+    uses: ./.github/workflows/e2e_staging_tests.yml
+    secrets:
+      CYPRESS_USERNAME: ${{ secrets.CYPRESS_USERNAME }}
+      CYPRESS_PASSWORD: ${{ secrets.CYPRESS_PASSWORD }}
+
+  release:
+    needs: pre_release-qa_e2e_tests_on_staging
     name: Run local action
     runs-on: ubuntu-latest
     steps:

README.md

@@ -191,6 +191,25 @@ topic and `public-` and `private-asset-buckets` for S3.
 $ fab test
 ```
 
+### Running cypress E2E tests
+
+We have started adding cypress tests so we have some E2E tests to be happier with critical E2E workflows.
+These should be kept to a minimum since they are slow to run, resource intensive and harder to debug than smaller integration and unit tests.
+
+However, we should try to add all critical editor workflows here to give confidence we don't introduce regressions in new releases.
+
+NOTE: For now we should point the tests to staging, but eventually we may have a dedicated testing set up.
+
+To run them locally, you can run:
+
+`CYPRESS_BASE_URL=base_eui_url CYPRESS_USERNAME=username CYPRESS_PASSWORD=password npx cypress run --headless`
+
+You can also run the tests interactively with:
+
+`CYPRESS_BASE_URL=base_eui_url CYPRESS_USERNAME=username CYPRESS_PASSWORD=password npx cypress open`
+
+where `username` and `password` are credentials for accessing the EUI deployment at `base_eui_url`.
+
 ## Setting up the pre-commit hooks (strongly advised)
 
 To use this, you will need to install [pre-commit](https://pre-commit.com/) on your development machine, typically using `pip install pre-commit`.

cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: "http://localhost:3000",
+  },
+});

cypress/e2e/login.cy.js

@@ -0,0 +1,16 @@
+describe("Login Test", () => {
+  it("should successfully log in", () => {
+    // Visit the login page
+    cy.visit(`/accounts/login/`);
+
+    // Enter the username and password
+    cy.get("#id_login").type(Cypress.env("USERNAME"));
+    cy.get("#id_password").type(Cypress.env("PASSWORD"));
+
+    // Click the login button
+    cy.get('button.primaryAction:contains("Sign In")').click();
+
+    // Verify successful login
+    cy.url().should("not.include", "/login");
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')