Playwright

Playwright is a utility for end-to-end testing in web apps.

Test Setup in VSCode

Generating HTML reports on CICD

The reporter documentation confused me and I had trouble getting an HTML report and normal testing output to show up how I wanted it to. This is what I did.

const config = {
  reporter: [[process.env.CI ? "dot" : "list"], ["html", { open: "never" }]],
  use: {
    trace: "on-first-retry",
  },
};

Additionally, my .github/workflows/ci.yml file has the following, allowing Github Actions to find the right artifact.

- uses: actions/upload-artifact@v3
  if: always()
  with:
    name: playwright-report
    path: playwright-report/
    retention-days: 30

On failure, the github action summary page should contain a link to the playwright-report artifact, which is a zip file containing the report. You can download it and then use playwright to view it. For example, having just downloaded it to my mac computer, I could view it via,

npx playwright show-report ~/Downloads/playwright-report

Running one project locally, and all projects on CI

Projects are a good way to support different browsers and screen widths. But, by default, every project is ran when the full test suite is ran. For fast feedback loops, you will perhaps want to only run one project, like just the chromium browser or chromium mobile suite.

You can use a CLI flag to isolate one project. You can add that flag to your local dev environment keyboard shortcuts.

For example, say you have a chromium browser project,

const config = {
  projects: [
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"],
      },
    },
  ],
};

You can run just that project like this,

npx playwright test --project=chromium

You can add it to your local dev env keybindings as well. For example, I have a .vscode/tasks.json file that uses the flag, and keybindings that execute that task. This means I can have fast feedback loops on local, and a much more thorough test suite running on CI.

Lastly, you can still run npx playwright test manually on local to run all your tests.