如何使用Java使用Selenium WebDriver验证动态库？

Question

Problem:

The image in the gallery is always dynamic, but the article keeps changing. When I click on the article the image gallery open with a big image and other thumbnails with a carousel.

---

First Scenario :

I need to verify that the image is loaded and the gallery is fine . Also the other thumbnail images has to be navigated and verified.`

Example:

• 1. I am on a article page and i open that article, so this article page has an Gallery opened with > 5 thumbnails images.
• 2. Now I need to verify that the image is opened and also navigate one after the another to verify the thumbnails as well.

---

2nd Scenario :

Is some times this article will have image loaded ,were has sometimes it can have video's or just a single image. So that's what i meant to be it as Dynamic.`

So each time the image change,need to know how to handle this situation Below is the html code:

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

All I have done so far is :

• 1. Open the URL.
• 2. Click on the Article page.
• 3. Now open that / any article.

My 4th step would be to verify that image (with thumbnails) when the article opens. I am not able to do that 4th step. I don't have any error now, I am able to do it successfully till step 3.

Answer 1

Hi please do it like below

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

}

}

Please feel free to ask query if any.