• Install playwright extension for VSCode.
• Copy .env.dev.template into .env.dev and fill in the values.
• Run yarn to install dependencies. Make sure you're using node 18.x. nvm install 18 && nvm use 18.
• Run tests directly from VSCode or from the command line with yarn e2e, or start the UI mode using yarn e2e:ui command. If you're using a local dev build, read the following section.
• If you upgrade the version of Playwright, you'll need to run yarn playwright install to update the browser binaries.

• This is useful if you want to run the tests against a local dev server of the app.
• Set export USE_DEV_BUILD=true in .env.dev file.
• Run yarn devserver to start the app dev server in a separate terminal window.
• Proceed to run e2e tests as usual, from the CLI, VSCode, or Playwright UI.
• NOTE: Parallelization doesn't work with dev build.

1. Install the eslint extension. Also set estlint.options to {"overrideConfigFile": ".eslintrc.js"} in VSCode settings to get linting in the editor.

• Use POMs where applicable, e.g. for pages, or for common components like grid, modal, sidebar.
• Do not use assertion logic directly in POMs, instead use composition to create POMs that contain the assertion class.
• Refrain from using page.waitForTimeout(). There is always a better alternative.

If you suspect a test is flaky, you can run it multiple times to see if it fails consistently. In the following example, the test will be run 10 times and a summary of the results will be printed describing how many times it passed and how many times it failed.

You may either pass the name of the spec file or the test title.

yarn check-flaky -r 10 -s "video plays with correct label for each slice"

class MyPOM {
    readonly semanticLocator1: Locator;
    readonly semanticLocator2: Locator;
    readonly assert: MyPOMAsserter;

    constructor(private readonly page) {
        this.semanticLocator1 = this.page.locator("...");
        this.semanticLocator2 = this.page.locator("...");
        this.assert = new MyPOMAsserter(this);
    }

    /**
     * All methods that return static locators should be decorated with `get`.
     */
    get someElement() {
        return this.page.locator("...");
    }

    /**
     * All methods that return dynamic locators should be prefixed with `get`.
     */
    getMyElement(param: string) {
        return this.page.locator(`...${param}...`);
    }

    /**
     * All actions should be verbs or prefixed with a verb.
     */
    async doSomeAction() {
        await this.someElement.click();
    }
}

class MyPOMAsserter {
    constructor(private readonly myPOM: MyPOM) {}

    async isFooVisible() {
        await expect(this.myPOM.someElement).toBeVisible();
    }
}

1. Read Playwright docs on this subject.
2. Since baseline screenshots are platform dependent, and our CI server runs on linux, to generate linux screenshots locally, run the following commands:

# create a docker image with playwright and python and fiftyone
yarn build-linux-screenshot-docker-image

# make sure mongod is running and available in your host machine at localhost:27017

# generate screenshots
# from e2e-pw directory, run:
docker run --rm --network host -v $(pwd):/work/ -w /work/ -it screenshot /bin/bash

# inside the docker container, run:
# if playwright version was updated,
npx playwright install chromium

. /e2e/venv/bin/activate
npx playwright test --update-snapshots -g "description of my test"

• Most likely a missing await somewhere. Use VSCode eslint integration to get hints on missing awaits.

• This shows up randomly when running tests from VSCode. Run "Developer: Reload Window" to fix it.

The order of the steps is from the most to the least likely to fix the issue.

• Run yarn kill-port 8787 to kill any stray processes that might be running on port 8787.
• Reload VSCode developer window.
• Close all browser windows from previous test runs.
• Restart the dev server.