How to validate if the image is display in the tab

2020-07-30 03:19发布

问题:

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"/

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>

回答1:

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']"));

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
    )

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

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'.

Good luck!

EDIT

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')]");

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

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.