如何用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 
     } 
    } 

} 

}

请随时如有询问查询。