相对定位语法：css+xpath基础语法使用-定位页面元素

✨✨✨学习的道路很枯燥，希望我们能并肩走下来！

编程真是一件很奇妙的东西。你只是浅尝辄止，那么只会觉得枯燥乏味，像对待任务似的应付它。但你如果深入探索，就会发现其中的奇妙，了解许多所不知道的原理。知识的力量让你沉醉，甘愿深陷其中并发现宝藏。

本篇介绍常用的css,xpath相对定位的语法，如有错误，请在评论区指正，让我们一起交流，共同进步！

本文开始

CSS相对定位

• $(“css表达式”)
• 对于css和xpath都可以直接打开页面检查，复制元素位置，但是是绝对定位；

获取元素

• 标签名 $(‘input’)
• .类属性值 $(‘.s_ipt’)
• #id属性值 $(‘#kw’)
• [属性名=‘属性值’] 如：$(‘[name=“zs”]’)

关系定位

• 父子关系是大于号，后代关系是空格

• 父子：元素 > 元素
  $(‘#s_kw>input’)
• 后代：元素 元素
  $(‘#form input’)

顺序关系

• :nth-child(n) 应用于父下面有多个相同的子【n取值从1开始】
  父子关系+顺序：$(‘#form>input:nth-child(2)’)

• :nth-of-type(n) 应用于一个父下面有多个不同的类型的子，n你要的第几个数，可以自定义填写
  父子关系+标签类型+顺序：$(‘#form>input:nth-of-type(1)’)

XPath相对定位

基础语法

• $x(“xpath表达式”)

• 整个页面,该节点子元素找
  $x(“/”)
• 页面中的所有的子元素，该节点子孙元素找 如：html节点是页面子节点
  $x(“/*”)
• 星号是通配符，整个页面中的所有元素
  $x(“//*”)
• 查找页面上面所有的div标签节点
  $x(“//div”)
• 查找id属性为logo的节点；@符-选取元素
  $x(‘//*[@id=“logo”]’)
• 查找节点的父节点； 两个点找当前节点的父节点
  $x('//*[@id=“logo”]/. . ')

顺序关系-通过索引获取元素

• 获取id='ele1’节点下的所有的li元素
  $x(“//*[@id=‘ele1’]//li”)
  寻找tbody下的所有tr元素： $x(“//tbody//tr”)
• 获取id='ele2’节点下【所有的节点的】第一个li元素
  $x(“//*[@id=‘ele2’]//li[1]”)
  寻找thead下所有li元素的第一个li: $x(“//thead//li[1]”)

选取元素

【注】所有的表达式需要和[]结合

• `[last()]: 选取最后一个
• [@属性名=‘属性值’ and @属性名=‘属性值’]: 与关系
  选取属性name的值为password或属性pwd的值为123的input标签
  //input[@name=‘password’ or @pwd=‘123’]
• [@属性名=‘属性值’ or @属性名=‘属性值’]: 或关系
  选取所有文本信息为’测试’的元素
  //*[text()=‘测试’]
• [text()=‘文本信息’]: 根据文本信息定位 , 使用方法定位不需要@符号了
• [contains(text(),‘文本信息’)]: 根据文本信息包含定位
  选取所有文本信息包’测试’的元素
  //*[contains(text(),‘测试’)]
  contains(第一个参数，第二个参数)
  第一个参数传入匹配方式(文本， @id @namé，text())
  第二个参数传入模糊匹配的内容 测试

总结

✨✨✨各位读友，本篇分享到内容是否更好的让你理解了 （），如果对你有帮助给个👍赞鼓励一下吧！！
🎉🎉🎉世上没有绝望的处境，只有对处境绝望的人。
🎉🎉🎉一遇挫折就灰心丧气的人，永远是个失败者。而一向努力奋斗，坚韧不拔的人会走向成功。
感谢每一位一起走到这的伙伴，我们可以一起交流进步！！！一起加油吧！！！