Playwright解决ShadowDOM(wujie-app)元素定位

概述

本人在自动化测试工作中遇到了wujie-app这个前端框架，在上一篇文章Selenium遇上shadowDOM如何实现元素定位中提到了使用Selenium运行js脚本来实现元素定位。后期在搜索后了解到Playwright这个框架可以更好的解决元素定位这个问题。因此编写此文，作为笔记查看。

---

一、Playwright是什么？

Playwright是微软出品的一款强大的开源自动化测试框架，支持所有主流浏览器并确保跨浏览器的一致性。同时支持Node.js、Python、C#和Java等语言。

二、与Selenium对比优缺点

Selenium优缺点

Selenium由于出现时间早，用户量多相应的学习资料也较为丰富多样，同时支持windows\linux\mac等多平台。但是启动速度慢，定位方式只有八大定位方法。对于iframe对象的操作繁琐，需要来回切换，同时存在因为无mock功能无法模拟接口数据等问题。

Playwright优缺点

Playwright由于出现时间晚，用户量少相应的学习资料也较少，对于linux只支持ubuntu部分系统。但是对于iframe可以通过对象操作，不用切换，同时可以对事件进行监听。
大家可以详细查看工具对比篇| Playwright vs seleium该博主的文章，详细了解Selenium和Playwright的优缺点

三、定位实现

安装playwright

使用一下命令分别安装playwirght 和 pytest框架。

pip install playwright
pip install pytest-playwright

元素定位

playwright官方提供了内置的定位器，本文也主要介绍官方推荐的内置定位器。

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

使用示例

page.get_by_placeholder("输入提示文字").fill("测试数据")
iframe框的定位
page.locator("iframe id").content_frame.get_by_text("iframe内容")

在wujie-app中的使用

在wujie-app框架下需要先定位shadow root然后使用该对象即可。

self.shadow_host = self.page.locator('#app-container > wujie-app')
self.create_btn = self.shadow_host.get_by_role("button", name="创建新闻").click()

总结

由于本人也是第一次接触playwright，学习深度不够，上面给出的例子也都是在工作中使用的语句，通用性不高，如果有疑问可以评论出来大家一起讨论。如果有更好的学习资源，后面也会享一些到评论区。