【playwright】新一代自动化测试神器playwright+python系列课程04_playwright元素定位1_locator应用

playwright元素定位方法应用

元素定位时自动化测试最为关键的环节，所谓的自动化测试无非就是定位元素，然后操作元素最后断言，元素定位时自动化测试的基础，是必须要掌握的。有selenium使用经验的童鞋首先会想到selenium的八大元素定位，同理Playwright也有自己的元素定位的方法，Playwright跟Selenium在使用过程中其实非常相似，Playwright也是通过元素定位来实现各种功能的。下面来看一Playwright的定位方法使用。

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

当然除了这些，还可以使用Locator定位元素，我们先来看一下这种元素定位方法的使用。
page.locator(selector)
定位器（Locator）是 Playwright 的自动等待和重试能力的核心部分。定位器是一种随时在网页上查找元素的方法，用于在元素上执行诸如 .click、.fill 之类的操作。可以使用 page.locator(selector, **kwargs) 方法创建自定义定位器，它支持所有定位元素的方法和操作。该方法创建一个 Locator 对象，可以用于更复杂的元素定位操作。该方法接受一个 CSS 选择器或 XPath 表达式作为参数，并返回一个 Locator 对象。
使用Locator 对象定位元素常用css、xpath、text三种。
以下是使用 Locator 对象的示例：

page.locator('#account').fill('admin') # css定位，定位id=account的元素
page.locator('//*[@name="password"]').fill('Deshifuzhi01') # xpath定位，定位name=password的元素
page.locator('"登录"').click() #text定位，登录外面加双引号表示精确匹配，不加双引号表示模糊匹配

或者

page.locator('css=#account').fill('admin') # css定位，定位id=account的元素
page.locator('xpath=//*[@name="password"]').fill('Deshifuzhi01') # xpath定位，定位name=password的元素
page.locator('text="登录"').click()#text定位，登录外面加双引号表示精确匹配，不加双引号表示模糊匹配

小提示：

1、匹配时会将多个空格格式化为一个空格，并去掉头尾空格
如：text=’Log in’ 可以匹配 “ Log in ”
2、当文本中本身就有引号时，需要将引号进行转义，前面加上\
如：text=I \’Log\’ in 可以匹配 “I ‘Log’ in”
3、Input元素 和 submit元素的value属性的值也会被text 选择器进行匹配
如：text=Login 匹配 type=button value=”Login”
4、文本选择器支持以/开头的JavaScript-like regex表达式
如：text=/Log\s*in/i 匹配 “Login”和“log IN”
•	/：JavaScript-like regex表达式的开始
•	\s: 空格
•	：前面的字符出现0次或多次
•	/i：对大小写不敏感

示例：

# '''
# author: 测试-老姜   交流微信/QQ：349940839
# 欢迎添加微信或QQ，加入学习群共同学习交流。
# QQ交流群号：877498247
# 西安的朋友欢迎当面交流。
# '''

from playwright.sync_api import Playwright, sync_playwright, expect
playwright = sync_playwright().start()
browser = playwright.chromium.launch(headless=False) #默认无头模式
context = browser.new_context() # 创建上下文，相当浏览器于实例化，即打开浏览器
page = context.new_page() # 打开一个新标签页

page.goto("http://127.0.0.1/")
page.get_by_role("link", name="开源版").click()
page.locator("#account").fill("admin")# 定位id=account的元素
page.locator("input[name=\"password\"]").click() #定位标签为input，name属性值为password的元素
page.locator("input[name=\"password\"]").fill("Deshifuzhi01")
# ---------------------
context.close()
browser.close()

下面来看一下Locator的其他用法
CSS和文本组合定位

1.:has-text()

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

page.locator(“span:has-text(‘百度一下’)”).click()

2.伪类:has()

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

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个元素

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

<section> <button>Buy</button> </section>
<article><div> <button>Buy</button> </div></article>
<div><div> <button>Buy</button> </div></div>

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

点击第三个按钮 Bug

page.locator(":nth-match(:text('Buy'), 3)").click()

总结：
提高 Playwright 自动化程序的可靠性的关键是选择器的选择。为了减少维护负担，选择器的选择是非常重要的。下面介绍一些选择器的最佳实践。
首先，如果元素具有 id 属性，那么最好使用 id 选择器来定位元素。因为 id 选择器的优先级最高，而且通常只会在页面中出现一次，因此 id 选择器的可靠性也是最高的。
其次，优先使用 CSS 选择器。CSS 选择器的可读性和可维护性比 XPath 要好，因此优先使用 CSS 选择器。
其次，尽量使用简单的选择器。如果可以使用简单的选择器来定位元素，那么就不要使用复杂的选择器，因为复杂的选择器更容易受到页面结构的影响，导致自动化程序出现问题。
最后，尽量避免使用相对选择器。相对选择器是指在当前元素的基础上再进行定位的选择器，例如：page.Locator(“div > input”)。相对选择器的可读性和可维护性比较差，而且容易受到页面结构的影响，因此尽量避免使用相对选择器。
总之，选择器的选择对于 Playwright 自动化程序的可靠性至关重要。掌握选择器的最佳实践可以使得自动化程序更加稳定和可维护。