【Selenium】 八种元素定位方法

一、By.Id()

在HTML中,ID属性--唯一标识一个元素的属性。selenium中,ID被作为首选的识别属性,因为这是最快的识别策略。

以百度主页为例,搜索框的HTML示例代码如下,其ID为“kw”;



二、By.Name()

在HTML中,name属性和ID属性功能基本相同,只是name属性不一定是唯一的。在selenium中,如果没有ID的话,首先考虑的就是name属性。

以豆瓣网的主页搜索框为例子,其搜索框的HTML代码如下,其name为“q”:



三、By.tagName()

  通过TagName来查找元素的方式与之前的通过ID或者Name查找元素的方式略有不同。其原因是同一个页面上具有相同的TagName的元素就会返回多个结果,因此建议在使用TagName为查找元素的条件时,使用findElements()来替代findElement()函数。

以126为例,TagName为input的HTML事例代码如下:



四、By.className()

className属性是利用元素的css样式表所引用的伪类名称来进行元素查找的方法。

以淘宝主页搜索框为例,className为"search-combobox-input",其HTML如下:


五、By.Xpath()  

         这个方法是非常强大的元素查找方式,使用这种方法几乎可以定位到页面上的任意元素。在正式开始使用XPath进行定位前,我们先了解下什么是XPath。XPath是XML Path的简称,由于HTML文档本身就是一个标准的XML页面,所以我们可以使用XPath的语法来定位页面元素。

        Xpath通过路径来定位控件,分为绝对路径和相对路径。绝对路径以单/号表示,相对路径则以//表示。当xpath的路径以/开头时,表示让Xpath解析引擎从文档的根节点开始解析。当xpath路径以//开头时,则表示让xpath引擎从文档的任意符合的元素节点开始进行解析。而当/出现在xpath路径中时,则表示寻找父节点的直接子节点,当//出现在xpath路径中时,表示寻找父节点下任意符合条件的子节点。弄清这个原则,就可以理解其实xpath的路径可以绝对路径和相对路径混合在一起来进行表示,想怎么玩就怎么玩。

假设我们现在以下图所示HTML代码为例,要引用对应的对象,XPath语法如下:


绝对路径写法(只有一种),写法如下:

引用页面上的form元素(即源码中的第3行):/html/body/form

下面是相对路径的引用写法:

查找页面根元素://

查找页面上所有的input元素://input

查找页面上第一个form元素内的直接子input元素(即只包括form元素的下一级input元素)://form/input

查找页面上第一个form元素内的所有子input元素(只要在form元素内的input都算,不管还嵌套了多少个其他标签,使用相对路径表示,双//号)://form//input

查找页面上第一个form元素://form

查找页面上id为loginForm的form元素://form[@id='loginForm']

查找页面上具有name属性为username的input元素://input[@name='username']

查找页面上id为loginForm的form元素下的第一个input元素://form[@id='loginForm']/input[1]

查找页面具有name属性为contiune并且type属性为button的input元素://input[@name='continue'][@type='button']

查找页面上id为loginForm的form元素下第4个input元素://form[@id='loginForm']/input[4]


下面以百度主页为例,搜索框的HTML示例代码如下,其xpath为//*[@id=''kw]。



六、By.CssSelector()

CssSelector,Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因是CSS locator比XPath locator速度快,特别是在IE下面(IE没有自己的XPath 解析器(Parser))他比xpath更高效更准确更易编写,因为前端开发人员就是用CSS Selector设置页面上每一个元素的样式,无论那个元素的位置有多复杂,他都能定位到,那我们使用CSS Selector肯定也能非常精准的定位到页面Elements。

css定位可以分为四类:id、class、tagName、其他属性、路径。

1 #id方式

两种方式,可以在前面加上tag名称,也可以不加

driver.findElement(By.cssSelector("#id_value"))  相当于使用id语法的driver.findElement(By.id("id_value")) 

driver.findElement(By.cssSelector("tag_name#id_value")) 相当于使用xpath语法的driver.findElement(By.xpath("//tag_name[@id='id_value']")) 

以百度主页为例,搜索框的HTML示例代码如下,

driver.findElement(By.cssSelector("#kw"));

driver.findElement(By.cssSelector("input#su")).click(); 


2 class方式 

两种方式,前面加上tag名称,也可以不加。如果不加tag名称时,点不能省略。

driver.findElement(By.cssSelector(".class_value"))  

driver.findElement(By.cssSelector("tag_name.class_value"))  

有的class_value比较长,而且中间有空格时,不能把空格原样写进去,那样不能识别。这时,空格用点代替,前面要加上tag_name。

如下driver.findElement(By.cssSelector("tag_name.class_value1.calss_value2.class_value3"))  

还是以上面百度得主页为例。

driver.findElement(By.cssSelector(".s_ipt"));

driver.findElement(By.cssSelector("input.bg.s_btn")).click(); 


3 tagName方式

driver.findElement(By.cssSelector("input")

其中tagName是input

4 根据元素属性

1)精准匹配: 

[A]  driver.findElement(By.cssSelector("input[name=username]"));属性名=属性值,id,class,等都可写成这种形式

[B]  driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));多属性

2)模糊匹配:(正则表达式匹配属性)

[A]  ^=           driver.findElement(By.cssSelector(Input[id ^='ctrl']));匹配到id头部 如ctrl_12

[B]  $=           driver.findElement(By.cssSelector(Input[id $='ctrl']));匹配到id尾部 如a_ctrl

[C]  *=            driver.findElement(By.cssSelector(Input[id *= 'ctrl']));匹配到id中间如1_ctrl_12

5 子元素方式


以上代码是百度首页搜索输入框和按钮的html,下面讲解以此为例

  1)子元素   A>B

    WebElement input=  driver.findElement(By.cssSelector("form>span>input"));//搜索输入框

  2)后代元素   A空格B

    WebElement input=  driver.findElement(By.cssSelector("form input"));//搜索输入框

  3)第一个后代元素  :first-child

    WebElement span= driver.findElemet(By.cssSelector("form :first-child"));//冒号前有空格,定位到form下所有级别的第一个子元素

      可定位到三个元素:

    WebElement span= driver.findElemet(By.cssSelector("form input:first-child"));//冒号前无空格,定位到form下所有级别的第一个input元素

      可定位到两个元素:

    WebElement span= driver.findElemet(By.cssSelector("form>span:first-child"));//冒号前无空格,定位到form直接子元素中的第一个span元素

      可定位到一个元素:

  4)最后一个子元素   :last-child  [类同:first-child]

    WebElement userName = driver.findEleme(By.cssSelector("form :last-child"));//冒号前有空格,定位到form下所有级别的第一个子元素

  5)第2个子元素    :nth-child(N)  [类同:first-child]

    WebElement userName = driver.findElemet(By.cssSelector("form#form :nth-child(2)"));//冒号前有空格,定位到form下所有级别的第二个子元素

七、By.linkText()

这个方法比较直接,即通过超文本链接上的文字信息来定位元素,这种方式一般专门用于定位页面上的超文本链接。

以百度主页为例,使用By.linkText("新闻"),搜索框的HTML示例代码如下:



八、By.partialLinkText()

这个方法是上一个方法的扩展。当你不能准确知道超链接上的文本信息或者只想通过一些关键字进行匹配时,可以使用这个方法来通过部分链接文字进行匹配。代码如下:

WebElement a=  driver.findElement(By.partialLinkText("新"));        

a.click();

你可能感兴趣的:(【Selenium】 八种元素定位方法)