add playwright config

.github/workflows/frontend-test-and-build.yml

@@ -59,7 +59,7 @@ jobs:
       - name: Test app
         run: npm test --prefix=app -- --coverage
       - name: Run dependencies
-        run: ./scripts/run-dependencies && ./api/scripts/run basicauth && ./api/scripts/smoke-test
+        run: ./scripts/run-dependencies && ./api/scripts/run basicauth && ./scripts/basic-create-super-user && ./api/scripts/smoke-test
       - name: Upload coverage to codecov
         uses: codecov/codecov-action@v3
         with:

.gitignore

@@ -1,3 +1,5 @@
 .idea
 .vscode
-packit.iml
+packit.iml
+app/test-results
+app/playwright-report

README.md

@@ -60,3 +60,9 @@ See [app/README.md](https://github.com/mrc-ide/packit/blob/main/app/README.md)
 ## Authentication in Packit
 
 See [docs/auth.md](docs/auth.md)
+
+## e2e Tests
+
+Playwright tests are in `./app/e2e`. They can be configured to use `PLAYWRIGHT_BASE_URL` env var, but will fall back to 
+`http://localhost:3000`. They expect basic auth super user to be available, so you can run `./scripts/dev-start --super-user`
+to start the api and app, then from `./app` run `npm run test:e2e` to run the tests. 

app/e2e/auth.setup.ts

@@ -0,0 +1,14 @@
+import { test as setup, expect } from "@playwright/test";
+
+// Define "setup" as a dependency for any test project which requires prior authentication
+setup("authenticate", async({ page }, testInfo) => {
+    await page.goto("/");
+    // Dev superuser credentials
+    await page.getByLabel("Email").fill("resideUser@resideAdmin.ic.ac.uk");
+    await page.getByLabel("Password").fill("password");
+    await page.getByRole("button", { name: /Log in/i }).click();
+    await expect(page.locator("body")).toHaveText(/Manage Access/);
+    // write out context to tmp location to be picked up by dependent tests
+    const authFile = testInfo.outputPath("auth.json");
+    await page.context().storageState({path: authFile});
+});

app/e2e/index.spec.ts

@@ -0,0 +1,6 @@
+import { test,  expect } from "@playwright/test";
+
+test("packet group list", async({ page }) => {
+    await page.goto("/");
+    await expect(page.locator("body")).toHaveText(/Manage Access/);
+});

app/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@playwright/test": "^1.50.1",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -69,6 +70,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:e2e": "playwright test",
     "lint": "npx eslint ./src ",
     "lint:fix": "npx eslint --fix ./src",
     "eject": "react-scripts eject",

app/playwright.config.ts

@@ -0,0 +1,79 @@
+import process from "node:process";
+import { defineConfig, devices } from "@playwright/test";
+
+const setupProject = { name: "setup", testMatch: /.*\.setup\.ts/ };
+
+const outputDir = "./test-results";
+export default defineConfig({
+    testDir: "./e2e",
+    outputDir,
+    fullyParallel: true,
+    /* Maximum time one test can run for. */
+    timeout: process.env.CI ? 30 * 1000 : 15 * 1000,
+    expect: {
+        /**
+         * Maximum time expect() should wait for the condition to be met.
+         * For example in `await expect(locator).toHaveText();`
+         */
+        timeout: 10000
+    },
+    /* 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,
+    /* Allow parallel tests */
+    workers: 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: {
+        /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+        actionTimeout: 0,
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: process.env.PLAYWRIGHT_BASE_URL || "http://localhost:3000",
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+
+        headless: true,
+        screenshot: "only-on-failure"
+    },
+
+    /* Configure projects for major browsers */
+    projects:
+        process.env.CI
+        ? [
+            setupProject,
+            {
+                name: "chromium",
+                use: {
+                    ...devices["Desktop Chrome"],
+                    // Use prepared auth state.
+                    storageState: `${outputDir}/auth.json`
+                },
+                dependencies: ['setup']
+            },
+            {
+                name: "firefox",
+                use: {
+                    ...devices["Desktop Firefox"],
+                    // Use prepared auth state.
+                    storageState: `${outputDir}/auth.json`
+                },
+                dependencies: ['setup']
+            }
+        ]
+        : /* Just test on Chrome when running on local dev */
+        [
+            setupProject,
+            {
+                name: "chromium",
+                use: {
+                    ...devices["Desktop Chrome"],
+                    // Use prepared auth state.
+                    storageState: `${outputDir}/auth.json`
+                },
+                dependencies: ['setup']
+            }
+        ]
+});

scripts/dev-start

@@ -54,7 +54,11 @@ if [ $API_BUILD_SKIP -eq 0 ]; then
     "$HERE"/../api/scripts/build
 fi
 
-"$HERE"/../api/scripts/run
+if [ $ADD_SUPER_USER -eq 1 ]; then
+  # assume we want to run with basic auth if we're creating a basic super user
+  BASIC_AUTH="basicauth"
+fi
+"$HERE"/../api/scripts/run $BASIC_AUTH
 
 if [ $ADD_SUPER_USER -eq 1 ]; then
     echo "Waiting for api to initialise"