Juri Strumpflohner
Juri Strumpflohner Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

Access Selenium Test Screenshots on failed GitLab Pipeline Steps

Quick recipe how to enable GitLab artifact storage on failed CI pipeline steps

2 min read

You know those moments when your Selenium based test succeeds locally, but for some weird reason fails on CI? The only hope: screenshots of the failed run! Let’s quickly have a look at how we can tell GitLab to store those screenshots on a failed run.

Storing Artifacts in GitLab

Storing artifacts is a common thing, especially for node_modules. Since the installation takes a lot of time, the usual approach is to have an installation step in your pipeline that does the npm install and then caches the node_modules accordingly.

This might look as follows:

  stage: setup
    - npm ci --prefer-offline
      - node_modules/
Panel on the right hand side that allows to browse/download stored artifacts

Configuring when to store artifacts

The above configuration configures the GitLab pipeline step to only store the artifact if the step succeeds. Sometimes however you want the exact contrary, namely to store it when the step fails.

Take for instance this e2e test configuration. It uses Protractor (a Selenium based e2e test runner), but note how I use the Cypress Docker image because it has a handy setup of Node.js & Chrome configuration (or was it due to nostalgia of not being able to use Cypress for my e2e in this project 🤔)

Anyhow, you can add a when condition to the artifacts: section that allows you to specify either on_success (which is the default), always or on_failure.

The last one is the one we would want to have of course. Here’s an example

  image: cypress/browsers:node12.18.0-chrome83-ff77
  stage: test
    - npx webdriver-manager update --versions.chrome=$CHROME_VERSION
    - npx nx affected:e2e --base=origin/$CI_MERGE_REQUEST_TARGET_BRANCH_NAME --configuration=headless --webdriverUpdate=false
    when: on_failure
      - target/

Questions? Thoughts? Hit me up on Twitter
comments powered by Disqus