当前位置:   article > 正文

CSS元素定位

css定位元素绝对路径

使用 CSS 选择器定位元素

CSS可以通过元素的id、class、标签(input)这三个常规属性直接定位到,而这三种编写方式,在HTML中编写style的时候,可以进行标识如:

   #su           .class          input

、使用绝对路径来定位元素

在使用绝对路径的时候,每个元素之间要有一个空格。WebElement userName=driver.findElement(By.cssSelector("html body div div form input"));

以父子关系的方式”>”来描述 WebElement userName = driver.findElement(By.cssSelector("html >
body > div > div > form > input"));

这个寻找方法会有局限,他决定于页面的整体结构。如果有些许改变,选择器将找不到这个元素。

、使用相对路径来定位元素

使用相对路径的时候我们可以直接定位元素。不用考虑他在 DOM 中的位置。

假设定位 DOM 中第一个<input>元素:
WebElement userName = driver.findElement(By.cssSelector("input"));

三、使用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"));

四、使用相对 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"));

同级定位“+”: 通过先定位父类(self),再定位self 同级的类.

 

后代定位 “ ”:通过先定位父类(self),再定位self 后代的类

五、使用属性来定位元素

除了 class 和 id 属性,CSS 选择器也可以使用其他的元素属性来定位。例如使用<input>中的 Name 属性。

WebElement userName =driver.findElement(By.cssSelector("input[name=username]"));

alt 属性来定位<img>元素。

WebElement previousButton =driver.findElement(By.cssSelector("img[alt='Previous']"));

你可能会遇到一个属性不足以来定位到一个元素的情况,你需要联合使用其他的属性来达到精确匹配。下面的例子中,使用多个属性来定位<input>元素。

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

六、使用属性名称选择器来定位元素

通过指定元素中属性的名称而不是属性的值来定位元素。如我们想要查找所有<img>标签中,含有 alt 属性的元素

List<WebElement> imagesWithAlt =driver.findElements(By.cssSelector("img[alt]"));

想要定位那些<img>标签中不含有alt 属性,方法如下:List<WebElement> imagesWithoutAlt =driver.findElements(By.cssSelector("img:not([alt])"));

七、部分属性值的匹配

语法

例子

描述

^=

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,从而定位到元素

 

定位注意:html/body/div[2] 找到的是第二个div,从1开始。

//form[1]/div/input[1]   //的意思是无论中间有多少元素,只要是满足后面的条件的都是被选择的。

//input[@class='input'] @的意思是选择元素中的属性。该方法的意思是,选择所有input元素中class属性为input的元素,若写出//input[@class]表示选择有属性名class的input标签,若写成//input[@]表示选择所有有属性的input标签。注意:以//开头,默认是xpath定位方式。

 

 

 

 

 

 

转载于:https://www.cnblogs.com/miaojjblog/p/9640816.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/297241
推荐阅读
相关标签
  

闽ICP备14008679号