元素定位---使用 CSS 选择器定位元素

时间:2022-02-01 14:29:29

1.使用绝对路径来定位元素

CSS 绝对路径指的是在 DOM 结构中具体的位置。下面一个例子,使用绝对路径来定位用户
名输入字段。在使用绝对路径的时候,每个元素之间要有一个空格。

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

你也可以以父子关系癿方式”>”来描述返个选择器
WebElement userName = driver.findElement(By.cssSelector("html >
body > div > div > form > input"));
但是,这个策略会有一些限制,他决定于页面的整体结构。如果有些许改变,选择器将找
不到这个元素。


2.使用相对路径来定位元素

使用相对路径的时候我们可以直接定位元素。不用考虑他在 DOM 中的位置。例如,我们
可以用这样的方法来定位用户输入字段,假设他在 DOM 中是第一个<input>元素:
WebElement userName = driver.findElement(By.cssSelector("input"));


3.使用class属性选择器来定位元素

当我们使用 CSS 选择器来查找元素的时候,我们可以使用 class 属性来定位元素。我们可
以先指定一个 HTML 的标签,然后加一个“.”符号,跟上 class 属性的值,方法如下:
WebElement loginButton = driver.findElement(By.cssSelector("input.login"));
这同样可以找到按钮的<input>标签 class 为 login 的元素。
你还可以简写查询表达示,叧用 .和 class 属性值,省略掉 HTML 的标签。但是,这将会
返回所有 class 为 login 的元素,导致结果并不一定是你所期望的那样。
WebElement loginButton = driver.findElement(By.cssSelector(".login"));
此方法和 className()相似。


4.使用相对 ID 选择器来定位元素

我们也可以使用元素的 ID 来定位。先指定一个 HTML 标签,然后加上一个“#”符号,跟
上 id 的属性值,如下所示:
WebElement userName = driver.findElement(By.cssSelector("input#username"));
将会返回 input 标签中 id 为 username 的元素。
你可以通过样来简化一下表达式,输入“#”符号,跟上 id 的名称即可,省略到 HTML
的标签。但是,这也将会返回所有 id 为 username 的元素,结果未必是你所期望。用的时
候要非常小心。
WebElement userName = driver.findElement(By.cssSelector("#username"));
个方法和 id 选择器策略相似。


5.使用属性来定位元素

除了 class 和 id 属性,CSS 选择器也可以使用其他的元素属性来定位。下面的例子中,
将使用<input>中的 Name 属性。
WebElement userName =driver.findElement(By.cssSelector("input[name=username]"));
使用 name 属性来定位元素和直接用 By 类中的 name()方法来定位相似。
让我们试试使用其他的属性,下面癿例子中,命名 alt 属性来定位<img>元素。
WebElement previousButton =driver.findElement(By.cssSelector("img[alt='Previous']"));
你可能会遇到一个属性不足以来定位到一个元素的情况,你需要联合使用其他的属性来达到
精确匹配。下面的例子中,使用多个属性来定位<input>元素。

WebElement previousButton =driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));


6.使用属性名称选择器来定位元素

个策略和之前癿有些不同,我们叧通过指定元素中属性的名称而不是属性的值来定位元素。
例如,我们想要查找所有<img>标签中,含有 alt 属性的元素。
List<WebElement> imagesWithAlt =driver.findElements(By.cssSelector("img[alt]"));
not()伪类也可以使用来匹配不满足规则的元素。例如,想要定位那些<img>标签中不含有
alt 属性,方法如下:
List<WebElement> imagesWithoutAlt =
driver.findElements(By.cssSelector("img:not([alt])"));


7.部分属性值的匹配


语法
例子
描述
^=
input[id ^= ' ctrl']
以 XXX 开始
例如,如果一个元素的ID是ctrl_12,
就可以定位到此元素,匹配到 id 的头
部 ctrl
$=
input[ $= '_username']
以 XXX 结尾
例如,如果一个元素的 ID 是
a_1_userName,返将会匹配到 id 的
尾部_userName。
*=
input [*= 'username']
包含
例如,如果一个元素的 ID 是 panel_
login_userName_textfield,返
将会匹配到此 id 值的_userName,从
而定位到元素

CSS 选择器是 CSS 匹配 HTML 或 XML 一系元素中的规则中的一个模式和部分。
主流的浏览器都支持对 CSS 的解析,应用到相应的元素上去。Selenium WebDriver 使用
CSS 解析引擎来定位页面上的元素。CSS 选择器提供多样的方法,规则和模式来定位页面
上的元素。