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() 来定位到此元素

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 的一些常用操作！敬请期待！

行动吧，在路上总比一直观望的要好，未来的你肯定会感 谢现在拼搏的自己！如果想学习提升找不到资料，没人答疑解惑时，请及时加入扣群： 320231853，里面有各种软件测试+开发资料和技术可以一起交流学习哦。

最后感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

​

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！