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 defualt 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 {
 3    createReplayReporterConfig,
 4    devices as replayDevices,
 5} from "@replayio/playwright";
 6
 7const config: PlaywrightTestConfig = {
 8  reporter: [
 9      createReplayReporterConfig({
10          apiKey: process.env.REPLAY_API_KEY,
11          upload: true,
12      }),
13      ['line']
14  ],
15  projects: [
16    {
17      name: "replay-chromium",
18      use: { ...replayDevices["Replay Chromium"] },
19    }
20  ],
21};
22export 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: [push, pull_request]
 3jobs:
 4  e2e-tests:
 5    runs-on: ubuntu-22.04
 6    steps:
 7      - name: Checkout
 8        uses: actions/checkout@v4
 9      - name: Install dependencies
10        run: npm ci
11      - name: Run Playwright tests
12        run: npx playwright test
13        env:
14          REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }}

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 recordings, you can do so by passing the filter property to the replayio/action-upload action:

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