TestCafe 屏幕截图:Android 的浏览器提供商。 crop.js "Unable to locate the page area in the browser window screenshot"

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

我致力于 testcafe-provider-android 的扩展。我希望它支持 Firefox 和截图。

屏幕截图是使用 Android 调试工具截取的。它适用于 Chrome,但不适用于 Firefox。

crop.js#calculateMarkPosition()找不到标记。

我想我理解了标记的工作原理。

utils.js#generateScreenshotMark()中生成了一个由32个0或1组成的字符串,这就是"id"。 “1”变成白点,“0”变成黑点。 "markSeed" 是转换为字节数组的 id。 "markData" 是 base64 编码的图像,准备在 URL.

中使用

在客户端,screenshot-mark.js将这张图片放在页面的右下角。

crop.js#calculateMarkPosition()逐行扫描屏幕截图,以便找到标记并正确裁剪图像。

以下是 Chrome 和 Firefox 的 ID 和屏幕截图:

注意:我操纵代码始终生成相同的 ID。屏幕截图被裁剪和放大。

编号:

00101111000011000011000011110100

Chrome:

火狐:

在我眼里,他们看起来是一样的。那么为什么这不起作用?

如果您可以使用第三方工具裁剪屏幕截图,您需要将built-in screenshot mark generation by setting the hasChromelessScreenshots属性禁用为false。

我建议您打开 a new issue on the TestCafe repository 并提供所有屏幕截图来源。

我找到了这种行为的原因。

在 Chrome 中,黑点的 rgba 值是 rgba(0, 0, 0, 1),而在 Firefox 中,它们是 rgba (1, 1, 1, 1);

这就是找不到索引的原因 - 值与预期不符。

现在我需要查明这是否是 Firefox 中的错误。

更新:

发生这种情况是因为 Firefox 进行了颜色调整。 TestCafe Bug #2918 and was resolved with TestCafe Pull Request #3732

中描述了该问题

我们现在只需要等待下一个版本。