Playwright Running In Github Actions

How I got Playwright Working in a Github Action

A few weeks ago we started using Playwright to test some of our core user flows of our application, in an end-to-end fashion. We take a lot of our testing strategy from Kent C. Dodds, as well as test plan strategy from Roy Osherove.

Since a fair few cases we have are covered by our integration testing, we are only hitting main flows a user will take while using our application. You can read more about some of this type of test planning over in my NDC Minnesota post, or on Roy Osherove's website.

To deploy our application, we use a Github action that checks-out, builds, tests, and deploys our code. Here are the sticking points we ran into when getting the Playwright tests to work.

1. The Chrome sandbox not allowing tests to run - The fix:

browser = await chromium.launch({
  headless: IS_HEADLESS,
  chromiumSandbox: false,
  args: ["--no-sandbox", "--disable-setuid-sandbox"],
});

So, this is kind of breaking some security practices, but since we are running the tests in an isolated, secure sandbox, this was a tradeoff we were willing to make. We also aren't exposing any sensitive data or anything, so thats another reason why we found no problem running the chromium instance without sandboxing.

2. Not being able to upload a file - The fix:

page.on("filechooser", async (fileChooser) => {
  await fileChooser.setFiles("./__fixtures__/example.txt");
});

The file path is a relative path of where your node cwd() is, for example my __fixtures__ folder is in the directory in this structure:

tests
|------- __tests__/
|------- package.json
|------- __fixtures__/

3. Waiting for selectors to be hidden - The fix:

await page.waitForSelector('div:text-matches("example.txt")', {
  state: "hidden",
});

Which waits for the div with text content of example.txt to be hidden from the page.

These were the main sticking points I had getting Playwright to work in production.