如何驗證圖像是否顯示在表中使用webdriver

Question

我的問題是什麼是最好的方式來查找圖像圖標是否存在或不在td？ SRC = 「../ App_Themes文件/默認/圖片/ phone.gif」/

這裏是我的HTML源代碼

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

Answer 1

，你會想要做的就是讓img標籤的WebElement ：

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

然後運行JavaScript來檢查圖像已經完全加載時，它的自然寬度=未定義，其大於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將等於true只有當所有3個參數返回true。

如果您需要檢查更多信息以查找圖像是否已加載，您可以通過添加更多arguments[0].'dom element'來運行對標記DOM樹中任何元素的檢查。

祝你好運！

編輯

因此，要找到你的圖像可能會或可能不會在標籤存在，你可以做以下

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

，或者如果你只是想找到標記的圖像替換*在xpath與td

1其他事情，你可以嘗試找到你所有的圖像（不知道硒的內置xpath庫支持這一點，因爲我離開我的n ormal計算機），但你可以通過多種的XPath將您的所有圖片：

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

那麼你會通過你們元素的ArrayList循環：

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")) 
    } 
}  

當然你也可以處理圖像不但是裝你想要。