Does Playwright output the Trace, Video and Screenshot on the HTML reporter in Gitlab pipeline
I'm having some difficulty understanding that if PW can output exactly the same as if we were to do locally. Meaning that we can see the screenshot, video and the trace.zip file in the HTML reporter in Gitlab like we can on our local machine. So far, I have already set the playwright.config.ts file with all three, but they don't see to be working on the CICD pipeline. The only thing that I got work successfully, was to add a screenshot for each test case failure, but failed to do so for video and for trace file. Maybe some can share some Gitlab configuration or implementations that works since Google just shows me how to do things locally.
This thread is trying to answer question "Can Playwright output the same results (screenshot, video, trace.zip file) on the HTML reporter in Gitlab as it does locally?"
Related Ask AI answer for "How do I configure Playwright to output screenshots and videos in GitLab's CI/CD pipeline?".
Answer
Sure, you can get the same output (screenshot, video, trace.zip file) on the HTML reporter in GitLab's CI/CD pipeline as you do locally with Playwright. Here's how to do it:
Install Node.js
First, you need to add a step in your GitLab CI/CD pipeline configuration file (.gitlab-ci.yml) to install Node.js using the NodeTool task:
stages:
- test
test:
stage: test
image: node:lts
script:
- npm install --global npx
- npx playwright install-depsRun Playwright tests
Next, add a step to run your Playwright tests using the npx playwright test command:
test:
stage: test
image: node:lts
script:
- npm install --global npx
- npx playwright install-deps
- npx playwright test --project=$(project) --shard=$(shardIndex)/$(shardTotal)Remember to customize this command based on your specific project setup.
Generate and view trace files
To generate and view trace files in the HTML reporter within GitLab's CI/CD pipeline, you need to:
-
Start and stop tracing within your Playwright tests using the
browserContext.tracing.startandbrowserContext.tracing.stopmethods. Save the generated trace file to a location accessible within your CI/CD pipeline. -
Use GitLab's artifact upload feature to upload the generated trace file as an artifact. Then, you can download and view the traces from within GitLab's UI.
That's it! Now, Playwright should generate the same output (screenshots, videos) as it does locally when running tests. For more details on how to optimize your Playwright tests, check out Tips for Writing Efficient Playwright Test Scripts.
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.