如何用Selenium WebDriver使用Java驗證動態圖庫？

Question

問題：

圖庫中的圖像始終是動態的，但文章不斷變化。當我點擊這篇文章時，圖像庫以旋轉木馬的大圖像和其他縮略圖打開。

---

第一種方案：

我需要驗證加載圖像和畫廊是好的。另外，其他的縮略圖已經被導航和verified.`

例子：

• 1. 我是一個文章頁面上，我打開文章，所以本文頁面已經藝術館開幕有> 5張縮略圖。
• 現在我需要驗證圖像被打開，並且還導航一前一後相互驗證縮略圖爲好。

---

第二個場景：

是一些次本文將圖像加載，是有時它可以有視頻的，或只是一個單一的形象。所以，這就是我的意思是它作爲Dynamic.`

所以每次圖像變化，需要知道如何處理這種情況 下面是html代碼：

<div class="carousel royalSlider rsDefault rsAutoHeight rsHor rsWithThumbs rsWithThumbsHor" style="min-height: 463.8px;"> 
    <div class="rsOverflow" style="width: 773px; height: 436px; transition: height 600ms ease-in-out;"> 
     <div class="rsContainer" style="transition-duration: 600ms; transform: translate3d(-797px, 0px, 0px); transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);"> 
      <div style="left: 0px;" class="rsSlide"><img class="rsImg rsMainSlideImage" src="http://resources.carsguide.com.au/styles/cg_hero_large/s3/lexus-rx350-2016- (1).jpg"></div> 
      <div style="left: 797px;" class="rsSlide rsActiveSlide"><img class="rsImg rsMainSlideImage" src="http://resources.carsguide.com.au/styles/cg_hero_large/s3/lexus-rx350-2016- (2).jpg"></div> 
      <div style="left: 1594px;" class="rsSlide "><img class="rsImg rsMainSlideImage" src="http://resources.carsguide.com.au/styles/cg_hero_large/s3/lexus-rx350-2016- (3).jpg"></div> 
      <div style="left: 2391px;" class="rsSlide "><img class="rsImg rsMainSlideImage" src="http://resources.carsguide.com.au/styles/cg_hero_large/s3/lexus-rx350-2016- (4).jpg"></div> 
     </div> 
     <div class="rsFullscreenBtn"> 
      <div class="rsFullscreenIcn"></div> 
     </div> 
     <div class="rsArrow rsArrowLeft" style="display: block;"> 
      <div class="rsArrowIcn"></div> 
     </div> 
     <div class="rsArrow rsArrowRight" style="display: block;"> 
      <div class="rsArrowIcn"></div> 
     </div> 
     <div class="rsGCaption">Lexus RX 350 F Sport.<noscript>&lt;img src=http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(2).jpg&gt;</noscript></div> 
    </div> 
    <div class="rsNav rsThumbs rsThumbsHor"> 
     <div class="rsThumbsContainer" style="transition-property: -webkit- transform; transform: translate3d(86.5px, 0px, 0px); width: 612px;"> 
      <div style="margin-right:12px;" class="rsNavItem rsThumb"><img class="rsTmb lazyload" onerror="this.style.visibility='hidden'" data- src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(1).jpg" src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(1).jpg" width="90" height="50" alt=""><span class="thumbIco"></span></div> 
      <div style="margin-right:12px;" class="rsNavItem rsThumb rsNavSelected"><img class="rsTmb lazyload" onerror="this.style.visibility='hidden'" data- src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(2).jpg" src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(2).jpg" width="90" height="50" alt=""><span class="thumbIco"></span></div> 
      <div style="margin-right:12px;" class="rsNavItem rsThumb"><img c lass="rsTmb lazyload" onerror="this.style.visibility='hidden'" data- src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(3).jpg" src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(3).jpg" width="90" height="50" alt=""><span class="thumbIco"></span></div> 
      <div style="margin-right:12px;" class="rsNavItem rsThumb"><img class="rsTmb lazyload" onerror="this.style.visibility='hidden'" data- src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(4).jpg" src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(4).jpg" width="90" height="50" alt=""><span class="thumbIco"></span></div> 
      <div style="margin-right:12px;" class="rsNavItem rsThumb"><img class="rsTmb lazyload" onerror="this.style.visibility='hidden'" data- src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(5).jpg" src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(5).jpg" width="90" height="50" alt=""><span class="thumbIco"></span></div> 
      <div style="margin-right:12px;" class="rsNavItem rsThumb"><img class="rsTmb lazyload" onerror="this.style.visibility='hidden'" data- src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(6).jpg" src="http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(6).jpg" width="90" height="50" alt=""><span class="thumbIco"></span></div> 
     </div> 
     <div class="rsThumbsArrow rsThumbsArrowLeft rsThumbsArrowDisabled"> 
      <div class="rsThumbsArrowIcn"></div> 
     </div> 
     <div class="rsThumbsArrow rsThumbsArrowRight rsThumbsArrowDisabled"> 
      <div class="rsThumbsArrowIcn"></div> 
     </div> 
    </div> 
    <div style="clear:both; float: none;"></div> 
</div> 

所有我這樣做遠是：

• 1. 打開URL。
• 1. 點擊文章頁面。
• 1. 現在打開該文章/任何文章。

我的第四步是驗證圖像（縮略圖）的文章打開時。我無法做到第四步。我現在沒有任何錯誤，我能夠成功完成第3步。

Answer 1

你好，請做如下圖所示

public class WorkingWithThumbNails { 
    public static void main(String[] args) { 
     WebDriver driver = new FirefoxDriver(); 
     driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); 
     driver.get("http://www.carsguide.com.au/car-reviews/toyota-tarago-used-review-1990-2015-41984"); 

    // Now count the number of images in the thumb-nails cause 
    // this will decide number of clicks on the next Arrow 

    List<WebElement> myThumbnails = driver.findElements(By.cssSelector(".rsTmb.lazyload")); 
    List<WebElement> myMainImages = driver.findElements(By.cssSelector(".rsImg.rsMainSlideImage")); 

    System.out.println("Size of the thumbnail is : " + myThumbnails.size()); 
    System.out.println("Size of the main image is : " + myMainImages.size()); 


    // print the urls of the thumb-nails as well 
    for(int i=0;i< myThumbnails.size();i++){ 
     myThumbnails = driver.findElements(By.cssSelector(".rsTmb.lazyload")); 
     System.out.println("Url for the Thumbnail is : " + myThumbnails.get(i).getAttribute("src")); 

     myMainImages = driver.findElements(By.cssSelector(".rsImg.rsMainSlideImage")); 
     System.out.println("Url for the main image is : " + myMainImages.get(i).getAttribute("src")); 

     // now implement the logic of img verification, logic can be many but here i used if src for bigger img 
     // contains img name as per the thumbnail img name then its ok img is properly loaded and hence it is right image. 

     String[] myMainImgName = myMainImages.get(i).getAttribute("src").split("s3"); 

     if(myThumbnails.get(i).getAttribute("src").contains(myMainImgName[1])){ 
      System.out.println("Main image is as per the thumbnail."); 
      // to verify next thumb-nail img with main img we have to click 
      // here if is because loop will run one more time then img size 
      if(driver.findElements(By.xpath("//*[@class='rsArrow rsArrowRight']/div")).size() > 0){ 
       driver.findElement(By.xpath("//*[@class='rsArrow rsArrowRight']/div")).click(); 
      } 
     }else{ 
      // apply the same logic for videos 
      // hope you can do this 
     } 
    } 

} 

}

請隨時如有詢問查詢。