如何验证在 Firefox 中正确加载的 SVG img（在 webdriver 测试中）

Question

我对登录页面进行了基于量角器的简短测试。我想测试 'banner' 图像是否至少合理正确（例如，它不是损坏的 link）。在类似的问题 (How to validate if the image is display in the table using webdriver) 之后，我检查了 img 元素的 naturalWidth 属性。

虽然这种方法似乎对 PNG 图像有效（如果加载图像时出错，naturalWidth 为 0，但通常不为零），并且在 Chrome 中工作正常SVG 图像，在 Firefox 中，img 元素的 naturalWidth 属性对于我的任何 .svg 图像始终为零。是否有其他方法以编程方式确定图像是否已加载 correctly/completely?

这是 HTML 的样子：

<img src="/static/img/logo.svg" style="width:300px">

下面是 Firefox 中的 JavaScript 控制台对 img 的描述：

a[0].src
"http://localhost:1080/static/img/logo.svg"
a[0].naturalWidth
0
a[0].width
300

遗憾的是，如果我通过将 HTML 更改为：

来破坏 link

<img src="/static/img/INVALID.svg" style="width:300px">

我在 JavaScript 控制台得到了完全相同的结果。

Answer 1

我们的 Webdriver 代码在 Java 中，我们设置了一个单独的实用程序 class（使用 HttpURLConnection) to get us the status codes from the http request. I wonder if you could do something similar in .js using something like the approach shown in the answer to this question

Answer 2

等待 onload 或 onerror 事件触发。如果 onload 触发然后图像被加载并且你可以运行你的测试，如果 onerror 触发它加载失败。

这是一个错误示例。

<img src="http://localhost/serverGone.gif" onerror="alert('serverGone')">

以alert的使用为例，大家可以随意添加，也可以使用setAttribute or addEventListener

动态添加

如何验证在 Firefox 中正确加载的 SVG img（在 webdriver 测试中）

How to verify an SVG img loaded properly in Firefox (in a webdriver test)

javascript

firefox

svg

webdriver