Playwright的元素定位快速上手(连载2)

不念不忘少年蓝@ 2023-10-14 22:31 82阅读 0赞

![图片][35518dfc099ddd71932132e165f1cfcc.png]

### Playwright 在元素定位上的优势 ###

元素定位是UI自动化测试的基础，它确保了测试脚本能够准确地与应用程序的UI交互，并验证其功能。良好的元素定位策略可以提高测试的稳定性、可维护性和可重复性，从而帮助团队更有效地进行自动化测试。

Playwright 作为一个新兴的自动化工具，它在元素定位方面有一些独特的优势：

*  多浏览器支持：Playwright 支持多种主流浏览器，包括 Chromium、Firefox 和 WebKit。这意味着你可以使用相同的代码和元素定位方法在不同的浏览器中进行测试，而无需修改代码。
 *  快速而准确的定位：Playwright 使用了先进的底层技术来优化元素定位，因此定位元素速度较快，并且在复杂的应用程序中也能保持准确性。它还提供了内置的智能等待策略，以确保元素在加载和渲染完成后再进行操作。
 *  选择器引擎：Playwright 提供了强大的选择器引擎，可以使用多种方式定位元素，包括 CSS选择器、XPath 和 text。这使得你可以根据需要选择最适合的定位方法。
 *  Shadow DOM 支持：如果应用程序使用了 Shadow DOM 技术，其他自动化工具可能会遇到难题。然而，Playwright 具有内置的 Shadow DOM 支持，可以轻松地在 Shadow DOM 内部定位和操作元素。

下面的篇幅就将来详细的介绍Playwright 的元素定位

### 定位器（Locator） ###

定位器 Locator（后续直接称为Locator）是Playwright 特有的概念，它是Playwright 提供的一个抽象层，封装了元素的定位逻辑和操作方法， 这样就可以让我们可以直接用Locator来定位和操作页面上元素的对象。在第一篇的示例中

page.locator('#kw').fill('米兰')

`page.locator('#kw')` 其实就是返回了一个 Locator对象，这时，你就可以理解为这是一个具体的定位器了，它其实就代表了页面上的搜索框， 也可以用Locator对象封装的方法对其进行操作了(`fill('米兰')`)。

Playwright 提供了两种方式来返回Locator对象

*  `page.get_by_xxx`
 *  `page.locator(选择器)`我们依次来一一介绍

#### page.get\_by\_xxx ####

Playwright 通过 `get_by_xxx` 这种形式 提供了几种内置的 定位器，我们依次来介绍下

1.  `page.get_by_text()`
    
    通过元素包含的文本查找元素。使用 `page.get_by_text()` 时，您可以通过子字符串、精确字符串或正则表达式进行匹配。拿 百度首页 中的 "换一换" 举例：
    
    ![图片][5e36add7a2cc56f6b0facb2b8caa080b.png]

page.get_by_text('换一换').click()

输入部分文本，也能定位到该元素

page.get_by_text('换一').click()

其中，具体的文本还能通过正则表达式来代替

page.get_by_text(re.compile('换一')).click()

当然，如果想精确匹配，那只要加上参数 exact=True 即可

page.get_by_text('换一', exact=True).click()

`get_by_text()`文本定位器 也能定位到超链接文本上，比如 百度首页左上角的 "新闻"， "hao123"等等， 官方推荐如 div、span、p 等非交互元素，用文本定位器， 而对于交互式元素，如按钮、a、input 等，请使用角色定位器`get_by_role()`。

`2. page.get_by_role()`

`page.get_by_role()` 定位器反映了用户和辅助技术如何感知页面，例如某个元素是按钮还是复选框。按角色定位时，通常还应该传递可访问的名称，以便定位器精确定位到确切的元素(官方文档原话)， 换通俗易懂的话来说就是，我们可以直接明了的通知我们要定位一个复选框或者是一个按钮，他的名字叫什么，还是拿百度为例，【百度一下】是 百度首页唯一一个按钮(注意，登录不是按钮)

![图片][cbb4161f878b6c1bf5d2e51f8716f0d4.png]

# 搜索框输入米兰
    page.locator('#kw').fill('米兰')
    
    # 点击 百度一下
    page.get_by_role('button').click()

`page.get_by_role('button')` 就是定位到按钮，因为页面上只有一个按钮，所以就定位到了【百度一下】这个按钮。当然，还可以传递可访问的名称，能更精确的定位到元素。如下面的页面

![图片][ef7611dc97a61174c34453289b894126.png]

其定位方式

page.get_by_role("checkbox", name="Subscribe").check()
    
    page.get_by_role("button", name=re.compile("submit", re.IGNORECASE)).click()

1.  `get_by_title()`
    
    通过元素的 title 属性来查找元素 如下图所示页面，居住地址按钮有title属性，所以可以依此来定位
    
    ![图片][2ae7f9de690b403d0a19f3c4a3779446.png]

page.get_by_title('北京', exact=True).click()

1.  `get_by_placeholder()`
    
    通过元素的 placeholder 属性来查找元素
    
    ![图片][ec2d7af01f40c0132c83bccea298e23b.png]

page.get_by_placeholder('请输入用户名').fill('haha')

1.  `get_by_label()`
    
    根据label属性值查找元素， 如以下页面结构
    
    ![图片][3e63b0e5e69586741bdc5b37239b92a3.png]

page.get_by_label("Password").fill("secret")

也许有同学问，Selenium中最常见的依靠 CSS ，Xpath 定位 怎么没了，别急，下一个篇章，我们就来介绍 page.locator() 依靠 CSS，Xpath来定位元素，敬请期待！

**最后：**下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取**【保100%免费】**

![8b0171187dce405e878f274a8cdd9ec0.png][]

#### **软件测试面试文档** ####

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

![a3e4226c935c4242804cbdf26b571bc6.png][]

![321aea1e130443ffab59e4bc243f3d30.gif][]

[35518dfc099ddd71932132e165f1cfcc.png]: https://img-blog.csdnimg.cn/img_convert/35518dfc099ddd71932132e165f1cfcc.png
[5e36add7a2cc56f6b0facb2b8caa080b.png]: https://img-blog.csdnimg.cn/img_convert/5e36add7a2cc56f6b0facb2b8caa080b.png
[cbb4161f878b6c1bf5d2e51f8716f0d4.png]: https://img-blog.csdnimg.cn/img_convert/cbb4161f878b6c1bf5d2e51f8716f0d4.png
[ef7611dc97a61174c34453289b894126.png]: https://img-blog.csdnimg.cn/img_convert/ef7611dc97a61174c34453289b894126.png
[2ae7f9de690b403d0a19f3c4a3779446.png]: https://img-blog.csdnimg.cn/img_convert/2ae7f9de690b403d0a19f3c4a3779446.png
[ec2d7af01f40c0132c83bccea298e23b.png]: https://img-blog.csdnimg.cn/img_convert/ec2d7af01f40c0132c83bccea298e23b.png
[3e63b0e5e69586741bdc5b37239b92a3.png]: https://img-blog.csdnimg.cn/img_convert/3e63b0e5e69586741bdc5b37239b92a3.png
[8b0171187dce405e878f274a8cdd9ec0.png]: https://img-blog.csdnimg.cn/8b0171187dce405e878f274a8cdd9ec0.png
[a3e4226c935c4242804cbdf26b571bc6.png]: https://img-blog.csdnimg.cn/a3e4226c935c4242804cbdf26b571bc6.png
[321aea1e130443ffab59e4bc243f3d30.gif]: https://img-blog.csdnimg.cn/321aea1e130443ffab59e4bc243f3d30.gif