garris / BackstopJS

Catch CSS curve balls.
http://backstopjs.org
MIT License
6.79k stars 606 forks source link

How do I compare screenshots made during onReady? #1475

Open DriftingSands opened 1 year ago

DriftingSands commented 1 year ago

I am creating screenshots for testing an app, and I require multiple screenshots after clicks and inputs in a specific order.

` await page.waitForNetworkIdle() await sleep(1000)

await page.click("button.add-item")

await sleep(1000) await page.screenshot()

await page.click("div[class^='buttonGroup'] > button:nth-child(2)") await sleep(1000)

await page.screenshot() await sleep(10000) `

In this example the screenshots are ignored/overwritten and in the end I only get one screenshot at the end in the html report. How do I setup something like this correctly?

alexd3d commented 1 year ago

+1! That would be very helpful feature. I test this great tool for one day and I feel the need of some kind of "subscenarios" that can be made sequentially. I.e. I am testing sticky header in 3-5 different positions (it slides away when scroll down and slides back down when scrolling up). So currently I need to create for each such skcreenshot a separate scenario in json (at least that works). But these scenarios are almost the same - the difference is one additional interaction or scroll event! It would be nice if I we had something like "await makeSnapshot()" and it automatically treated as separate test-case.

The bad side of current scenario-per-screenshot approach (as I understand this, sorry if I am wrong) - is that instead of having single opened and loaded webpage (~3s) and then make quick 3-5 interactions with snapshots after each interaction, currently it creates 5 chrome instances and each loads webpage all over again from scratch and all interactions should be repeated (and increment step action). That might be treated as ddos if I test a lot of test cases and takes CPU and network bandwidth, right?

Thanks again!