ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【Playwright+Python】系列教程（五）元素定位 [打印本页]
作者: 河曲智叟    时间: 2024-7-9 21:45
标题: 【Playwright+Python】系列教程（五）元素定位
一、常见元素定位

定位器是 Playwright 自动等待和重试本领的焦点部门。简而言之，定位器代表了一种随时在页面上查找元素的方法，以下是常用的内置定位器。
1、按角色定位

按显式和隐式可访问性属性进行定位
语法：page.get_by_role（）
Dom布局示例1：

示例代码1：
  1. page.get_by_role("button", name="Sign in").click()
复制代码
说明：按名称为“Sign in”button的角色找到元素。
Dom布局示例2：

示例代码2
  1. expect(page.get_by_role("heading", name="Sign up")).to_be_visible()
  3. page.get_by_role("checkbox", name="Subscribe").check()
  5. page.get_by_role("button", name=re.compile("submit", re.IGNORECASE)).click()
复制代码
说明：
page.get_by_label（） 通过关联标签的文本查找表单控件。
2、按标签定位

通过关联标签的文本查找表单控件
语法：page.get_by_label()
Dom布局示例：

示例代码：
  1. page.get_by_label("Password").fill("secret")
复制代码
3、按占位符定位

语法：page.get_by_placeholder()
Dom布局示例：

示例代码：
  1. page.get_by_placeholder("name@example.com").fill("playwright@microsoft.com")
复制代码
4、通过文本定位

按占位符查找输入
语法：page.get_by_text()
Dom布局示例：

示例代码：
  1. # 可以通过元素包含的文本找到该元素
  2. page.get_by_text("Welcome, John")
  3. # 设置完全匹配
  4. page.get_by_text("Welcome, John", exact=True)
  5. # 正则表达式匹配
  6. page.get_by_text(re.compile("welcome, john", re.IGNORECASE))
复制代码
说明：
5、通过替代文本定位

通过其文本替代来定位元素（通常是图像），所有图片都应具有描述图像的 alt 属性。可以使用page.get_by_alt_text() 根据替代文本查找图片。
语法：page.get_by_alt_text()
Dom布局示例：

示例代码：
  1. page.get_by_alt_text("playwright logo").click()
复制代码
说明：当元素支持替代文本（如 img 和 area 元素）时，建议使用此定位器
6、按标题定位

按元素的 title 属性查找元素
语法：page.get_by_title()
Dom布局示例：

示例代码：
  1. expect(page.get_by_title("Issues count")).to_have_text("25 issues")
复制代码
说明：当元素具有 title 属性时，建议使用此定位器
7、按测试 ID 查找
根据元素data-testid 属性来定位元素（可以配置其他属性）
语法：page.get_by_title()
Dom布局示例：

示例代码：
  1. page.get_by_test_id("directions").click()
复制代码
8、设置自定义测试 ID 属性

默认情况下，page.get_by_test_id（） 将根据 data-testid 属性查找元素，但您可以在测试配置中或通过调用 selectors.set_test_id_attribute（） 来配置它。
将测试 ID 设置为对测试使用自定义数据属性，示例代码：
  1. playwright.selectors.set_test_id_attribute("data-pw")
复制代码
Dom布局:

然后像往常一样找到该元素，示例代码如下：
  1. page.get_by_test_id("directions").click()
复制代码
9、通过 CSS 或 XPath 定位

假如绝对必须使用 CSS 或 XPath 定位器，则可以使用 page.locator（） 创建一个定位器，该定位器采用一个选择器来描述如何在页面中查找元素。Playwright 支持 CSS 和 XPath 选择器，假如省略 css= 或 xpath= 前缀，则会自动检测它们。
示例代码：
  1. page.locator("css=button").click()
  2. page.locator("xpath=//button").click()
  4. page.locator("button").click()
  5. page.locator("//button").click()
复制代码
说明：
二、在 Shadow DOM 中定位

1、什么是Shadow DOM?

Shadow DOM 是 Web Components 技术的一部门，它提供了一种将 HTML 布局、样式和行为封装在一个独立的、封闭的 DOM 中的机制。以下是一个使用 Shadow DOM 的例子，该例子展示了如何创建一个简单的自定义组件，并将内容、样式封装在 Shadow DOM 中。
示例代码：
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>Shadow DOM Example</title>  
  7.       
  8. </head>  
  9. <body>  
  10.     Shadow Host (这里不会显示 Shadow DOM 的内容)  
  11.   
  12.       
  13. </body>  
  14. </html>
复制代码
dom布局：

2、如何查看Shadow DOM

起首打开欣赏器控制台的设置选项

然后再找到Preference -> Elements，把show user anent shadow dom勾上

这时候我们再来看一下此时的dom元素发生了什么变革

我们会发现这些标签内部都大有乾坤，在这些标签下面都多了一个shadow root，在它里面才是这些标签的真实布局。
3、在 Shadow DOM 中定位

默认情况下，Playwright 中的所有定位器都使用 Shadow DOM 中的元素。例外情况包括：
要定位，使用page.get_by_text("")或page.locator("", has_text="")都可以，要确保
包罗文本“This is inside the Shadow DOM.”，示例代码如下：
  1. page.goto("http://localhost:8080/shadowDOM.html")
  2. expect(page.get_by_text("This is inside the Shadow DOM.")).to_contain_text("Shadow DOM")
  3. expect(page.locator("div", has_text="This is inside the Shadow DOM.")).to_contain_text("This is inside")
复制代码
三、筛选定位

1、dom布局


2、按文本筛选定位

可以使用 locator.filter（） 方法按文本过滤定位器。它将在不区分大小写的情况下搜刮元素内部的某个特定字符串，可能在后代元素中。
示例代码：
  1. page.get_by_role("listitem").filter(has_text="Product 2").get_by_role(
  2.     "button", name="Add to cart"
  3. ).click()
  5. #传递正则表达式。
  6. page.get_by_role("listitem").filter(has_text=re.compile("Product 2")).get_by_role(
  7.     "button", name="Add to cart"
  8. ).click()
复制代码
2.1、按没有文本进行筛选
  1. expect(page.get_by_role("listitem").filter(has_not_text="Out of stock")).to_have_count(2)
复制代码
2.2、按子项/后代筛选

定位器支持仅选择具有或没有与另一个定位器匹配的后代的元素的选项。因此，您可以按任何其他定位器进行过滤，比方 locator.get_by_role（）、locator.get_by_test_id（）、locator.get_by_text（） 等。
示例代码：
  1. page.get_by_role("listitem").filter(
  2.     has=page.get_by_role("heading", name="Product 2")
  3. ).get_by_role("button", name="Add to cart").click()
复制代码
断言产品卡，确保只有一个，示例代码如下：
  1. expect(
  2.     page.get_by_role("listitem").filter(
  3.         has=page.get_by_role("heading", name="Product 2")
  4.     )
  5. ).to_have_count(1)
复制代码
过滤定位器必须相对于原始定位器，而且从原始定位器匹配项（而不是文档根节点）开始查询。
2.3、按没有子/后代进行筛选

通过内部没有匹配的元素进行过滤,示例代码：
  1. expect(
  2.     page.get_by_role("listitem").filter(
  3.         has_not=page.get_by_role("heading", name="Product 2")
  4.     )
  5. ).to_have_count(1)
复制代码
注意，内部定位器是从外部定位器开始匹配的，而不是从文档根目节点开始匹配的。
四、使用约束条件定位

1、在定位器内匹配

就先定位元素，再去定位子节点元素，以将搜刮范围缩小到页面的特定部门。
示例代码
  1. product = page.get_by_role("listitem").filter(has_text="Product 2")
  2. product.get_by_role("button", name="Add to cart").click()
复制代码
也可以将两个元素定位组合在一起使用，示例代码如下：
  1. save_button = page.get_by_role("button", name="Save")
  2. # ...
  3. dialog = page.get_by_test_id("settings-dialog")
  4. dialog.locator(save_button).click()
复制代码
2、使用and条件匹配

方法 locator.and_（） 通过匹配其他定位器来缩小现有定位器的范围，可以理解为xpath的and使用方法，都是定位一个元素，示例代码如下：
  1. page.get_by_role("link").and_(page.get_by_text("新闻")).click()
复制代码
3、使用or条件匹配

假如您想定位两个或多个元素中的一个，但不知道会是哪一个，请使用 locator.or_（） 创建与所有备选项匹配的定位器。示例代码如下：
  1. def test_navigationCnblogs(page: Page):
  2.     page.goto("https://www.baidu.com/")
  3.     login=page.get_by_role("link").and_(page.get_by_text("登录"))
  4.     message=page.get_by_text("短信登录")
  5.     expect(message.or_(login).first).to_be_visible()
  6.     if (login.is_visible()):
  7.         login.click()
  8.     message.click()
复制代码
4、仅匹配可见元素

考虑一个有两个按钮的页面，第一个不可见，第二个可见，这时候就可以进行约束，示例代码如下：
  1. page.locator("button").locator("visible=true").click()
复制代码
五、列表元素操纵

dom布局：

1、使用 count 断言

使用 count 断言确保列表有 3 个项目，示例代码如下：
  1. expect(page.get_by_role("listitem")).to_have_count(3)
复制代码
2、断言列表中的所有文本

断言定位器以查找列表中的所有文本，示例代码如下：
  1. expect(page.get_by_role("listitem")).to_have_text(["apple", "banana", "orange"])
复制代码
3、定位某个列表元素

使用 page.get_by_text（） 方法按文本内容在列表中查找元素，示例代码如下：
  1. page.get_by_text("orange").click()
复制代码
也可以使用 locator.filter（） 查找列表中的特定元素，示例代码如下：
  1. page.get_by_role("listitem").filter(has_text="orange").click()
复制代码
4、按下标定位指定元素

您有一个相同元素的列表，而且区分它们的唯一方法是顺序，则可以使用 locator.first、locator.last 或 locator.nth（） 从列表中选择特定元素。
  1.     banana = page.get_by_role("listitem").nth(1)
  2.     expect(banana).to_have_text('banana')
复制代码
5、链接筛选器定位元素

当您有具有各种相似性的元素时，使用 locator.filter（） 方法选择精确的元素。还可以链接多个筛选器以缩小选择范，就是层级定位，个人感觉。
DOM 布局

示例代码
  1. row_locator = page.get_by_role("listitem")
  3. row_locator.filter(has_text="Mary").filter(
  4.     has=page.get_by_role("button", name="Say goodbye")
  5. ).screenshot(path="screenshot.png")
复制代码
6、遍历每个元素

对列表中的每个元素执行操纵，示例代码如下：
  1. for row in page.get_by_role("listitem").all():
  2.     print(row.text_content())
  4. rows = page.get_by_role("listitem")
  5. count = rows.count()
  6. for i in range(count):
  7.     print(rows.nth(i).text_content())
复制代码
7、Evaluate in the page在页面中评估

我觉得这个就是很ES6呀，示例代码如下：
  1. rows = page.get_by_role("listitem")
  2. # 很前端了吧
  3. texts = rows.evaluate_all("list => list.map(element => element.textContent)")
复制代码
8、查抄定位元素的个数

定位元素假如出现定位多个元素，这个就很好用了，可以作为查验是否定位到唯一元素检测，示例代码如下：
  1. print(page.get_by_role("button").count()) #2
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4