借助playwright进行UI自动化，元素定位方法常用写法总结

*CSS选择器定位方法

playwright通过locator方法结合CSS表达式定位元素的位置
示例代码：

from playwright.sync_api import sync_playwright

p = sync_playwright().start()
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://www.byhy.net/_files/stock1.html")

# 输入通讯，点击查询
page.locator('#kw').fill('通讯')
page.locator('#go').click() 

page.locator(‘#kw’)该语句就是定位id=kw的元素。
CSS定位方法选择：依据tag，id，class
依据id定位的写法：

page.locator('#kw')

依据class定位的写法：

page.locator('.name')

如果要定位的元素包含多个class属性，定位方法可以写为：

page.locator('.name.student')

注意千万不可以这样写page.locator(‘.name student’)

如果一个 locator表达式匹配多个元素，要获取所有的元素对应的 locator 对象，使用 all方法

locators = page.locator('.plant').all()

有时，我们只需要得到某种表达式对应的元素数量 ，可以使用 count方法，如下

count = page.locator('.plant').count()

有时，我们只需要得到某种表达式对应的第一个，或者最后一个元素。

可以使用 first 和 last 属性 ， 如下

lct = page.locator('.plant')
print(lct.first.inner_text(), lct.last.inner_text())

也可以，通过 nth 方法，获取指定次序的元素，参数0表达第一个， 1 表示第2个，

比如

lct = page.locator('.plant')
print(lct.nth(1).inner_text())

依据标签名称进行元素定位：
获取 所有的tag名为div的元素的内部可见文本，也可以直接调用 all_inner_texts

texts = page.locator('div').all_inner_texts()

通过CSS选择子元素或者后代元素

选择直接子元素：
元素2是元素1的直接子元素：
元素1>元素2
也支持更多层级的选择：
元素1 > 元素2 > 元素3 > 元素4
上面这个多级选择的意思就是：
就是选择 元素1 里面的子元素 元素2 里面的子元素 元素3 里面的子元素 元素4 ， 最终选择的元素是 元素4
选择一个元素的后代元素：
元素2是元素1的后代元素，写法是
元素1 元素2//在元素2和元素1之间加一个或者多个空格
通过CSS的样式中的属性选择：
例如一个css样式的代码：

<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>

css选择器支持通过任何属性来选择元素，语法是一个[]
比如要选中上面的a元素：

element=page.locator('[href="http://www.miitbeian.gov.cn"]')

前面可以加上标签名的限制，比如 a[href="http://www.miitbeian.gov.cn"] 表示 选择所有 标签名为 a ，且 属性 href值为 http://www.miitbeian.gov.cn 的元素。

*属性值用单引号，双引号都可以。*

根据属性选择，还可以不指定属性值，比如 [href] ， 表示选择 所有 具有 属性名 为href 的元素，不管它们的值是什么。

CSS 还可以选择 属性值 包含 某个字符串 的元素

比如， 要选择a节点，里面的href属性包含了 miitbeian 字符串，就可以这样写

a[href*="miitbeian"]

还可以 选择 属性值 以某个字符串 开头 的元素

比如， 要选择a节点，里面的href属性以 http 开头 ，就可以这样写

a[href^="http"]

还可以 选择 属性值 以某个字符串 结尾 的元素

比如， 要选择a节点，里面的href属性以 gov.cn 结尾 ，就可以这样写

a[href$="gov.cn"]

如果一个元素具有多个属性

<div class="misc" ctype="gun">沙漠之鹰</div>

CSS 选择器 可以指定 选择的元素要 同时具有多个属性的限制，像这样 div[class=misc][ctype=gun]//[class=misc][ctype=gun]`两者间不要有空格

父子节点选择

父元素的正数第几个子节点：
采用nth-child方法
span:nth-child(2)意思是选取节点为span类型，且是第二个子元素
nth-child(2)是指的选择所有位置为第二个的元素，不管是什么类型
父元素的倒数第几个子节点：
span:nth-last-child(2)意思是选取节点为span类型，且是倒数第二个子元素
父元素的第几个某类型的子节点：
选择的是 第1个span类型 的子元素：span:nth-of-type(1)
父元素的倒数第几个某类型的子节点：nth-last-of-type
选择父元素的 倒数第几个某类型 的子节点:p:nth-last-of-type(2)
如果要选择的是父元素的 偶数节点，使用 nth-child(even)

比如

p:nth-child(even)
如果要选择的是父元素的 奇数节点，使用 nth-child(odd)

p:nth-child(odd)

**如果要选择的是父元素的 某类型偶数节点，**使用 nth-of-type(even)

**如果要选择的是父元素的 某类型奇数节点，**使用 nth-of-type(odd)
相邻兄弟节点选择：
选择 h3 后面紧跟着的兄弟节点 span。

这就是一种 相邻兄弟 关系，可以这样写 h3 + span

表示元素 紧跟关系的 是 加号

后续所有兄弟节点选择
如果要选择是 选择 h3 后面所有的兄弟节点 span，可以这样写 h3 ~ span

xpath定位方法：

组选择：css 组选择，表达式之间用 逗号 隔开，xpath也有组选择， 是用 竖线 隔开多个表达式。
比如，要选所有的option元素 和所有的 h4 元素，可以使用

//option | //h4

运用xpath定位，选中某类型倒数第几个子元素，
选取p类型倒数第1个子元素

//p[last()]
选取p类型倒数第2个子元素

//p[last()-1]
选择父元素为div中p类型倒数第3个子元素

//div/p[last()-2]
选择父节点：某个元素的父节点用 /… 表示
//p/…该语句表示选取p类型的父节点
选择兄弟节点：运用following-sibling::
选择id为password的元素的所有兄弟节点：//[@id=‘password’]/following-sibling::

更详细的内容介绍，代码示例，参考下面链接地址，感谢这个作者的分享，能够帮助去我系统了解UI自动化中的定位方法
playwright 教程