Rayrun
← Back to Discord Forum

Cannot Automate E2E Testing using Playwright in a CI Environment with GitHub Actions.

shirotamakiposted in #help-playwright
Open in Discord

Hello Everyone,

I am currently working on building a CI environment using GitHub Actions. My goal is to automate E2E testing with Playwright. I've set up a .yml file in GitHub Actions and defined a workflow. However, I'm encountering an error that I cannot resolve.

While the tests run successfully on my local machine, the settings in the frontend/playwright.config.ts file aren't being reflected in GitHub Actions.

How can I make sure that frontend/playwright.config.ts is properly applied within GitHub Actions?

Development Environment:

  • React: 18.2.0
  • Next.js: 13.4.6
  • Ruby: 3.2.1
  • Rails: 7.0.4

Repository: https://github.com/shirotamaki/outdoor-heart-sutra

This thread is trying to answer question "How can I make sure that frontend/playwright.config.ts is properly applied within GitHub Actions?"

1 reply

I think npx playwright tests is using by default the config without set but in your code you added the --config=playwright.config.ts in the name of the step not in the run command

`- name: Run Playwright tests --config=playwright.config.ts run: npx playwright test should be

  • name: Run Playwright tests run: npx playwright test --config=playwright.config.ts`

Answer

Sure, let's get your frontendplaywright.config.ts file working with GitHub Actions.

First, push your code to a GitHub repository. If you haven't done this before, start by initializing a git repository with git init, then add, commit, and push your code.

git init
git add .
git commit -m "first commit"
git push origin master

Next, head over to the Actions tab in your GitHub repository. Here, you'll see your test workflows. If any tests have run, you can check their status here.

To view the logs for a specific workflow run, just click on it. You'll see all the actions GitHub performed during that run. If there were any errors or failures in running your Playwright tests, they'll be shown here.

Want to generate an HTML report of your tests? Click on "Run Playwright tests" within the workflow run page. The HTML report gives you detailed information about your tests. You can filter them based on browsers used and their status (passed, failed, skipped).

To download the HTML report as a zip file artifact from GitHub Actions' Artifacts section:

  1. Go to the Artifacts section.
  2. Look for "playwright-report" and click on it.
  3. This will initiate downloading of your report in zip format.

Once downloaded:

  1. Extract the zip file into a folder where Playwright is installed.
  2. Navigate into this extracted folder directory using the command line.
  3. Run npx playwright show-report name-of-my-extracted-playwright-report.
npx playwright show-report name-of-my-extracted-playwright-report

This command serves up the report through a web server, enabling you to view it in your browser.

That's it! You've ensured that the frontendplaywright.config.ts file is properly applied within GitHub Actions. For more details on HTML reporting and other Playwright features in CI with GitHub Actions, check out the Playwright documentation.

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.