精通Playwright的元素定位和CSS技巧

Playwright之元素定位:

· 点击元素， click() 方法

· 元素内输入文本， fill() 方法

· 获取元素内部文本， inner_text() 方法

CSS Selector 定位原理

一种方式是自己写，大家如果有网站开发经验，这一部分会比较轻松。

第二章方式根据开发者工具(F12)协助。

在Playwright 中，根据 CSS Selector 进行定位元素，就是使用页面对象的 Locator 类型的对象来进行操作。

标签名：

获取所有的tag名为div的元素的内部可见文本。

但是我们如果想一次性提取出所有的div标签下的内容呢？

我们可以使用all_inner_texts()方法，这个会将相应标签下的内容都放在一个列表中，会一次性全部提取出来。

id属性：

根据id属性来进行选择元素，其语法是在id号前面加上一个#号： #id值.

class属性：

根据class属性来进行选择元素，其语法是在class号前面加上一个.号： .class值`.

多class问题：

假如一个标签存在多个class属性值，即aaa bbb,这两个属性都是其属性值，但是我们在进行选择器定位的时候，不能使用：

应该使用：

也可以使用：

匹配元素：

匹配多个元素，这多用于将所有的标签都遍历，然后得到其内容。

all() 返回的是个Locator列表，相当于一个可迭代对象，如下：

获取数量：

获取某个：

第一个：

最后一个：

某一个：

父子关系定位：

这种语法还是比较常见的，在xpath或者bs4或者css选择器，都有类似的用法。

根据属性选择：

包含：

a节点的href属性值以 http 字符串开头，可以使用 ^.

多个属性值：

组选择：

顾名思义，就是选定一组标签，一般是通过 ，隔开。

当然这样写可以实现交互定位，就是 既符合前面的，又符合后面的。

关于xpath：

这些就足够了，其实真正在开发的时候，更多的是改代码，看懂代码，还有同学会问，xpath可以定位吗？

当然可以了，那么xpath怎么写呢？

css选择器写法：

xpath选择器写法：

没错，就是将css的位置转化为xpath，playright会自动取找，不用指定xpath还是css选择器。

总结：

在这篇博客中，我们深入探讨了Playwright的元素定位功能，以及与之相关的CSS知识。我们首先介绍了Playwright的元素定位方法，包括基本的CSS选择器和XPath表达式。随后，我们深入讨论了如何使用这些方法来准确地定位页面元素，以便进行自动化测试和网页操作。此外，我们还涉及了一些与CSS选择器相关的知识，帮助读者更好地理解元素定位的原理。通过本文的学习，读者可以更好地掌握Playwright的元素定位功能，并在实际项目中灵活运用CSS知识来定位和操作网页元素。