GitHub actions

Playwright tests can be configured via playwright.config.ts and the command line.

In real world scenarios, the playwright.config.ts has the default setup and is extended by the command line options in either the terminal, package.json or github action.

In the setup below, we update the playwright.config.ts file to use the Replay chromium browser and Replay reporter which will record all tests by default and upload them to your Test Suite Dashboard.

playwright.config.ts
 1import { PlaywrightTestConfig, devices } from "@playwright/test";
 2import { devices as replayDevices, replayReporter } from "@replayio/playwright";
 3
 4const config: PlaywrightTestConfig = {
 5  reporter: [
 6    replayReporter({
 7      apiKey: process.env.REPLAY_API_KEY,
 8      upload: true,
 9    }),
10    ["line"],
11  ],
12  projects: [
13    {
14      name: "replay-chromium",
15      use: { ...replayDevices["Replay Chromium"] },
16    },
17  ],
18};
19export default config;

Now that the playwright config is set up, you can run the tests with npx playwright test. At this point, we'll add a simple Github action workflow.yml file to run and upload the tests for pushes and pull requests.

.github/workflows/e2e.yml
 1name: End-to-end tests
 2on:
 3  pull_request:
 4  push:
 5    branches: [main]
 6jobs:
 7  e2e-tests:
 8    runs-on: ubuntu-22.04
 9    steps:
10      - name: Checkout
11        uses: actions/checkout@v4
12      # If you're using Yarn or PNPM, use the appropriate install command here
13      - name: Install dependencies
14        run: npm ci
15      - name: Install Replay Chromium
16        run: npx replayio install
17      - name: Run Playwright tests
18        run: npx playwright test --project replay-chromium
19        env:
20          REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }}

Finally, add the workspace API key you were given to the Github repo settings as REPLAY_API_KEY, so that the CI job uploads to the right workspace.

In most setups, you'll want to to have additional control. In these cases, it's common to want to split up the test run and upload steps.

By default, all test replays are uploaded no matter the result. If you want to only upload the failed replays, you can do so by passing the filter property to the replayio/action-upload action:

.github/workflows/e2e.yml
 1name: Replay tests
 2on:
 3  pull_request:
 4  push:
 5    branches: [main]
 6jobs:
 7  e2e-tests:
 8    runs-on: ubuntu-22.04
 9    steps:
10      - name: Checkout
11        uses: actions/checkout@v4
12      - name: Install dependencies
13        run: npm ci
14      - name: Install Replay Chromium
15        run: npx replayio install
16      - name: Run Playwright tests
17        run: npx playwright test
18      - name: Upload replays
19        if: ${{ always() }}
20        uses: replayio/action-upload@v0.5.1
21        with:
22          api-key: ${{ secrets.REPLAY_API_KEY }}
23          filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}

You can set the browser by passing the --project flag to the npx playwright test command.

Note that when you specify the browser from the command line, you will also need to include an upload step.

.github/workflows/e2e.yml
 1name: Replay tests
 2on:
 3  pull_request:
 4  push:
 5    branches: [main]
 6jobs:
 7  e2e-tests:
 8    runs-on: ubuntu-22.04
 9    steps:
10      - name: Checkout
11        uses: actions/checkout@v4
12      - name: Install dependencies
13        run: npm ci
14      - name: Install Replay Chromium
15        run: npx replayio install
16      - name: Run Playwright tests with Replay Browser
17        run: npx playwright test --project replay-chromium --reporter=@replayio/playwright/reporter,line
18      - name: Upload replays
19        if: ${{ always() }}
20        uses: replayio/action-upload@v0.5.1
21        with:
22          api-key: ${{ secrets.REPLAY_API_KEY }}

By default, all test replays are private. If you want to make them public, you can set the public property:

.github/workflows/e2e.yml
 1name: Replay tests
 2on:
 3  pull_request:
 4  push:
 5    branches: [main]
 6jobs:
 7  e2e-tests:
 8    runs-on: ubuntu-22.04
 9    steps:
10      - name: Checkout
11        uses: actions/checkout@v4
12      - name: Install dependencies
13        run: npm ci
14      - name: Install Replay Chromium
15        run: npx replayio install
16      - name: Run Playwright tests
17        run: npx playwright test
18      - name: Upload replays
19        if: ${{ always() }}
20        uses: replayio/action-upload@v0.5.1
21        with:
22          api-key: ${{ secrets.REPLAY_API_KEY }}
23          public: true