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

Patternfly Page Sidebar on Mobile

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

/**
 * Workaround for Patternfly and its mobile layout.
 *
 * The sidebar is always expanded by default. Some time around when the page
 * is done loading, if Patternfly detects the screen width is too narrow, it
 * will collapse the sidebar. However, the button to collapse the sidebar
 * becomes interactive before that check happens.
 *
 * So to access the sidebar on mobile during first launch, we retry expanding
 * the sidebar twice as a workaround.
 */
async function retryExpandSidebar(page: Page) {
  await expect(async () => {
    await page.getByLabel('Global navigation').tap();
    await page.waitForTimeout(1000);  // sidebar animation
    await expect(page.getByRole('link', { name: 'New and Existing Analyses' }))
      .toBeInViewport({timeout: 10});
  }).toPass({
    intervals: [100],
    timeout: 2500
  });
}