xpath定位,css定位笔记，以及怎么⽤chrome的console调试
xpath,css
背景介绍：
通过浏览器 F12 快捷键，打开开发者⼯具，查看页⾯元素。以百度为例⼦，⽤⼯具查看的源代码，并⾮百度⾸页的页⾯源代码，⼯具查看所得到页⾯代码与结构。做web⾃动话测试，⼀般都会⽤到Selenium的库。 这个Selenium库，提供了多种定位元素的⽅式，常⽤ 4 种定位⽅式：id、 name、xpath 和 css。 id 和 name这两种⾮常简单且实⽤， xpath 和 css这两种定位⽅式⾜够强⼤，可以满⾜⼏乎所有定位需求。
举例：RobotFramework的Selenium2Library 提供了⾮常丰富的定位器：
Strategy Example Description
xpath 定位
selenium怎么使用1、xpath 的绝对路径：
xpath = /html/body/div[1]/div[4]/div[2]/div/form/span[1]/input
我们可以从最外层开始，html 下⾯的 body 下⾯的 div 下⾯的第 4 个 div 下⾯的....input 标签。通过 ⼀级⼀级的锁定就到了想要的元素。
2、xpath 的相对路径：
绝对路径的⽤法往往是在我们迫不得已的时候才⽤的。⼤多时候⽤相对路径更简便。
2.1、元素本⾝：
Xpath 同样可以利⽤元素⾃⾝的属性：
Xpath = //*[@id=’kw1’]
//表⽰某个层级下，*表⽰某个标签名。@id=kw1 表⽰这个元素有个 id 等于 kw1 。
当然，⼀般也可以指定标签名：标签名是input，id属性
Xpath = //input[@id=’kw1’]
元素本⾝，可以利⽤的属性就不只局限为于 id 和 name ，如：type属性，autocomplete属性
Xpath = //input[@type=’text’]
Xpath = //input[@autocomplete=’off’]
但要保证这些元素可以唯⼀的识别⼀个元素。
2.2、上级：
当我们要的⼀个⼈是个刚出⽣的婴⼉，还没起名⼦也没有⼊户⼝（⾝份证号），但是你会永远跟在
你⽗亲的⾝边，你的⽗亲是有唯⼀的名字和⾝份证号的，这样我们可以先到你⽗亲，⾃然就到你的。
元素的上级属性为：
<form id="form1" class="fm" action="/s" name="f1">
<span class="bg s_ipt_wr">
<input id="kw1" class="s_ipt" type="text" maxlength="100" name="wd" utocomplete="off">
爸爸：
xpath = //span[@class=’bg s_ipt_w’]/input
如果爸爸没有唯⼀的属性，可以爷爷：
xpath = //form[@id=’form1’]/span/input
这样⼀级⼀级上去，直到 html ，那么就是⼀个绝对路径了。
2.3、布尔值写法：
如果⼀个⼈的姓名不是唯⼀的，⾝份证号也不是唯⼀的，但是同时叫张三，并且 ⾝份证号为 123 的 却可以唯⼀的确定⼀个⼈。那么可以这样写：
Xpath = //input[@id=’kw1’ and @name=’wd’] 可以 and ，当然也可以 or : Xpath = //input[@id=’kw1’ or
@name=’wd’]
但 or 的实际意义不太。我们⼀般不需要说，的⼈名字或者叫张三，或者⾝份证号是 123 也可以。
Robot framework 中的写法：
input text xpath = //*[@id=’kw1’]robot framework 学习
input text xpath = //span[@class=’bg s_ipt_w’]/input robot framework 学习
input text xpath = //input[@id=’kw1’ and @name=’wd’]robot framework 学习
css 定位
CSS(Cascading Style Sheets)是⼀种语⾔，它被⽤来描述 HTML 和 XML ⽂档的表现。CSS 使⽤选择器 来为页⾯元素绑定属性。这些选择器可以被 selenium ⽤作另外的定位策略。
CSS 可以⽐较灵活选择控件的任意属性，⼀般情况下定位速度要⽐ XPath 快，但对于初学者来说⽐较 难以学习使⽤，下⾯我们就详细的介绍 CSS 的语法与使⽤。
CSS 选择器的常见语法：
选择器例⼦描述
.class.intro class 选择器，选择 class="intro"的所有元素.点号（.）表⽰通过 class 属性来定位元素。
#id#firstname id 选择器，选择所有 id="firstname"所有元素.井号（#）表⽰通过 id 属性来定位元素。
**选择所有元素
element p元素所有<p>元素
div > input选择⽗元素为<div> 元素的所有<input>  元素
element > element
element + element div + input 选择紧接在 <div>元素之后的所有<p>元素。
[attribute=value] [target=_blank]选择 target="_blank" 的所有元素。
通过 class 属性定位： css=.s_ipt 点号（.）表⽰通过 class 属性来定位元素。
通过 id 属性定位： css=#kw        井号（#）表⽰通过 id 属性来定位元素。
通过标签名定位： css=input      不需要任何符号标识，直接使⽤标签名即可，但重复的概率⾮常⼤，很难唯⼀的标识⼀个元素。
通过⽗⼦关系定位： css=span>input 有⽗亲元素，它的标签名叫 span，查它的所有标签名叫 input 的⼦元素。
通过属性定位： css=input[autocomplete='off'] css=input[maxlength='100'] css=input[type='submit'] 在 CSS 当中也可以使⽤元素的任意属性，只要这些属性可以唯⼀的标识这个元素
组合定位： 我们当然可以把上⾯的定位策略组合起来使⽤，这样就⼤⼤加强了元素的唯⼀性。
-----分界线--------
参考⽂档：
笔记：
切换到console，
验证css，
命令： $$(“”)，双引号内写css表达式，如图：
如图，我们⽤简洁的css定位到了“平⼭的博客”，并且验证了表达式写法的正确性。
现在我们使⽤⼯具获得该元素的表达式，⼯具傻⽠式获得的表达式如下：
body > div.Content-box > div > div.header-bg > div > div.header-top > div.right > a
结果不⾔⽽喻了吧。
验证xpath，
如图，我们⽤简洁的xpath定位到了“平⼭的博客”，并且验证了表达式写法的正确性。
直接使⽤⼯具获得元素的xpath路径是这样的：/html/body/div[2]/div/div[1]/div/div[1]/div[2]/a  由此可知，我们可以直接利⽤chrome⾃带的开发⼯具进⾏xpath、css的验证，简单、⽅便。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。