GitHub actions

Playwright tests can be configured via playwright.config.ts or using command line options. In a real world scenario you usually end up using both.

Usually, the playwright.config.ts file specifies the default setup. Your GitHub Action workflow.yml file will then define additional options passed via command line.

Simple setup

This configuration file contains only a single project that uses replay-chromium as a default browser and uses Replay as the default test reporter.

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

In a configuration like the one above, as simple npx playwright test command will:

1. Run all your Playwright tests
2. Automatically create replays
3. Automatically upload them to Test Suite Dashboard

The workflow.yml file will in this case look as simple as following:

.github/workflows/e2e.yml
 1name: End-to-end tests
 2on: [push, pull_request]
 3jobs:
 4  cypress-run:
 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

Advanced setup

Usually a Playwright project contains multiple browser projects and various browser reporters. By default, Playwright will run all your projects and use all defined reporters. The replay-chromium browser will take care of recording your tests.

Specifying projects to run

You can take control of which project is ran using your workflow file.

Notice, that in this setup, you need to include an upload step. Specifying if: ${{ always() }} will make sure that the "Upload replays" step is executed no matter the result of previous step.

.github/workflows/e2e.yml
 1name: Replay tests
 2on: [push, pull_request]
 3jobs:
 4  cypress-run:
 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 }}

Uploading failed tests only

By default, all test replays are uploaded no matter the result. If you want upload only the failed recordings, you can define the step to do so using filter property:

.github/workflows/e2e.yml
 1name: Replay tests
 2on: [push, pull_request]
 3jobs:
 4  cypress-run:
 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 }}
18          filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}