如何在不同的浏览器上查看元素
如然后用火狐和Chrome开发者工具查看元素
鼠标右键查看元素，点左上角的小箭头，定位到你想查看的地方，选中之后该位置以及相应的代码会高亮。或者直接在你想查看的位置右键查看元素。在开发者工具中，按ctrl+f可以搜索你想查看的元素
获取默认xpath或CSS技巧
以Chrome为例。右键点击你想查看的元素，点击检查。此时相应代码会高亮。右键该代码。选择copy.选中二级菜单里的copy selector,或copy xpath.即可复制。
接下来我们验证一下我们复制的xpath.
在开发者工具里，ctrl+f,在出现的输入框里，将我们刚刚复制的xpath粘贴到输入框，回车，我们便看到对应代码高亮，证明，复制的xpath无误。
CSS选择器定位
用CSS Selector-IDs定位元素
- a[id=’js-sigin-btn’]
- #js=signini-btn
- a#js-signin-btn
.代表选中的是class,#代表选中的是id
用多个CSS Classes定位元素
css类选择器查找元素 - .icon-shopping-cart
span.icon-shoping-cart
span[class=’icon-shopping-cart’]
CSS多个类选择器查找元素
.class1.class2.class3….
用CSS通配符定位元素
“^”——>代表以什么文本开始
如：div[class^=’search’]
“$”——>代表以什么文本结尾
“*”——->代表包含什么文本
用CSS定位子节点- li>#js-sign-btn div>.search-input —–>1个匹配的节点
- div>h1 div>label ——–>1个匹配的节点
- ul>li>a.shop-cart-cart-icon
XPath定位
XPath中绝对路径相对路径的区别
- “/”:元素是上一级节点的子节点中的一个，不能跳级
“//”：下级任务子节点或者任何嵌套子节点中的一个，可以跳级
路径里面不要用”*”,要写明标签
用Text构建有效的XPath
//a[text()=’忘记密码’]用Contains关键字构建有效的Xpath
//a[contains(@class,’login’)]
用StartWith关键字构建有效的Xpath
//a[start-with(@placeholder,’请输入登陆’)]
如何让查找到父节点和平级节点寻找父节点 parent::
上一平级节点preceding-sibiling::
下一平级节点 following-sibiling::
