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 选择器表达式 分别为

css: #name
xpaht: //*[@id="name"]

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

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

或

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

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

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

或

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

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

# 通过id来定位
page.locator('id=name').fill('test')

# 通过text来定位 "忘记密码超连接"
page.locator('text=忘记密码').click()

# 也能通过部分文本来丁文
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 的一些常用操作！敬请期待！

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

软件测试面试文档

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