TestCafe屏幕截图：Android的浏览器提供程序。 crop.js“无法在浏览器窗口屏幕快照中找到页面区域”

Question

我正在研究testcafe-provider-android的扩展名。我希望它支持Firefox和屏幕截图。

屏幕截图是使用Android调试工具拍摄的。它可以在Chrome上正常运行，但不能在Firefox上运行。

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

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

在utils.js#generateScreenshotMark()中，将生成一个32个零或一的字符串，这是“ id”。 “ 1”变成白点，“ 0”变成黑点。 “ markSeed”是转换为字节数组的id。 “ markData”是base64编码的图像，可以在URL中使用。

在客户端上，screenshot-mark.js将该图像放置在页面的右下角。

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

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

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

ID：

00101111000011000011000011110100

Chrome浏览器：

Firefox：

在我眼里，它们看起来一样。那么为什么这不起作用？

Answer 1

如果您可以使用第三方工具裁剪屏幕截图，则需要通过将built-in screenshot mark generation属性设置为false来禁用hasChromelessScreenshots。

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

Answer 2

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

在Chrome中，黑点的rgba值为rgba（0，0，0，1），而在Firefox中，黑点为rgba（1、1、1、1、1）；

这就是为什么找不到索引-值不符合预期的原因。

现在，我需要找出这是否是Firefox中的错误。

更新：

发生这种情况是因为Firefox进行了颜色调整。 该问题已在TestCafe Bug #2918中进行了描述，并已通过TestCafe Pull Request #3732

解决。

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