【Playwright学习笔记 02】CSS-selector定位

定位后的操作方法：

点击元素， **click()**方法
元素内输入文本， **fill()**方法
获取元素内部文本， **inner_text()**方法

常用方法：

图中粉色字体都是可以用来定位的标志

定位标签常用id属性中的元素，一般html语言id的内容都是唯一的

图中id属性中的内容被空格隔开的意思是，这个标签有两个属性分别是suggestion、stock

CSS selector

原理：css本身就是浏览器用用来赋予内容样式的，赋予不同的颜色。

Locator 对象

Page 对象的 locator方法就会创建一个 Locator 类型对象，参数就可以是 CSS Selector 表达式

python 复制代码

page.locator('#kw').fill('通讯')
page.locator('#go').click()

Page对象的 locator 定位到的如果是**''唯一''**的 html元素，就可以调用 Locator 对象的方法，比如 fill , click , inner_text 等等对元素进行操作了。

根据 tag名、id、class 选择元素

tag名

直接写上tag名即可

python 复制代码

locators = page.locator('div').all()

然后可以通过for循环打印所有内容：

python 复制代码

for one in locators:
    print(one.inner_text())

要获取所有的tag名为div的元素的内部可见文本，也可以直接调用 all_inner_texts

python 复制代码

texts = page.locator('div').all_inner_texts()

注意，如果 locator调用 匹配的结果是多个元素 ，调用 针对单个元素的方法 ，比如 inner_text ，会有错误抛出

根据id属性

选择元素的语法是在id号前面加上一个井号：#id值

比如，有下面这样的元素：

python 复制代码

<input  type="text" id='searchtext' />

就可以使用 #searchtext 这样的 CSS Selector 来选择它。

比如，我们想在 id 为 searchtext 的输入框中输入文本 你好 ，完整的Python代码如下

python 复制代码

lct = page.locator('#searchtext')
lct.fill('你好')

根据class属性

选择元素的语法是在 class 值前面加上一个点： .class值

要选择 class 属性值为 animal的元素动物，可以这样写

python 复制代码

page.locator('.animal')

验证 CSS Selector语法是否正确

由于 CSS Selector 是浏览器直接支持的，可以在浏览器 开发者工具栏 中验证。

比如我们使用Chrome浏览器打开一个网址

按F12 打开开发者工具栏，点击 Elements 标签后，同时按 Ctrl 键和 F 键，就会出现下图箭头处的搜索框

匹配多个元素

前面已经说，如果一个 locator表达式匹配多个元素，要获取所有的元素对应的 locator 对象，使用 all方法

python 复制代码

locators = page.locator('.plant').all()

有时，我们只需要得到某种表达式对应的元素数量，可以使用 count方法，如下

python 复制代码

count = page.locator('.plant').count()

返回结果就是匹配的元素数量。可以根据返回结果是否为0 判断元素是否存在

有时，我们只需要得到某种表达式对应的第一个，或者最后一个元素。

可以使用**first** 和 last 属性，如下

python 复制代码

lct = page.locator('.plant')
print(lct.first.inner_text(), lct.last.inner_text())

也可以，通过 nth 方法，获取指定次序的元素，参数0表达第一个， 1 表示第2个，比如:

python 复制代码

lct = page.locator('.plant')
print(lct.nth(1).inner_text())

元素内部定位

前面都是通过 Page 对象调用的 locator 方法，定位的范围是整个网页。

如果我们想在某个元素内部定位，可以通过**Locator** 对象调用 locator方法。比如:

python 复制代码

lct = page.locator('#bottom')

# 在 #bottom 对应元素的范围内 寻找标签名为 span 的元素。
eles = lct.locator('span').all()