Saving Cypress Screenshots in Azure DevOps Pipelines

When Cypress tests fail in an Azure DevOps pipeline, screenshots are often the only clue you have about what went wrong. By default, Azure DevOps discards the working directory after a pipeline run, so those screenshots vanish unless you explicitly publish them as pipeline artifacts. This guide walks you through configuring your pipeline to capture and store Cypress screenshots so you can view them directly from the test results page or download them as artifacts.

What You’ll Need

An Azure DevOps project with a pipeline (YAML or classic) already set up.
A Cypress test suite that generates screenshots on failure (enabled by default in Cypress).
Access to edit the pipeline definition (YAML file or classic editor).
Basic familiarity with Azure DevOps pipeline syntax.

Step-by-Step

Locate the Cypress screenshots folder. By default, Cypress stores screenshots in cypress/screenshots relative to your project root. If you’ve changed the screenshotsFolder in cypress.config.js or cypress.json, note that path instead.
Ensure Cypress runs in the pipeline. Your pipeline should have a step that installs dependencies and runs Cypress. For example, using the npm task with the command run and the script cypress:run (which typically maps to cypress run). Make sure the test step does not have continueOnError: false unless you want the pipeline to fail immediately; even if tests fail, you still want the screenshots to be published.
Add a Publish Pipeline Artifact task. After the Cypress run step, add a task that publishes the screenshots folder. In YAML, this looks like:
```
- task: PublishPipelineArtifact@1
  inputs:
    targetPath: 'cypress/screenshots'
    artifactName: 'cypress-screenshots'
    publishLocation: 'pipeline'
    
```
If you’re using the classic editor, add the “Publish Pipeline Artifact” task, set the path to cypress/screenshots, and give it a name like cypress-screenshots.
Publish test results (optional but recommended). To see screenshots linked directly to failed tests, publish the JUnit or Mocha test results. First, configure Cypress to output JUnit XML by installing cypress-mochawesome-reporter or using the built-in JUnit reporter. Then add a Publish Test Results task:
```
- task: PublishTestResults@2
  inputs:
    testResultsFormat: 'JUnit'
    testResultsFiles: '**/junit.xml'
    failTaskOnFailedTests: true
    
```
This step is separate from the artifact publish and gives you a test report with failure details.
Run the pipeline and verify. Trigger a pipeline run, ideally with a test that fails. After the run completes, go to the run summary page. Under “Artifacts”, you should see cypress-screenshots. Click it to browse and download the screenshots. If you also published test results, click on a failed test in the “Tests” tab to see the error message; the screenshot isn’t automatically embedded, but you can navigate to the artifact to view it.
Optional: Only publish on failure. To save storage, you can conditionally publish screenshots only when tests fail. In YAML, add a condition to the publish task:
```
    condition: failed()
    
```
This ensures the artifact is only created when the Cypress step fails. Note that if you want to preserve screenshots from successful runs (e.g., for visual regression), omit this condition.

Common Mistakes

Wrong path. The most common error is specifying an incorrect targetPath. If your Cypress project is in a subdirectory, the path must be relative to the pipeline working directory, e.g., app/cypress/screenshots.
Publishing before Cypress finishes. The artifact task must come after the Cypress run step in the same job. If you place it in a different job without dependencies, it may run before screenshots exist.
Ignoring the working directory. Azure DevOps cleans the workspace between runs by default. If you don’t publish the screenshots, they are lost. Also, if you use a self-hosted agent with a custom workspace, ensure the path is correct.
Not enabling screenshots in Cypress. Cypress takes screenshots on failure by default, but if you’ve set screenshotOnRunFailure: false in your config, no screenshots will be generated. Verify your Cypress configuration.

Tips

Use a unique artifact name per run. Azure DevOps automatically appends the run ID to the artifact name, so you don’t need to worry about overwriting. If you want to keep only the latest, you can set a retention policy on the artifact.
Embed screenshots in test reports. For a richer report, consider using the Mochawesome reporter with the cypress-mochawesome-reporter plugin. It can embed screenshots directly into the HTML report, which you can publish as an artifact. This makes it easier to view failures without downloading individual files.
Set a retention policy. In the artifact settings, you can specify how many days to keep the artifact. For screenshots, 30 days is usually sufficient. This prevents storage bloat.
Use variables for paths. Define a variable for the screenshots folder path in your pipeline to avoid hardcoding it in multiple places. For example, variables: screenshotsPath: 'cypress/screenshots'.

Troubleshooting

No artifact appears. If the artifact doesn’t show up, check the pipeline logs for the publish task. Look for errors like “Path not found” or “Access denied”. Verify the path exists by adding a Bash or PowerShell step before the publish task that lists the directory contents (ls -R or Get-ChildItem).

Screenshots are empty or missing. If the artifact exists but contains no files, Cypress may not have generated screenshots because no tests failed. Run a deliberately failing test to confirm. Also check the Cypress config for screenshotOnRunFailure and ensure it’s true.

Pipeline fails before publishing. If the Cypress step fails and the pipeline stops, the publish task won’t run. To prevent this, add continueOnError: true to the Cypress step, or use a condition to run the publish step even on failure. In YAML, set condition: always() on the publish task to ensure it runs regardless of previous step results.

Screenshots are in the wrong folder. If you see screenshots but they’re not the ones you expect, check the Cypress configuration for screenshotsFolder. It might be set to something like build/screenshots or a custom path. Adjust the targetPath accordingly.

Frequently Asked Questions

Can I view screenshots directly in the Azure DevOps test results tab?

Not directly. The test results tab shows test names and error messages, but not images. You need to download the artifact or use a reporter like Mochawesome that embeds screenshots in an HTML report.

Do I need to publish screenshots for every run?

No, you can conditionally publish only on failure using condition: failed(). This saves storage and reduces clutter. For visual regression testing, you might want to publish on success as well.

What if my Cypress tests run in a Docker container?

If you run Cypress in a Docker container, the screenshots are generated inside the container’s filesystem. You need to copy them out of the container to the pipeline workspace before publishing. Use a step that runs docker cp or mount a volume.

How do I set a retention policy for the screenshots artifact?

In the artifact dropdown on the run summary page, select “Retention” and set the number of days. Alternatively, you can configure retention in the pipeline settings under “Retention” for artifacts.

Can I use the classic editor instead of YAML?

Yes, the classic editor has the same “Publish Pipeline Artifact” task. The steps are equivalent; just fill in the fields in the UI.

Why are my screenshots not generated at all?

Check your Cypress configuration for screenshotOnRunFailure. Also, ensure you’re running Cypress in a way that captures screenshots (e.g., not using cypress open in the pipeline). If you’re using cypress run, screenshots are taken on failure by default.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.

More cards in this drawer

The whole Numbers and Powers drawer →