Playwright自动化框架系列(三)

📖 前言

• 个人博客：www.power-blog.cn
• CSDN：blog.csdn.net/powerbiubiu

👋 简介

本章节主要介绍playwright元素定位的方式，playwright支持css和xpath这两种最常见的定位方式，并且还有一些内置的定位方式

💡 正文

1 CSS Selector

HTML 中经常要为页面上的元素指定显示效果，比如前景文字颜色是红色，背景颜色是黑色， 字体是微软雅黑，输入框的宽与高等。这一切，都是靠 css 来告诉浏览器：要选择哪些元素， 显示怎样的风格。

其中，.s-top-left-new,.mnav 等就是CSS Selector，也称为CSS选择器。

2 元素定位与操作

以百度为例，通过id选择器找到输入框的id属性为kw，通过locator('#kw')的方式选中改输入框，同理百度一下所有按钮同样的方式进行定位

2.1 CSS定位

page.goto("https://www.baidu.com")
page.locator('#kw').fill('playwright')
page.locator('#su').click()

同样的，我们可以直接调用fill()和click()方法

page.goto("https://www.baidu.com")
page.fill('#kw','playwright')
page.click('#su')

2.2 xpath定位

page.goto("https://www.baidu.com")
page.fill('//*[@id="kw"]', "playwright")
page.click('//*[@id="su"]')

2.3 文本定位

# 模糊匹配，不区分大小写
page.click("text=playwright")
# 精确匹配，区分大小写
page.click("text='Playwright'")

对文本匹配还可以通过xpath的方式进行匹配：

• 完全匹配文本 //*[text()="playwright "]
• 部分匹配文本 //*[contains(text(), “playwright”)]

2.4 其他定位方式

Playwright提供的一些常用的内置定位方式：

• page.get_by_role()：通过显式和隐式可访问性属性进行定位
• page.get_by_text()：通过文本内容定位
• page.get_by_title()：通过标题属性定位元素
• page.get_by_placeholder()：按占位符定位输入
• page.get_by_alt_text()：通过替代文本定位元素，通常是图像
• page.get_by_test_id()：根据data-testid属性定位元素（可以配置其他属性）
• page.get_by_label()：通过关联标签的文本定位表单控件

page.get_by_role("button").click()
# exact=True 精准匹配，文本解决复杂的定位元素层级定位，dom树变化也不影响定位元素
page.get_by_text('登录',exact=True).click()  
# <input placeholder="密码" />
page.get_by_placeholder("密码").fill("12345678")
# <input label="password" />
page.get_by_label("password").fill("123456")
# <link rel="search" href="/content-search.xml" title="百度搜索">
page.get_by_title("百度搜索")
# <img alt="playwright logo" ... />
page.get_by_alt_text("playwright logo").click()

🎉 欢迎我的关注公众号