作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
问题:
图库中的图像始终是动态的,但文章不断变化。当我单击文章时,图像库将打开,其中包含大图像和其他带轮播的缩略图。
<小时/>第一个场景:
我需要验证图像是否已加载并且图库正常。此外,还必须导航和验证其他缩略图。`
示例:
第二个场景:
有时本文会加载图像,有时它可以有视频或只有单个图像。这就是我所说的“动态”。`
所以每次图像发生变化时,需要知道如何处理这种情况下面是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><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>
到目前为止我所做的就是:
我的第四步是在文章打开时验证该图像(带有缩略图)。我无法执行第四步。我现在没有任何错误,直到第 3 步我都能成功完成。
最佳答案
您好,请按照下面的方式操作
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
}
}
}
}
如有疑问,请随时询问。
关于java - 如何使用 Java 使用 Selenium WebDriver 验证动态图库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37672578/
小问题,我是 JavaScript 的新手,我无疑会从这个项目中学到很多东西。所以我提出一个问题(这很可能是一个愚蠢的问题),我的问题是: 我计划构建一个 Web 应用程序,它可以从 Raphael
我一直在尝试使用 Plotly 执行可视化,但我的问题是我需要它是动态的。意思是如果我有代码: import plotly.express as px data = [1, 5, 4, 7, 5, 2
请帮助..我想制作一个android应用程序,我从数据库中获取值并需要以图形、饼图、条形图等格式显示它们。最好的方法是什么?我能得到一些此类应用程序的示例代码吗? 最佳答案 这里有一些很棒的建议:ht
我是一名优秀的程序员,十分优秀!