Use BackstopJS to diff/test screenshots from other software (e.g. Angular Protractor)

[bitjson]

Fantastic work on this project! I love the new UI.

I'd like to be able to use BackstopJS to diff screenshots taken by other software, rather than using BackstopJS's screenshot capturing features.

Integrating BackstopJS testing into a modern Angular application seems to require a lot of configuration. Rather than redefining all the paths, scenarios, mock content, and testing procedures again for BackstopJS, I'd like to simply take screenshots during my existing e2e tests (running in Protractor). Protractor already makes this easy, and configuration is fairly standard across the Angular ecosystem.

Once protractor has saved the screenshots to a temporary directory, I'd like to be able to pass those screenshots to BackstopJS for comparison/testing/approval in a separate npm task.

Has anyone tried this setup before? (Or have other recommendations for integrating BackstopJS into an existing e2e test suite?)

Related issues:

622

293

[garris]

Unfortunately it’s going to be a bit of work to do that. You’d probably be better off to generate a backstop config object as an output of your protractor flow — then just require(‘backstop’)(‘test’, yourgeneratedconfig). Something like that.

This approach would repeat the screen capture step — but it would be a straightforward exercise. Backstop tracks all the assets in a particular way, it’s fairly complex — so you’d have to learn a lot of backstop internals to skip the screen capture step.

[listepo]

BackstopJS + Protractor, it would be great

[adiherzog]

@bitjson @listepo You might want to have a look at http://scenarioo.org (sorry for advertising a different tool, but this might fit your needs).

It integrates with Jasmine + Protractor (or Java / C# Selenium tests). You can browse the screens of each test run and also create and browse the visual diff of two builds.

Example from the demo:

Browse demo:

http://demo.scenarioo.org/scenarioo-master/#/step/Donate/find_donate_page/searchResults.jsp/0/0?branch=wikipedia-docu-example&build=last%20successful&comparison=To%20Projectstart

[bitjson]

@adiherzog thanks for the info, looks great.

If anyone is curious, here's the solution I eventually came to: Copay/BitPay Visual Regression Testing

It's fully documented there, but basically we run our E2E tests in Docker to get consistent rendering on all machines, then we take screenshots at specific important points. Then we use another tool called reg-cli to do the comparison. This works well because we can do it both in development and in CI.

Here's the docker package script, and here's the visual-diffing package script.

[mygithub-Automation]

@garris Is this implemented ? i would love to see protractor + backstopJS integration. "I'd like to simply take screenshots during my existing e2e tests (running in Protractor) and compare using backstopJS"