problem:
the image in gallery dynamic, article keeps changing. when click on article image gallery open big image , other thumbnails carousel.
first scenario :
i need verify image loaded , gallery fine. other thumbnail images has navigated , verified.`
example:
- i on article page , open article, article page has gallery opened > 5 thumbnails images.
- now need verify image opened , navigate 1 after verify thumbnails well.
2nd scenario :
is times article have image loaded ,were has can have video's or single image. that's meant dynamic.`
so each time image change,need know how handle situation below 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><img src=http://resources.carsguide.com.au/styles/cg_hero_thumbnail/s3/lexus-rx350- 2016-(2).jpg></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 have done far :
- open url.
- click on article page.
- now open / article.
my 4th step verify image (with thumbnails) when article opens. not able 4th step. don't have error now, able till step 3.
hi please 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"); // count number of images in thumb-nails cause // decide number of clicks on 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 thumbnail : " + mythumbnails.size()); system.out.println("size of main image : " + mymainimages.size()); // print urls of thumb-nails for(int i=0;i< mythumbnails.size();i++){ mythumbnails = driver.findelements(by.cssselector(".rstmb.lazyload")); system.out.println("url thumbnail : " + mythumbnails.get(i).getattribute("src")); mymainimages = driver.findelements(by.cssselector(".rsimg.rsmainslideimage")); system.out.println("url main image : " + mymainimages.get(i).getattribute("src")); // implement logic of img verification, logic can many here used if src bigger img // contains img name per thumbnail img name ok img loaded , hence 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 per thumbnail."); // verify next thumb-nail img main img have click // here if because loop run 1 more time img size if(driver.findelements(by.xpath("//*[@class='rsarrow rsarrowright']/div")).size() > 0){ driver.findelement(by.xpath("//*[@class='rsarrow rsarrowright']/div")).click(); } }else{ // apply same logic videos // hope can } } } }
please feel free ask query if any.
