Selenium中CSS選擇器與Xpath根據頁面結構定位元素比較
阿新 • • 發佈：2018-12-26
CSS選擇器和Xpath都能通過頁面結構對位元素，以下為採用兩種方式定位相同元素的例子：
<body> <div id='index'> <div></div> <div> <a>abc</a> <div> <ul> <div> <li>abc</li> <li><a href='www.baidu.com'>www.baidu.com</a></li> </div> </ul> </div> </div> </div> </div> </div> </body>
XPATH地址:id('index')/div[2]/div/ul/div/li[2]/a
CSS選擇器地址:#index div:nth-of-type(2) div ul li:nth-of-type(2) a
Selenium中測試程式碼
@Test public void f() { WebDriver driver; driver = new FirefoxDriver(); driver.get("http://localhost:8080/xpath/bcd.html"); WebElement ele1 = driver.findElement(By.xpath("id('index')/div[2]/div/ul/div/li[2]/a")); String a = ele1.getText(); WebElement ele2 = driver.findElement(By.cssSelector("#index div:nth-child(2) div ul li:nth-child(2) a")); Assert.assertEquals(ele2.getText(), a); }
CSS選擇器和Xpath有著類似的結構，在某些方面兩者是可以互相替換使用的。對於某些場景，可以從其中一種推測出另一種的寫法。例如我們利用外掛獲取CSDN首頁學院標籤的xpath路徑為：Xpath：/html/body/div[5]/div/div[1]/ul/li[4]/a，我們可以推導其css選擇器路徑並新增樣式，其效果如下：
html body div:nth-of-type(7) div div:nth-of-type(1) ul li:nth-of-type(4) a{
Color:red;
Border:solid;
}
Xpath和CSS選擇器都能完成定位的功能，相比較而言，由於Selenium
public class NewTest {
WebDriver driver;
WebDriver driver2;
long ctime;
long xtime;
@BeforeTest
public void setup() {
ctime = 0;
xtime = 0;
System.setProperty("webdriver.chrome.driver", "D:\\chromed\\chromedriver.exe");
driver = new ChromeDriver();
driver.get("http://www.csdn.net/");
driver2 = new ChromeDriver();
driver2.get("http://www.csdn.net/");
}
@Test(invocationCount = 500)
public void f() {
long start = System.currentTimeMillis();
WebElement ele = driver2
.findElement(By.cssSelector("html body div:nth-of-type(5) div div ul li:nth-of-type(4) a"));
Locatable lb;
ctime += System.currentTimeMillis() - start;
}
@Test(invocationCount = 500)
public void f2() {
long start = System.currentTimeMillis();
WebElement ele = driver.findElement(By.xpath("/html/body/div[5]/div/div[1]/ul/li[4]/a"));
xtime += System.currentTimeMillis() - start;
}
@Test(dependsOnMethods = { "f2", "f" })
public void time() {
System.out.println("x" + xtime);
System.out.println("c" + ctime);
Assert.assertTrue(xtime > ctime);
}
}兩者在某些方面是很相似的。Css對於根據子元素查詢元素是不支援的，所以對於子元素不變，採用Xpath是能遮蔽掉其他頁面元素改變。對於其他的定位兩者是類似的，定位越是精確，對於頁面改變的適應性就越差，採用模糊定位能夠較好的遮蔽結構改變，但是會影響總體效能。