How to validate if the image is display in the table using webdriver

Question

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>

Falkenfighter · Accepted Answer · 2012-10-11T04:14:21.083

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.

Thanks for the tips but if you look at my HTML source code you will find that not all TR will have image and some will and some not.... — Nick Kahn, Oct 10 '12 at 23:43
So your trying to write something that will automatically find any tags that contain images, then validate them? — Falkenfighter, Oct 11 '12 at 03:49
As I'm re-reading your question it seems I may have been a little off of your initial question. If you would like to know if your image is in a td tag or not you would just want to find all images like in my edit then for each image run element.getTagName() which would return or if it's the parent you want do element.findElement(By.xpath("..")).getTagName() which would return the — Falkenfighter, Oct 11 '12 at 04:19
its my fault i have not given you enough information so do not want to keep changing my question... so i will accept this as an answer and i have created a new question here http://stackoverflow.com/questions/12842182/imagetag-exists-in-the-tr please have a look at it. — Nick Kahn, Oct 11 '12 at 14:41
Can also see this: http://watirmelon.com/2012/11/27/checking-an-image-is-actually-visible-using-webdriver/ — David, Feb 08 '14 at 21:45

How to validate if the image is display in the table using webdriver

1 Answers1

Linked