How do I compare screenshots made during onReady?

[DriftingSands]

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]

+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!