playwright学习记录2--定位方式

定位方式：

• css
• 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（可以配置其他属性）。

1. CSS选择器 (locator(selector))

Playwright 的 CSS 选择器支持大多数 CSS 选择器功能，包括类名、ID、属性选择、子元素等。它是最常用的定位方法之一。

# 定位类名为“menu-link”的元素
page.locator(".menu-link")# 定位ID为“username”的输入框
page.locator("#username")# 组合选择器
page.locator("div.menu > a.link-item")

2. 文本选择器 (get_by_text())

Playwright 可以通过元素的文本内容来定位元素，支持精确匹配和部分匹配。

<span>提交</span>

# 定位文本完全为“提交”的按钮
page.get_by_text("提交")# 使用正则表达式进行部分匹配
page.locator("text=/提交.*/")
page.get_by_text(re.compile("提交", re.IGNORECASE))# 精准匹配
page.get_by_text("提交", exact=True)

3. 角色选择器 (get_by_role())

根据页面元素的 ARIA 角色定位元素，特别适合用于具有无障碍特性的网站。Playwright 支持大多数标准的 ARIA 角色，如 `button`、`link`、`textbox` 等。

# 定位“提交”按钮
page.get_by_role("button", name="提交")# 定位导航栏中的链接
page.get_by_role("link", name="首页")

4. 标签选择器（get_by_label）

根据页面标签进行定位，大多数表单控件 都有专用标签，方便与表单进行交互

<label>Password <input type="password" /></label>

# 表单字段定位时使用
page.get_by_label("password).fill("123456")

5. 测试 ID 选择器 (get_by_test_id())

如果 HTML 元素中有 data-testid 属性，可以使用 get_by_test_id() 方法通过此属性进行定位。这种方式特别适合在前端开发中为测试提供稳定的定位。

# 定位data-testid属性为“submit-button”的按钮
page.get_by_test_id("submit-button")

6. 标题选择器 (get_by_title())

可以通过元素的 title 属性来定位元素。适用于有 title 提示的元素。

<span title='用户设置'>用户设置</span>
```(
```python
# 定位标题为“用户设置”的按钮
page.get_by_title("用户设置")

7. 占位符选择器 (get_by_placeholder())

可以根据输入框中的 placeholder 占位符来定位元素。

<input type="email" placeholder="请输入用户名" />

# 定位占位符为“请输入用户名”的输入框
page.get_by_placeholder("请输入用户名")

8. Alt文本选择器 (get_by_alt_text())

根据图片或媒体元素的 alt 属性定位元素，适用于图像或媒体内容。

<img alt="playwright logo" src="/img/playwright-logo.svg" width="100" />

# 定位alt属性为“logo”的图片
page.get_by_alt_text("playwright logo")

9. 相对选择器

Playwright 支持使用 nth 索引、子元素选择、以及 .first()、.last() 等相对定位方法来定位元素，适用于定位同类元素中的特定一个。

# 定位所有类名为“item”的元素中的第一个
page.locator(".item").first()# 定位所有类名为“item”的元素中的最后一个
page.locator(".item").last()# 定位索引为2的元素（从0开始）
page.locator(".item").nth(2)

10. XPath选择器 (locator("xpath=..."))

XPath 是一种强大的定位方法，可以用于定位复杂的节点关系。

# 定位“提交”按钮
page.locator("xpath=//button[text()='提交']")# 定位父元素为 div 且子元素包含 span 的结构
page.locator("xpath=//div[span]")

11. Frame 内定位 (frame_locator())

如果元素位于 <iframe> 中，可以使用 frame_locator() 方法进入 iframe，再在其中定位元素。

# 定位嵌套在 iframe 中的元素
frame = page.frame_locator("#iframe-id")
frame.locator("button#submit").click()

12. 链式选择器

Playwright 支持链式定位，使得在复杂页面结构中逐步定位更加灵活。

# 先找到父级菜单项，再找其中的子项链接
page.locator("nav.menu").locator("a.link-item").click()

13. 过滤定位器
    可以使用 locator.filter() 方法按文本过滤定位器。它将在元素内部的某个位置（可能在后代元素中）搜索特定字符串，不区分大小写。

<ul><li><h3>Product 1</h3><button>Add to cart</button></li><li><h3>Product 2</h3><button>Add to cart</button></li>
</ul>

# 点击第2个商品对应的按钮
page.get_by_role("listitem").filter(has_text="Product 2").get_by_role("button", name="Add to cart"
).click()# 正则
page.get_by_role("listitem").filter(has_text=re.compile("Product 2")).get_by_role("button", name="Add to cart"
).click()

过滤定位器必须相对于原始定位器，并且从原始定位器匹配开始查询，而不是从文档根开始。

元素操作

Playwright 可以与 HTML 输入元素进行交互，例如文本输入、复选框、单选按钮、选择选项、鼠标单击、键入字符、按键和快捷键以及上传文件和焦点元素。

1. 文本输入 locator.fill()

page.get_by_role("text").fill("123")

2. 复选框和单选按钮 locator.set_checked()
   选中和取消选中复选框或单选按钮

# Check the checkbox
page.get_by_label('I agree to the terms above').check()

3. 选择选项
   使用 locator.selectOption() 选择 元素中的一个或多个选项

# 选1个
page.get_by_label('Choose a color').select_option('blue')
# 选多个
page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])

4. 鼠标点击

# 单次点击
page.get_by_role("button").click()# 双击
page.get_by_text("Item").dblclick()# 右键点击
page.get_by_text("Item").click(button="right")# Shift + click
page.get_by_text("Item").click(modifiers=["Shift"])# 悬浮在某个元素上
page.get_by_text("Item").hover()# 点击指定位置
page.get_by_text("Item").click(position={ "x": 0, "y": 0})# 强制点击
page.get_by_role("button").click(force=True)

5. 上传文件
   可以使用 locator.set_input_files() 方法选择要上传的输入文件

# Select one file
page.get_by_label("Upload file").set_input_files('myfile.pdf')# Select multiple files
page.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt'])# Select a directory
page.get_by_label("Upload directory").set_input_files('mydir')# Remove all the selected files
page.get_by_label("Upload file").set_input_files([])# Upload buffer from memory
page.get_by_label("Upload file").set_input_files(files=[{"name": "test.txt", "mimeType": "text/plain", "buffer": b"this is a test"}],
)

断言方式

Playwright 以 expect 函数的形式包含测试断言

断言方法	描述
expect(locator).to_be_checked()	复选框被选中
expect(locator).to_be_visible()	元素是否可见
expect(locator).to_have_text()	元素匹配文本内容
expect(page).to_have_title()	页面有title

expect(page.get_by_text("Name"), "ABC").to_be_visible()

超时时长
可以为全局或每个断言指定超时时长， 默认为5s

• 全局

# conftest.py
expect.set_options(timeout=10_000)

• 单独设置

def test(page):expect(page.get_by_text("123")).to_be_visible(timeout=10_100)

自动等待

• Playwright 在执行操作之前对元素执行一系列可操作性检查，以确保这些操作按预期运行。它会自动等待所有相关检查通过，然后才执行请求的操作。如果所需的检查未在给定的时间内通过timeout，则操作失败并显示TimeoutError。

对于locator.click()，Playwright 将确保：

• 定位器解析为一个元素
• 元素可见
• 元素处于稳定状态，即非动画或动画已完成
• 元素接收事件，不会被其他元素遮挡
• 元素已启用