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

借助于Playwright 内置的定位器page.get_by_xx()我们可以通过text, role,title,placeholder,label等属性快速的定位到页面元素控件,但Selenium中更为常见的通过Xpath,Css来定位page.get_by_xx()反而是不支持的。但是，这并不意味着Playwright 不支持Xpath,Css定位，Playwright 通过page.locator()来支持Xpath和Css的定位

page.locator()

Playwright 使用page.locator()来创建一个定位器，并接受css 和 xpath 选择器作为参数来查找元素， 看如下示例：用户名输入框，他的css 和 xpath 选择器表达式 分别为

1. css: #name

2. xpaht: //*[@id="name"]

那就可以借助page.locator() 来定位到此元素

2. page.locator('css=#name').fill('test')

5. 或

8. page.locator('xpath=//*[@id="name"]').fill('test')

并且，当 css 或 xapth省略不写时，Playwright 也能自动检测出他们

1. page.locator('#name').fill('test')

4. 或

7. page.locator('//*[@id="name"]').fill('test')

page.locator()除了能通过xpath 和 css 定位元素外，还支持 id 和 text 定位，还是拿上图登录页的文本输入框为例

2. # 通过id来定位

4. page.locator('id=name').fill('test')

7. # 通过text来定位 "忘记密码超连接"

9. page.locator('text=忘记密码').click()

12. # 也能通过部分文本来丁文

14. page.locator('text=忘记密').click()

查阅网上关于Playwright的定位方式，有的文章还介绍了 通过元素属性来定位，如用户名输入框，他有属性 name = name，如

page.locator("[name=name]").fill('test')

的确是能正确的定位到元素，但这边需要强调的是，上诉写法也算是css选择器写法的一种， 本质上还是依靠css来定位的。

frame操作

在UI自动化的元素定位中，frame 是一个绕不开的话题。selenium要定位到某个frame中的元素，需要切换到对应的frame中，然后再切换出来， 而Playwright的处理相对来说简单了些，它不需要切换frame，直接定位元素即可。以经典的网易邮箱登录页为例, 用户名输入框在页面嵌套的一个frame中，如图所示:

Playwright中定位到用户名输入框只要如下操作即可

page.frame_locator("//html//body//div[3]//div[3]//div[1]//div//div[3]//div[1]//div[1]//iframe").get_by_placeholder('邮箱账号或手机号码').fill('ttes')

frame_locator()通过参数传递的选择器(可以是css，也可以是xpath)来定位到具体的frame并返回 一个FrameLocator对象实例，然后就可以在这个对象实例中去定位在这个frame 中的元素了。

关于Playwright 的定位方式我们就介绍到这，下一篇章我们将介绍Playwright 的一些常用操作！敬请期待！

总结：

感谢每一个认真阅读我文章的人！！！

作为一位过来人也是希望大家少走一些弯路，如果你不想再体验一次学习时找不到资料，没人解答问题，坚持几天便放弃的感受的话，在这里我给大家分享一些自动化测试的学习资源，希望能给你前进的路上带来帮助。

软件测试面试文档

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

 

          视频文档获取方式：
这份文档和视频资料，对于想从事【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！以上均可以分享，点下方小卡片即可自行领取。