TestCafe Screenshot: Browser Provider for Android. crop.js "Unable to locate the page area in the browser window screenshot"

Question

I work on an extension of the testcafe-provider-android. I want it to support Firefox and screenshots.

Screenshots are taken with the Android Debugging Tools. It works fine with Chrome, but not with Firefox.

crop.js#calculateMarkPosition() can not find the mark.

I think I understood how the mark thing works.

In utils.js#generateScreenshotMark() a string of 32 zeros or ones is generated, this is the "id". “1” becomes a white dot and “0” becomes a black dot. The "markSeed" is the id transformed into a Byte Array. "markData" Is the base64 encoded image, ready to be used in an URL.

On the client, screenshot-mark.js places this image in the bottom right corner of the page.

crop.js#calculateMarkPosition() scans the screenshot line by line in order to find the mark and to crop the image properly.

Here are IDs and Screenshots for Chrome and Firefox:

Note: I manipulated the code to always generate the same ID. The Screenshots are cropped and zoomed in.

ID:

00101111000011000011000011110100

Chrome:

Firefox:

In my eyes, they look the same. So why does this not work?

Answer 1

I found the reason for this behaviour.

In Chrome the black dots have the rgba value rgba(0, 0, 0, 1), while in Firefox they are rgba (1, 1, 1, 1);

This is why the index can not be found - the values are not as expected.

Now I need to find out, if this is a bug in Firefox.

UPDATE:

This happens because Firefox makes color adjustments. The problem is described in TestCafe Bug #2918 and was resolved with TestCafe Pull Request #3732

We now just need to wait for the next release.