CSS选择器定位元素详解

CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS选择器有如下几种方式定位页面元素:
[b]a、使用绝对路径定位元素(不推荐)[/b]
例:
WebElement ele = driver.findElement(By.cssSelector("html body div form input"));

[b]b、使用相对路径定位元素[/b]
例:(如果一个页面存在多个input,则下面代码将返回找到的第一个input,如果存在多个相同标签可以使用List,他将返回所有包含该标签的list集合)
WebElement ele = driver.findElement(By.cssSelector("input"));

[b]c、使用相对ID选择器定位元素[/b]
例:
WebElement ele = driver.findElement(By.cssSelector("input#idName"));

[b]d、使用属性定位元素[/b]
例:
WebElement ele = driver.findElement(By.cssSelector("input[id=idName]"));

[b]e、使用属性名称(注意,只是属性的名称)定位元(注:此功能已无效,具体见下方程序)[/b]
例:(下面例子表示找到所有input标签中含有love属性的元素- =!)
WebElement ele = driver.findElement(By.cssSelector("input[love]"));

[b]f、部分属性值的匹配定位元素[/b]
^= 例: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]") :[]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值