获取截面类中所有图像的图像属性

Question

我正在尝试获取节类中存在的所有图像的属性。我要获取的图像属性是：

1. 图像高度。

2. 图像宽度

3. 图片来源

我正在尝试使用 Selenium Webdriver 来实现。

我是 Selenium 的新手，所以我浏览了网络教程和互联网上提供的各种答案。

我的代码是这样的：

 public void findAllImages(){
driver=new FirefoxDriver();
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);

baseUrl="http://northeastindiaholidays.com/";
driver.get(baseUrl);


WebElement menu=driver.findElement(By.className("destinations clearfix full"));
List<WebElement> allImages=driver.findElements(By.tagName("img"));


List<String> widthofImage = new ArrayList<String>();
List<String> heightofImage = new ArrayList<String>();
List<String> srcofImage = new ArrayList<String>();

for (WebElement imageFromList: allImages){
     widthofImage.add(imageFromList.getAttribute("width"));
       heightofImage.add(imageFromList.getAttribute("height"));
      srcofImage.add(imageFromList.getAttribute("src"));

      System.out.println(widthofImage);
      System.out.println(heightofImage);
      System.out.println(srcofImage);

     }

 }
 }

页面 html 如下所示：

   <section class="destinations clearfix full" style="margin-bottom:10px!important">
   <h1>Beach Destinations</h1>
   <article class="location_item one-fourth fluid-item">
   <figure>
   <a title="" href="http://northeastindiaholidays.com/?location=goa">
   <img width="270" height="152" alt="" src="http://northeastindiaholidays.com/wp-    content/uploads/2014/06/Goa.gif"/>
  </a>
  </figure>
  <div class="details">
  </article>

页面的网址是：North East India Holidays

Answer 1

试试下面的代码：

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;
import com.thoughtworks.selenium.webdriven.commands.GetText;

public class Sample 
{       
WebDriver driver;
@BeforeClass
public void BeforeClass() throws InterruptedException, IOException
{
    System.setProperty("webdriver.firefox.profile", "default");
    driver = new FirefoxDriver();
    driver.manage().window().maximize();
    driver.get("http://northeastindiaholidays.com/");
    Thread.sleep(4000);

}
@Test
public void fetchCustKeys() throws Exception
{
    //WebElement menu1=driver.findElement(By.xpath("//*[@id='content']/section[1]"));
    WebElement menu=driver.findElement(By.xpath("//*[@id='content']/section[./h1[text()='Beach Destinations']]"));
    List<WebElement> allImages=menu.findElements(By.tagName("img"));

    List<String> widthofImage = new ArrayList<String>();
    List<String> heightofImage = new ArrayList<String>();
    List<String> srcofImage = new ArrayList<String>();
    for (WebElement imageFromList: allImages)
    {
        widthofImage.add(imageFromList.getAttribute("width"));
        heightofImage.add(imageFromList.getAttribute("height"));
        srcofImage.add(imageFromList.getAttribute("src"));
    }
    System.out.println(widthofImage);
    System.out.println(heightofImage);
    System.out.println(srcofImage);
}
}

除了该部分的 XPATH 之外，代码中还有两个更正。

1) 通过使用上面提到的 XPATH 的 Section，你可以通过改变 section 的名字来重用 XPATH。 例如：

WebElement menu=driver.findElement(By.xpath("//*[@id='content']/section[./h1[text()='Beach Destinations']]"));
WebElement menu=driver.findElement(By.xpath("//*[@id='content']/section[./h1[text()='Top destinations around North East India']]"));

2) 使用下面的语句可以得到整个网页的图片。

List<WebElement> allImages=driver.findElements(By.tagName("img"));

所以我们需要像下面这样更改语句来获取特定部分的图像：

List<WebElement> allImages=menu.findElements(By.tagName("img"));

3) 将ArrayLists 的打印移出for 循环

输出：

[TestNG] Running:
  C:\Users\HEMA\AppData\Local\Temp\testng-eclipse-717955280\testng-customsuite.xml

[268, 268, 268, 268]
[152, 152, 152, 152]
[http://northeastindiaholidays.com/wp-content/uploads/2014/06/Goa.gif, http://northeastindiaholidays.com/wp-content/uploads/2014/06/Puducherry_beach.jpg, http://northeastindiaholidays.com/wp-content/uploads/2014/06/Kerla.jpg, http://northeastindiaholidays.com/wp-content/uploads/2014/06/Leh.jpg]
PASSED: fetchCustKeys

===============================================
    Default test
    Tests run: 1, Failures: 0, Skips: 0
===============================================


===============================================
Default suite
Total tests run: 1, Failures: 0, Skips: 0
===============================================

[TestNG] Time taken by org.testng.reporters.SuiteHTMLReporter@16754ffd: 469 ms
[TestNG] Time taken by [FailedReporter passed=0 failed=0 skipped=0]: 1 ms
[TestNG] Time taken by org.testng.reporters.jq.Main@21a2fefd: 303 ms
[TestNG] Time taken by org.testng.reporters.JUnitReportReporter@391e680f: 94 ms
[TestNG] Time taken by org.testng.reporters.XMLReporter@7f7f5281: 154 ms
[TestNG] Time taken by org.testng.reporters.EmailableReporter2@60c4d1a7: 11 ms