E2E Testing with Playwright

Running Tests

Run all tests:

npm run test:e2e

Or, use a GUI to run tests one-by-one:

npm run test:ui

Writing Tests

E2E tests can be recorded from user interactions. See https://playwright.dev/docs/codegen-intro

First, start the development server:

npm run dev:public

In another terminal, open the website and start recording tests:

npm run test:codegen

Test User Accounts

For tests which require being logged in, use

import { test, expect } from "./fixtures/loggedIn";

For tests which require being not logged in, use

import { test, expect } from "./fixtures/notLoggedIn";

The fixtures in ./fixtures/loggedIn.ts create new user accounts for each test worker.

Persistent Data

Persistent data should be created by the chrisui user account as public feeds. Since tests depend on the state of the chrisui user, their password is kept secret. Contact Jennings for their password.

Helper Functions

• Use Faker.js to generate random fake data, e.g. names.
• Skip test depending on which browser or isMobile: see https://playwright.dev/docs/api/class-test#test-skip-3
• Use helpers/expandSidebar.ts to expand the page sidebar.

Local Tests

By default, E2E testing uses a global public testing server as its backend.

The public testing server is pre-populated with data which some of our tests rely on. However, tests which affect global state of the backend (such as PACSFiles) cannot be executed on the public testing server. Hence, in order to run all of the tests, it is necessary to use both the "public" backend and a "local" backend.

There are two commands to start a development server:

Command	Backend	Port
npm run dev:local	local	5173
npm run dev:public	public	25173

It is assumed that when the UI development server is listening on localhost:5173, the backend is a "local" backend, and when the server is listening on localhost:25173, the backend is the "public" backend. These commands are invoked by Playwright, which is configured to do so in playwright.config.ts.

You will commonly see test.skip being called on the hard-coded port numbers 5173 or 25173, e.g.

test("Retrieve a single study and create a feed", async ({ page, baseURL }) => {
  test.skip(
    baseURL?.includes('localhost:25173') || false,
    "Testing PACS Q/R cannot be done on the global test server."
  );
  // -- snip --
});

You can use the Playwright UI with a "local" backend by running

npm run test:ui:local

It is important that you re-run npm run minichris:wipe before each stateful test.