Blockout multiple selectors - how does it work?

[Gjodim]

Hello. I am in a bit of a pickle and perhaps am doing something wrong.

I am trying to blockout multiple selectors on a page in a single test.

What i try is the following:

await takeSnapshot(t, {label:${j}position${i}px, blockOut: [Selector('.eventlist'), Selector('.newslist')], timeout: 1000}); but it does not seem to work. My question / issue is - is there any other syntax i should use for blocking multiple selectors?

[pateketrueke]

Hi, according the test we did to cover this feature that is the correct syntax.

Just to confirm, during your tests a file blockOut.json should be written in the same place where the base.png screenshots are stored, can you confirm it is created as well?

That should contain all the coordinates on the DOM that will be blocked-out, if the file is present and stilll is not working, probably is due the blink-diff dependency, may be we just need to upgrade, etc.

[Gjodim]

Yes, a blockout.json is created with seemingly the correct coordinates. I will try to take the snapshots again with some other selector combination which should yield the same result.

If this doesn't work is there something else (workaround or something) you recommend i try?

[Gjodim]

Checked again but it still does the comparison - blockout.json is generated but it doesn't seem to consider the blockedOut areas.

[pateketrueke]

it doesn't seem to consider the blockedOut areas.

Well, in the actual tests we did for it, the resulting images will no have such areas deleted, or filled, or anything. They'll remain as the original screenshot, but they're just ignored during image comparison.

Did you ran a quick test to confirm that?

[Gjodim]

Yes. Here is an image of the results

And here is from the folder structure of the failing images - base and actual + blockOut.json

[pateketrueke]

Open the diff of the images that did no pass, the actual blocked-out areas should remain, without the red indicator.

[Gjodim]

base

actual

blockOut.json [{"left":0,"right":1200,"top":160,"bottom":729,"width":1200,"height":569}]

[pateketrueke]

I mean, when you get the dashboard, click on the "Open diff" action, to see the actual difference.

[Gjodim]

Sorry i am not sure i understand. Perhaps this:

[pateketrueke]

Yeah, that screen! And sadly is not working... I've been testing the blockOut feature (blink-diff provides it) but without luck, I think we should start consider alternatives for the visual diffing library. 🤔

[pateketrueke]

Update: I replaced blink-diff with native-image-diffand node-libpng — It seems to be working great, but I am reworking the UI a bit due changes on the generated images.

Said that, I think testcafe-blink-diff is not longer an accurate name... we should rename the module to a be more neutral? 💭

[Gjodim]

Hello @pateketrueke . Should i install some other package if this is fixed, or?

[pateketrueke]

Justa upgrade, from the user side nothing else is needed.