Playwright Running In Github Actions

March 04, 2021

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.

To deploy, 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.

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

• 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__/
  

• Waiting for hidden selectors - 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.