07_Selenium IDE定位策略 xpath&css

1.通过Xpath定位

XPath属性
如果没有适合要查找的元素的id或name属性，则始终建议使用XPath属性。
XPath属性允许使用不同的属性定位Web元素。

语法：//htmltag[@attribute1=‘value1’ and @attribute2=‘value2’]
示例：//input[@id=‘passwd’ and @placeholder=‘password’]

什么是xpath
xpath 是XML Path的简称，由于HTML文档本身就是一个标准的XML页面，所以我们可以使用Xpath 的用法来定位页面元素。

xpath定位的缺点
xpath 这种定位方式， webdriver会将整个页面的所有元素进行扫描以定位我们所需要的元素，这是个非常费时的操作，如果脚本中大量使用xpath做元素定位的话，脚本的执行速度可能会稍慢

testXpath.html代码如下

<html>
<head><title>Test Xpath</title></head>
<body>
    <div id="div1">
        <input name="div1input"></input>
        <a href="http://www.sogou.com">搜狗搜索</a>
        <img alt="div1-img1" src="http://www.sogou.com/images/logo/new/sogou.png" href="http://www.sogou.com">搜狗图片</img>
        <input type="button" value="查询"></input>
    </div>
    <br />
    <div name="div2">
        <input name="div2iniput" /></input>
        <a href="http://www.baidu.com">百度搜索</a>
        <img alt="div2-img2" src="http://www.baidu.comn/img/bdlogo.png" href="http:/www.baidu.com">百度图片</img>
    </div>
</body>
</html>

绝对路径定位方式
在被测试网页中，查找第一个div标签中的按钮
XPath的表达式

/html/body/div/input[@value="查询"]
WebElement button = driver.findElement(By.xpath("/html/body/div/input[@value='查询']"));

使用浏览器调试工具，可以直接获取xpath语句
在这里插入图片描述
绝对路径的缺点
一旦页面结构发生改变，改路径也随之失效，必须重新。所以不推荐使用绝对路径的写法

绝对路径和相对路径的区别
绝对路径以 “/” 开头，让xpath 从文档的根节点开始解析
相对路径以"//" 开头，让xpath 从文档的任何元素节点开始解析

相对路径定位方式
在被测试网页中，查找第一个div标签中的按钮
XPath的表达式

//input[@value="查询"]
WebElement button = driver.findElement(By.xpath("//input[@value='查询']"));

使用索引号定位
在被测试网页中，查找第二个div标签中的"查询"按钮

//input[2]
WebElement button = driver.findElement(By.xpath("//input[2]"));

使用页面属性定位
定位被测试页面中的第一个图片元素

//img[@alt='div1-img1']
WebElement button = driver.findElement(By.xpath("//img[@alt='div1-img1']"));

模糊定位starts-with关键字
查找图片alt属性开始位置包含’div1’关键字的元素

//img[starts-with(@alt,'div’)]

模糊定位contains关键字
查找图片alt属性包含’g1’关键字的元素

//img[contains(@alt,'g1')]

text()函数文本定位
查找所有文本为"百度搜索" 的元素

driver.findElement(By.xpath("//*[text()='百度搜索']"));

查找所有文本为“搜索” 的超链接

driver.findElement(By.xpath("//a[contains(text(),'搜索')]"));

2.通过CSS定位

1、标签选择器

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

直接传入要定位元素的标签，可直接定位到该元素

2、id选择器，class选择器

driver.findElement(By.cssSelector("#kw"));     //#表示id属性定位器，后面紧跟id属性值
driver.findElement(By.cssSelector(".s_ipt"));   //英文的. 表示class定位器，后面紧跟class属性值

3、后代元素选择器

driver.findElements(By.cssSelector("div#u1 a"));

通过标签选择器+id选择器定位到div元素，后代选择器用空格表示，可以获得div元素后代的所有a标签（备注：多层级都可获得）

4、子元素选择器

driver.findElements(By.cssSelector("div#u1>a"));

通过标签选择器+id选择器定位到div元素，子代选择器用>表示，可以获得div元素子代的所有a标签（备注：仅可获得div下一层级，跨层级获得不到）

5、相邻元素选择器

driver.findElement(By.cssSelector("div#u1>a+a"));

先定位到新闻标签，通过毗邻元素选择器用+表示，可以获得标签紧邻的同级元素标签（只匹配第一个同级元素）

6、属性选择器

driver.findElement(By.cssSelector("input[name='wd']"));

可通过任意元素属性值过滤

DOM 元素定位

定位过程
WebDriver对象的findElement函数定义一个Web页面元素；

findElements方法可以定位页面的多个元素；

使用WebElement对象来存储定位的元素，以便后续操作；

id 定位

driver.findElement(By.id(“id的值”))；

name定位

driver.findElement(By.name(“name的值”))；

xpath 方式定位

driver.findElement(By.xpath(“xpath表达式”))；

Class 名称定位

driver.findElement(By.className(“class属性”))；

css 方式定位

driver.findElement(By.cssSelector(“css表达式”))；

TagName 标签名称定位

driver.findElement(By.tagName(“标签名称”))；

Jquery表达式定位

Js.executeScript(“return jQuery.find(“jquery表达式”)”)

链接的全部文字定位

driver.findElement(By.linkText(“链接的全部文字”))；

链接的部分文字定位

driver.findElement(By.partialLinkText(“链接的部分文字”))；

※ 如果使用 By.tagName，By.c lassName 定位，只会返回第一个匹配元素，但元素class元素内容不止一个，而是类似 <div class="btn-login btn"> 可以使用 By.cssSelector 的方式定位；