Back

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.