Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use BackstopJS as a comparison tool #1334

Open
jgornick opened this issue Jun 30, 2021 · 6 comments
Open

Use BackstopJS as a comparison tool #1334

jgornick opened this issue Jun 30, 2021 · 6 comments

Comments

@jgornick
Copy link

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
Copy link
Owner

garris commented Jul 1, 2021

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
Copy link
Author

jgornick commented Jul 4, 2021

@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
Copy link
Author

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
Copy link
Owner

garris commented Oct 22, 2022

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
Copy link

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
Copy link
Owner

garris commented May 10, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants