CSS选择器定位元素详解

CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS选择器有如下几种方式定位页面元素：
a、使用绝对路径定位元素（不推荐）
例：

WebElement ele = driver.findElement(By.cssSelector("html body div form input"));

b、使用相对路径定位元素
例：(如果一个页面存在多个input，则下面代码将返回找到的第一个input，如果存在多个相同标签可以使用List，他将返回所有包含该标签的list集合)

WebElement ele = driver.findElement(By.cssSelector("input"));

c、使用相对ID选择器定位元素
例：

WebElement ele = driver.findElement(By.cssSelector("input#idName"));

d、使用属性定位元素
例：

WebElement ele = driver.findElement(By.cssSelector("input[id=idName]"));

e、使用属性名称（注意，只是属性的名称）定位元（注：此功能已无效，具体见下方程序）
例：（下面例子表示找到所有input标签中含有love属性的元素- =！）

WebElement ele = driver.findElement(By.cssSelector("input[love]"));

f、部分属性值的匹配定位元素

^= 例：input[id^='love'] 如果一个元素的id是以love开头的则会被找到（id=love_you）
$= 例：input[id$='love'] 如果一个元素的id是以love结尾的则会被找到（id=you_love）
*= 例：input[id*='love'] 如果一个元素的id包含love则会被找到（id=love_you,id=love_her,id=beilove,id=TMD_love_haha……）

依旧以百度首页为例（百度TM作用就是做测试用）：
程序清单如下：

/*
 * 示例脚本
 * 脚本功能:熟练掌握CSS选择器定位元素的方法
 */
package com.test;
import java.util.List;
 
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.htmlunit.HtmlUnitDriver;
 
public class test {
	public static void main(String args[]) throws Exception {
		WebDriver driver = new HtmlUnitDriver();
		//IE浏览器
		//WebDriver driver = new InternetExplorerDriver();
		driver.get("http://www.baidu.com");
		//找到第一个含input标签
		WebElement ele = driver.findElement(By.cssSelector("input"));
		//找到所有含input标签
		List<WebElement> eles = driver.findElements(By.cssSelector("input"));
		//找到含有id属性值为kw的input标签
		WebElement idele = driver.findElement(By.cssSelector("input#kw"));
		//找到含有value属性值为‘百度一下’的input标签
		WebElement valueele = driver.findElement(By.cssSelector("input[value='百度一下']"));
		//找到含有value属性的input标签
		List<WebElement> loveeles = driver.findElements(By.cssSelector("input[class]"));
 
		System.out.println("By.cssSelector(\"input\")-first\t\t:"+ele);
		System.out.println("By.cssSelector(\"input\")-all\t\t:"+eles);
		System.out.println("By.cssSelector(\"input#kw\")\t\t:"+idele);
		System.out.println("By.cssSelector(\"input[value='百度一下']\")\t:"+valueele);
		System.out.println("By.cssSelector(\"input[id]\")\t\t:"+loveeles);
 
		driver.quit();
	}
}

打印结果如下：

By.cssSelector("input")-first			:input type="text" name="wd" id="kw" maxlength="100" class="s_ipt"
By.cssSelector("input")-all			:[input type="text" name="wd" id="kw" maxlength="100" class="s_ipt", input type="hidden" name="rsv_bp" value="0", input type="hidden" name="rsv_spt" value="3", input type="hidden" name="ie" value="utf-8", input type="submit" value="百度一下" id="su" class="bg s_btn" onmousedown="this.className='bg s_btn s_btn_h'" onmouseout="this.className='bg s_btn'"]
By.cssSelector("input#kw")			:input type="text" name="wd" id="kw" maxlength="100" class="s_ipt"
By.cssSelector("input[value='百度一下']")	:input type="submit" value="百度一下" id="su" class="bg s_btn" onmousedown="this.className='bg s_btn s_btn_h'" onmouseout="this.className='bg s_btn'"
By.cssSelector("input[id]")			:[]

CSS选择器定位元素详解

猜你喜欢