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-deps

Run 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:

1. Start and stop tracing within your Playwright tests using the browserContext.tracing.start and browserContext.tracing.stop methods. Save the generated trace file to a location accessible within your CI/CD pipeline.

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