《最新出炉》系列初窥篇

您所在的位置:网站首页 爬虫定位元素的方法 《最新出炉》系列初窥篇

《最新出炉》系列初窥篇

2023-07-05 23:49| 来源: 网络整理| 查看: 265

3.4.1何时使用文本定位器

建议使用文本定位器来查找非交互式元素,如div, span, p 等。对于交互式元素,如请button, a, input, 使用角色定位器。

您还可以按文本进行筛选,这在尝试在列表中定位特定项目时很有用。

3.5替代文本定位-page.get_by_alt_text()

所有图像都应该有一个alt描述图像的属性。您可以使用page.get_by_alt_text()根据替代文本定位图像。例如:以下 DOM 结构。

 可以在通过替代文本选项找到图像后单击它:

page.get_by_alt_text("playwright logo").click() 3.5.1何时使用替代文本定位器 当您的元素支持替代文本(例如img和area元素)时使用此定位器。 3.6标题定位-page.get_by_title()

使用page.get_by_title()找到具有匹配 title 属性的元素。例如:以下 DOM 结构。

 您可以在通过标题文本找到它后检查问题数:

expect(page.get_by_title("Issues count")).to_have_text("25 issues") 3.6.1何时使用标题定位器

当您的元素具有该title属性时使用此定位器。

3.7测试id定位-page.get_by_test_id()

通过测试 ID 进行测试是最具弹性的测试方式,因为即使您的文本或属性角色发生变化,测试仍会通过。QA 和开发人员应该定义明确的测试 ID 并使用page.get_by_test_id()查询它们。但是,通过测试 ID 进行的测试不是面向用户的。如果角色或文本值对您很重要,那么请考虑使用面向用户的定位器,例如角色定位器和文本定位器。例如:以下 DOM 结构。

 您可以通过它的测试 ID 定位到该元素:

page.get_by_test_id("directions").click() 3.7.1何时使用测试id定位器

当你选择使用测试id的方法,或者角色、文本无法定位时,你也可以使用测试id进行定位。

3.7.2设置自定义测试id属性

默认情况下,page.get_by_test_id()将根据data-testid属性定位元素,但您可以在测试配置中或通过调用selectors.set_test_id_attribute()对其进行配置。

设置测试 ID 以使用自定义数据属性进行测试。

playwright.selectors.set_test_id_attribute("data-pw")

在您的 html 中,您现在可以使用data-pwtest id 而不是 default data-testid。

 然后像往常一样定位元素:

page.get_by_test_id("directions").click() 4.CSS或Xpath定位

如果必须使用 CSS 或 XPath 定位器,则可以使用 page.locator()创建一个定位器,该定位器采用描述如何在页面中定位元素的选择器。Playwright 支持 CSS 和 XPath 选择器,并在省略前缀css=或xpath=时自动检测它们。它会自动判断你写的是css还是xpath语法,前提是你语法没有错误。

page.locator("css=button").click() page.locator("xpath=//button").click() page.locator("button").click() page.locator("//button").click()

XPath 和 CSS 选择器可以绑定到 DOM 结构或实现。当 DOM 结构更改时,这些选择器可能会中断。下面的长 CSS 或 XPath 链是导致测试不稳定的不良做法的示例:

page.locator( "#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input" ).click() page.locator('//*[@id="tsf"]/div[2]/div[1]/div[1]/div/div[2]/input').click() 4.1何时使用CSS或Xpath定位器

不建议使用 CSS 和 XPath,因为 DOM 经常会发生变化,从而导致无弹性测试。相反,请尝试提出一个接近用户感知页面的定位器,例如角色定位器,或使用测试 ID 定义显式测试协定。

5.文本选择器定位-text()

文本选择器是一个非常实用的定位方式,根据页面上看到的text文本就可以定位了,比如我们经常使用xpath 的文本选择器定位。

完全匹配文本 //*[text()="北京-宏哥"] 包含某个文本 //*[contains(text(),"北京-宏哥")

playwright 封装了text文本定位的方式,也可以支持2种文本定位方式

page.click("text=北京-宏哥") page.click("text='北京-宏哥'")

text=北京-宏哥和text='北京-宏哥'的区别:

text=北京-宏哥 没有加引号(单引号或者双引号),模糊匹配,对大小写不敏感 text='北京-宏哥' 有引号,精确匹配,对大小写敏感

text文本除了可以定位a标签,还可以定位 button 按钮,input标签的button 按钮,有value="百度一下" 文本值

或者是button 标签的按钮

百度一下 6.HTML属性选择器定位

HTML 属性选择器, 根据html元素的id 定位

page.fill("id=kw", "北京-宏哥") 7.select选择器组合定位

定位目标元素,我们有时候可以使用>>(两个大于号)连接不同的selector可组合使用,例如:我们定位百度首页的登录

#id 属性+ css page.fill('form >> [name="username"]', "北京-宏哥") page.fill('form >> #TANGRAM__PSP_11__password', "aa123456") page.click("text=登录")

form >> [name="username"] 定位方式等价于

#page.fill('form >> [name="username"]', "北京-宏哥") page.locator("form").locator('[name="username"]').fill("北京-宏哥")

相当于是根据父元素找到子元素了

登录按钮的值是value="登录 > ",可以用text文本定位的方式,模糊匹配到,这种人性化的设计提高了定位的效率。

8.小结

今天这一篇主要是讲解我们日常工作中在使用Playwright进行元素定位的一些比较常用的定位方法的理论基础知识以及在什么情况下推荐使用,当然了这不是一成不变的,希望大家在使用中可以灵活的应用。

好了,今天时间也不早了,宏哥就讲解和分享到这里,感谢您耐心的阅读,希望对您有所帮助。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3