python playwright之元素定位示例详解

定位篇

UI 自动化很多时候的苦恼都是定位不到,其实说实话我到现在有时候也是莫名其妙的定位到或者定位不到。好在这个框架定位方式的上限非常以及特别的高，这就像人有钱和没钱的区别主要在于选择权一样，有选择的人生才是幸福的。出门想开法拉利就开法拉利，想开拖拉机就开拖拉机。

定位的详细介绍

1、官方是不推荐 xpath 和 css 的,原话意思是 CSS 和 XPATH 是绑定于 DOM 上的，当 DOM 结构出现更改他们将失效。

2、文本内容，输入框内的 placeholder，labels 等这些我们可以理解成面向业务的属性这些反而不那么容易改变所以定位应该尽量的去面向业务。

文本选择器定位

下文这样是一个基础的文本定位 特点有

1、模糊匹配

2、不缺分英文的大小写

3、如果存在多个会报错

page.locator("text=社区").click()

也可以使用简写的方式，注意其中的单引号

page.locator("'Log in'").click()

比较精准的方式,点击 id=main-nav-menu 包含的元素里文本='社区'的元素，这里使用了 text() 伪类

page.locator("#main-nav-menu :text('社区')").click()

结合 CSS 使用，仅匹配 article 元素

page.locator('article:has-text("All products")').click()

CSS 选择器定位

点击 button 按钮

page.locator("button").click()

通过属性定位，点击属性中存在 href="/topics"的元素

page.locator('[href="/topics" rel="external nofollow"  rel="external nofollow" ]').click()

通过属性精准定位：点击 ID=nav-bar 元素下的 href="/topics"的元素

page.locator('#main-nav-menu [href="/topics" rel="external nofollow"  rel="external nofollow" ]').click()

通过 placeholder 定位以及输入

page.locator('[placeholder="搜索"]').fill('电子校的故事')

布局定位结合 CSS,也是我最喜欢的

page.locator("input:right-of(:text('开源项目'))").fill('电子校的故事')

非常的实用，尤其是在我们经常测的管理系统里边 dialog 里,只要左侧的 label 不变~ 代码就不用改

解释下上边这段代码，大家一边看代码一边把头往显示器的右上偏左侧看下。

定位的的呢是一个 Input,一个在文本为'开源项目'右侧的 input。

同理这里可以使用:right-of、:left-of、:above、:below、:near 这几种布局定位的方式

根据元素可用

点击一个可用的 button

page.locator("button:visible").click()
page.locator("button >> visible=true").click()

继续说说属性

点击一个按钮，它的文本包含了 Click me。另这里也可使用正则表达式

page.locator("button", has_text="Click me").click()

来源：https://testerhome.com/topics/33720