Playwright with GitHub Actions
Tags: 100daystooffload, playwright, githubactions, testing
Published: 2023-11-13 20:29:24

[Playwright](https://playwright.dev/) is a fantastic tool for doing reliable end-to-end testing for your web application.

By using Playwright with [GitHub Actions](https://docs.github.com/en/actions), you can automate your end-to-end tests to run on every push or on a specific time to ensure that your web application is always working as expected.

Here is a step-by-step guide on one way to do this:

1. This guide assumes that there is a Playwright project located on this path of your repository, `./tests/web-application`
2. Create a new workflow file in your repository which will define the steps that will be executed when the workflow is triggered.
    ```bash
# Assumes that we are in the root of the repository
mkdir -p ./.github/workflows
touch ./.github/workflows/end-to-end-tests.yml
```
3. Edit the new file, `end-to-end-tests.yml`, with your favorite IDE and add the following snippet at the top.
    ```yml
    name: end-to-end-tests

    on:
      schedule:
        - cron: '0 23 * * 1-5'
      workflow_dispatch:
    ```
    This will name the workflow in the Actions tab to `end-to-end-tests` and will be triggered Monday to Friday 23:00 UTC. The `workflow_dispatch` makes it possible to trigger the action manually from GitHub UI.

4. Next we will define our job in the workflow file for running our Playwright tests.
    ```yml
    jobs:
      run-playwright-tests:
        timeout-minutes: 60
        runs-on: ubuntu-latest
        defaults:
          run:
             working-directory: ./tests/web-application
        steps:
          - uses: actions/checkout@v4
          - uses: actions/setup-node@v3 
            with:
              node-version: 18
          - name: Install dependencies
            run: npm ci
          - name: Install Playwright
            run: npx playwright install --with-deps
          - name: Run Playwright tests
            run: npx playwright test
          - uses: actions/upload-artifact@v3
            if: ${{ failure() }}
            with:
              name: playwright-report
              path: tests/web-application/playwright-report
            retention-days: 5
    ```
    This job will run the tests, and if any of test fails it will use the `actions/upload-artifact@v3` to upload the Playwright test report to the action view on GitHub. **Note:** That the `path` needs to be the full path even if we have defined a `working-directory`.
5. Commit your changes and push them to the repository.

Once you have pushed your changes, GitHub Actions will automatically trigger your workflow at the scheduled time or if you can't wait, you can manually trigger it.

If any of the tests fail, the workflow will fail and you will receive a notification. You can then investigate the failing tests by downloading the report from the failed action on GitHub.

I usually set, `video: 'retain-on-failure'`, in the Playwright configuration file so I will be able to see videos for the failed tests. Another setting that might be of interest is to set, `trace`, also.

So far the experience with Playwright and GitHub together  been great, and I can highly recommend it.

Happy testing!