Playwright with GitHub Actions

Playwright is a fantastic tool for doing reliable end-to-end testing for your web application.

By using Playwright with GitHub 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.
   

   # 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.
   

   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.
   

   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!