新一代最强开源UI自动化测试神器 Playwright - 元素定位

小咪咪 2023-09-26 11:54 73阅读 0赞

Playwright跟Selenium在使用过程中其实非常相似，Playwright也是通过元素定位来实现各种功能的，我们来看下Playwright有哪些元素定位方式。

文本定位

使用文本定位时，直接使用text=文本，例如定位登录按钮，我们可以使用“登录”关键字定位

page.locator("text=登录").click()

CSS定位

如id=nav-bar .contact-us-item

page.locator("#nav-bar .contact-us-item").click()

元素属性定位

如点击“百度一下”，我们可以使用\[value=‘百度一下’\]定位

page.locator("[value='百度一下']").click()

CSS和文本组合定位

1.:has-text()

has-text() 伪类可以在 css 选择器中使用。它匹配任何包含指定文本的元素，这些文本可能位于子元素中。匹配不区分大小写，并搜索子字符串。例如span:has-text(‘百度一下’)匹配百度一下

page.locator("span:has-text('百度一下')").click()

2.伪类:has()

父元素包含子元素，如点击id为s-top-left的元素下包含的第二个a标签

![图片][7732104a7e1147d18e5f3bba0e2bef32.png]

page.locator("#s-top-left:has(a) > a:nth-child(2)").click()

3.伪类:is()

选择其中任何一个元素，点击【新闻】,如果“新闻”不存在，则点击“News”

page.click(':is(a:has-text("新闻"), a:has-text("News"))')

布局选择器定位

有时，当目标元素缺乏独特的特征时，很难为它想出一个好的选择器。在这种情况下，使用 Playwright 布局选择器可能会有所帮助。这些可以与常规 CSS 结合使用。

例如如下代码匹配文本“用户名”右侧的输入字段 - 当页面有多个难以相互区分的输入时很有用。

page.locator("input:right-of(:text('Username'))").click()

:right-of(inner > selector)- 在任何垂直位置匹配与内部选择器匹配的任何元素右侧的元素。
    :left-of(inner > selector)- 在任何垂直位置匹配与内部选择器匹配的任何元素左侧的元素。
    :above(inner > selector)- 匹配任何水平位置上匹配内部选择器的任何元素之上的元素。
    :below(inner > selector)- 在任何水平位置匹配位于与内部选择器匹配的任何元素下方的元素。
    :near(inner > selector)- 匹配与内部选择器匹配的任何元素附近（在 50 CSS 像素内）的元素。

# 在“Username”右侧输入TesterRoad
    page.locator("input:right-of(:text(\"Username\"))").fill(TesterRoad)
    
    # 点击 promo card 附近的一个按钮
    page.locator("button:near(.promo-card)").click()
    
    # 点击 "Label 3"左侧最近的单选按钮
    page.locator("[type=radio]:left-of(:text(\"Label 3\"))").first.click()

注意：布局选择器取决于页面布局，当页面布局发生变化时，元素定位可能会失败。

元素可见性定位

Playwright有两种方法定位可见元素：

1.:visible CSS 选择器中的伪类

2.visible=选择器引擎

如下页面有两个按钮，第一个按钮不可见，第二个按钮可见

<button style='display: none'>Invisible</button>
    <button>Visible</button>

点击第二个按钮

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

定位第N个元素

有时页面包含许多相似的元素，很难选择一个特定的元素。例如：

我们可以使用:nth-match(:text(“Buy”), 3)从上面的HTML中选择第三个按钮。注意，索引是从一开始的。

# 点击第三个按钮 Bug
    page.locator(":nth-match(:text('Buy'), 3)").click()

xpath定位

# 百度首页，使用 xpath 定位输入框，并输入“mrjade”
    page.fill("//input[@name='wd']", "mrjade")
    # 或者
    page.fill("xpath=//*[@id='kw']","mrjade")

### 总结 ###

Playwright和Selenium的元素定位方法有相似之处，因为都是对相同的WEB页面元素进行定位，所以差别不大，区别在于它们的定位方式，Selenium对每种选择器提供了对应的方法，而Playwright只需要写定位表达式就可以了，不需要指定具体方法。从这一点来看，Playwright是非常方便的。

--------------------

### 资源分享 ###

**下方这份完整的软件测试视频学习教程已经上传CSDN官方认证的二维码，朋友们如果需要可以自行免费领取 `【保证100%免费】`**

![在这里插入图片描述][b9a9eea1ed5c42429c5e383b00ba6e0c.png_pic_center]

![在这里插入图片描述][d96b58a511f84668b59f3f620964da07.png_pic_center]

[7732104a7e1147d18e5f3bba0e2bef32.png]: https://img-blog.csdnimg.cn/7732104a7e1147d18e5f3bba0e2bef32.png
[b9a9eea1ed5c42429c5e383b00ba6e0c.png_pic_center]: https://img-blog.csdnimg.cn/b9a9eea1ed5c42429c5e383b00ba6e0c.png#pic_center
[d96b58a511f84668b59f3f620964da07.png_pic_center]: https://img-blog.csdnimg.cn/d96b58a511f84668b59f3f620964da07.png#pic_center