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.

Simple setup

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 - 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 env:
19 REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }}

Advanced setup

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.

Only uploading failed tests

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:
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" }' }}

Setting if: ${{ always() }} is important so that this step is always executed, even when the previous step fails.

Specifying which browser is used

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 }}

While uploading only your failed tests is good for saving resources, our recommendation is to upload both so that you can compare them and see what is different.

Setting the replays to public

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
Previous
Playwright