Use BackstopJS as a comparison tool

[jgornick]

Hi! I was wondering if it was possible to use BackstopJS as a comparison tool? For example, can I provide the reference and test screen shots without using BackstopJS's rendering or interaction functionality?

For example: I'm testing my React and React Native components in isolation with Storybook. I use services like SauceLabs via WebdriverIO and Appium to render and interact with my components. I can also use the same tools to capture screen shots. Is it then possible to feed those captured screen shots to BackstopJS and skip rendering and interacting?

Thanks!

[garris]

Yes. This is totally possible -- but you would need to build a harness.

Let's say you can get a series of scenario images generated by your saucelabs instance e.g.

mySauceAccount/projectName/testSeries_1/scenario_1
mySauceAccount/projectName/testSeries_1/scenario_2
Etc...

You would generate a config file where scenario URLs would look like this...

selector: "testHarnessDiv"
URL: http://localhost:3000/myBackstopHarness?URL=mySauceAccount/projectName/testSeries_1/scenario_1

And your myBackstopHarness.js is a node script which looks for that URL and displays it in a div called testHarnessDiv.

Backstop has a feature called backstopRemote which you could use to host the harness.

Hope this makes sense. I think it's maybe 2-3 hours of work -- but it would be a very cool feature that I would be happy to integrate into the backstop package.

Please let me know if you want to work on it and I can help out.

Cheers!

[jgornick]

@garris Thank you for the prompt response! It sounds promising that we'd be able to create a harness that allows us to keep using BackstopJS with different ways of capturing screenshots.

I'll update this issue when we start to work on it 😄

[jgornick]

Hey @garris, 1+ year later, but wanted to check-in to see if anything has changed since your last recommendation on how use BackstopJS as just a comparison tool?

[garris]

Hi there. Amazing how a year just goes by!

So yeah -- answer is still the same. You just need to add a route in backstop_remote to stand up your reference and test images. With backstop_remote, backstop is in interactive/slave mode -- you build the test report one comparison at a time with http calls (like a per-scenario web hook from sauce or whatever). If you want to build it I can walk you through the components on a zoom call.

Otherwise-- I guess we can put it off and just touch base again next year 😄

☮️

[jairoareyes2]

H there. I have the same need: using Backstop as a comparing tool. Is the solution the same as 2 ~ 3 years ago? Thanks.

[garris]

@jairoareyes2 hello! Yes, I am now 3 years older, but the solution remains the same. 😺