如何使用WebDriver验证图像是否显示在表格中 [英] How to validate if the image is display in the table using webdriver

问题描述

我的问题是找到图像图标在td中是否存在的最佳方法是什么? src ="../App_Themes/Default/images/phone.gif"/

my question is what is the best way to find if the image icon exists or not in td? src="../App_Themes/Default/images/phone.gif"/

这是我的html源代码

here is my html source code

  <div id="ctl00_ContentPlaceHolder1_AddControl1_pnlList">

<table id="ctl00_ContentPlaceHolder1_AddControl1_gv">

    <tr class="item">
        <td align="center"><a href="javascript:__doPostBack('ctl00$Content$AddControl1$gv','Select$2')">Edit</a></td>
        <td align="center" style="width: 15px;">
            <img id="ctl00_ContentPlaceHolder1_AddControl1_gv_ctl05_imgMobile" 
                           src="../App_Themes/Default/images/mobile.gif" 
                           src="" align="middle" style="border-width: 0px;" />
        </td>
        <td>Know For Sure</td>
        <td>&nbsp;</td>
        <td>Abacd</td>
        <td>Teachers</td>
        <td>
            <img src="../App_Themes/Default/images/check.png" alt='Active' style='display: ;' />
        </td>
        <td>3/2/2011 9:48:00 AM</td>
    </tr>

    <tr class="item">
        <td align="center"><a href="javascript:__doPostBack('ctl00$Content$AddControl1$gv','Select$2')">Edit</a></td>

        <td>Know For Sure 1</td>
        <td>&nbsp;</td>
        <td>Abacd1</td>
        <td>Teachers</td>
        <td>
            <img src="../App_Themes/Default/images/check.png" alt='Active' style='display: ;' />
        </td>
        <td>3/2/2011 9:48:00 AM</td>
    </tr>

   <tr class="item">
        <td align="center"><a href="javascript:__doPostBack('ctl00$Content$AddControl1$gv','Select$2')">Edit</a></td>
        <td align="center" style="width: 15px;">
            <img id="ctl00_ContentPlaceHolder1_AddControl1_gv_ctl05_imgMobile" 
                           src="../App_Themes/Default/images/mobile.gif" 
                           src="" align="middle" style="border-width: 0px;" />
        </td>
        <td>Know For Sure2</td>
        <td>&nbsp;</td>
        <td>Abacd2</td>
        <td>Teachers</td>
        <td>
            <img src="../App_Themes/Default/images/check.png" alt='Active' style='display: ;' />
        </td>
        <td>3/2/2011 9:48:00 AM</td>
    </tr>
</table>
</div>

推荐答案

您要做的是获取img标签的WebElement:

What you'll want to do is get the WebElement of the img tag:

WebElement image = driver.findElement(By.xpath("//img[@src='../App_Themes/Default/images/phone.gif']"));

然后运行JavaScript以检查图像是否已完全加载，其自然宽度！=未定义，并且大于0像素:

Then run JavaScript to check that the image has completely loaded, its natural width != undefined and it is larger than 0 px:

Boolean imageLoaded = (Boolean) ((JavascriptExecutor)driver)
    .executeScript
    (
        "return arguments[0].complete && type of arguments[0].naturalWidth != \"undefined\" && arguments[0].naturalWidth > 0", image
    )

仅当所有3个参数都返回true时，

Boolean imageLoaded才等于true.

Boolean imageLoaded will equal true only if all 3 arguments return true.

如果您需要检查以上内容以查找是否加载了图像，则可以通过添加更多arguments[0].'dom element'来对标记DOM树中的任何元素进行检查.

If you need to check more than this to find if your image is loaded you can run checks on any element in the DOM tree of your tag by adding more arguments[0].'dom element'.

祝你好运！

编辑

因此，要查找标记中可能存在或不存在的图像，可以执行以下操作

So to find your images that may or may not exist in tags you can do the following

ArrayList<WebElement> imgElements = driver.findElements(By.xpath("//*[contains(@src, '.gif')]");

，或者如果您只想查找标记中的图像，请用td

or if you only want to find the images in tags replace the * in the xpath with td

还有另外一件事，您可以尝试查找所有图像(当我远离普通计算机时，不确定selenium内置的xpath库是否支持此功能)，但是您可以传递多个xpath来获取所有图像:

1 other thing you could try to find all your images (not sure if selenium's built in xpath libraries support this as I'm away from my normal computer) but you could pass multiple xpaths to get all your images:

ArrayList<WebElement> imgElements = driver.findElements(By.xpath("//*[contains(@src, '.gif')] | //*[contains(@src, '.png')]");

然后，您将遍历元素的数组列表:

Then you would just loop through your arraylist of elements:

for (WebElement element : imgElements)
{
     Boolean imageLoaded = (Boolean) ((JavascriptExecutor)driver)
        .executeScript
        (
            "return arguments[0].complete && type of arguments[0].naturalWidth != \"undefined\" && arguments[0].naturalWidth > 0", element
        )   

     if (!imageLoaded)
     {
         System.out.println("Found broken image: "element.getAttribute("src"))
     }
}    

当然，您可以处理尚未加载的图像.

Of course you can handle the image not loaded however you want to.

这篇关于如何使用WebDriver验证图像是否显示在表格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！