For our Testspace UI testing, we use the Jest test framework and Puppeteer for controlling the browser. One challenge we experienced when executing “headless” automated tests using our CI system was having no visibility of the active screen on a test failure. It soon became difficult to triage failures when we deployed more extensive testing scenarios.

The following is an example test results record maintained on the Testspace server.

Because Testspace supports annotating tests with arbitrary files, including images, we wanted to include a captured screenshot when a test fails. To accomplish this we extended the Jest Puppeteer environment (see below).

The following image provides an example of an attached screenshot with a failed test case:

When clicking on the "should_match_Testspace_demo_project_.png" link, the following image will be rendered. The image is a “diference” image of a “visual test” failing, expecting the screenshots to match.

NOTE. Refer to this example REPO for more details. And the corresponding Testspace PROJECT.

To support capturing and publishing screenshots associated with test failures, we were required to extend the puppeteer and jest environment.

Extending Environment

To enable capturing images automatically on test failures, the Jest Puppeteer Environment was required to be extended. Two use cases were covered:

1. Capture a screenshot of a test failure
2. Capture an image difference when a visual test fails using the jest image snapshot package

The basic concept is to extend the handleTestEvent, specifically on a test failure. Note, refer to the Jest Puppeteer Environment article for specifics.

• If an image diff` has been generated capture it for publishing
• If not an image diff, take a snapshot of the current screen

Images generated are moved into a specific folder … in this example it is called screenshots. Checkout the example repo here - example-jest.puppeteer.screenshots.

Refer to jest-custom-environment.js for specifics. Also refer to the jest-custom-global-setup.js for global setup requirements.

Publishing Results

To support attaching screenshots/images, a Testspace content list file is used. When a test fails, an image is created (or used if auto-generated) and an entry is added to the content list file. The image name is based on the test case name.

An example content list file entry (screenshots-list.txt):

"[Suite Name]+./screenshots/test case name.jpeg{screenshot}"

When publishing to Testspace the following command line is used:

testspace junit.xml @./screenshots-list.txt

Get setup in minutes!

Try Testspace risk-free. No credit card is required.

Have questions? Contact us.