webdriver - 在页面中查找损坏的图像并用另一个图像替换图像

Question

嗨，我正在使用 selenium webdriver 2.25.0 并面临一些严重的问题，

1. 如何使用 Selenium Webdriver 在页面中查找损坏的图像
2. 如何使用 webdriver 将图像替换为另一个具有相同名称的图像（这也是错误）。

提前感谢您提供有价值的建议。

Answer 1

接受的答案要求您使用代理对每个图像进行额外调用，以确定图像是否损坏。

幸运的是，还有另一种方法可以只使用 javascript（我使用的是 Ruby，但您可以executeScript在 WebDriver 绑定的任何方法中使用相同的代码）：

images = @driver.find_elements(:tag_name => "img")
broken_images = images.reject do |image|
  @driver.execute_script("return arguments[0].complete && typeof arguments[0].naturalWidth != \"undefined\" && arguments[0].naturalWidth > 0", image)
end
# broken_images now has an array of any images on the page with broken links
# and we want to ensure that it doesn't have any items
assert broken_images.empty?

---

对于您的另一个问题，我建议您只截取页面的屏幕截图并让人工手动验证生成的屏幕截图是否具有正确的图像。计算机可以完成自动化工作，但人类确实必须不时检查和验证其结果:)

Answer 2

下一行没有优化，但他们可以找到损坏的图像：

List<WebElement> imagesList = _driver.findElements(By.tagName("img"));
for (WebElement image : imagesList)
{
    HttpResponse response = new DefaultHttpClient().execute(new HttpGet(image.getAttribute("src");));
    if (response.getStatusLine().getStatusCode() != 200)
        // Do whatever you want with broken images
}

关于你的第二个问题，我想我没有正确理解。你能更详细地解释一下吗？

Answer 3

根据其他答案，最终在 angular / protractor / webdriverjs 设置中为我工作的代码是：

it('should find all images', function () {
    var allImgElts = element.all(by.tagName('img'));

    browser.executeAsyncScript(function (callback) {
        var imgs = document.getElementsByTagName('img'),
            loaded = 0;
        for (var i = 0; i < imgs.length; i++) {
            if (imgs[i].naturalWidth > 0) {
                loaded = loaded + 1;
            };
        };
        callback(loaded);
     }).then(function (loadedImagesCount) {
        expect(loadedImagesCount).toBe(allImgElts.count());
    });
});

webdriver 代码计算 img 元素的数量，在浏览器上下文中执行的函数计算成功加载的元素的数量。这些数字应该相同。