首页 前端知识 精通Playwright的元素定位和CSS技巧

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

2024-05-26 01:05:41 前端知识 前端哥 162 700 我要收藏

Playwright之元素定位:

from playwright.sync_api import sync_playwright

p = sync_playwright().start()
browser = p.chromium.launch(headless=False)# 创建浏览器对象
page = browser.new_page()
page.goto("https://www.byhy.net/_files/stock1.html") #进入网站

# 输入通讯,点击查询
page.locator('#kw').fill('通讯')
page.locator('#go').click() 

page.wait_for_timeout(1000)

# 打印所有搜索内容
lcs = page.locator(".result-item").all()
for lc in lcs:
    print(lc.inner_text())
  • 点击元素, click() 方法
  • 元素内输入文本, fill() 方法
  • 获取元素内部文本, inner_text() 方法

CSS Selector 定位原理

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

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

在这里插入图片描述

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

page.locator('#kw')
page.locator('#go')
标签名:

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

from playwright.sync_api import sync_playwright

p = sync_playwright().start()
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://cdn2.byhy.net/files/selenium/sample1.html")

divs=page.locator('div').all()
for div in divs:
    print(div.inner_text())

在这里插入图片描述

在这里插入图片描述

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

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

from playwright.sync_api import sync_playwright

p = sync_playwright().start()
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://cdn2.byhy.net/files/selenium/sample1.html")



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

在这里插入图片描述

id属性:

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

search = page.locator('#searchtext')
search.fill('666')
class属性:

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

demo = page.locator('.kw')

多class问题:

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

demo = page.locator('.aaa .bbb')

应该使用:

demo = page.locator('.aaa')
# 或者
demo = page.locator('.bbb')

也可以使用:

demo = page.locator('.aaa.bbb') # 不能有空格!!!!

匹配元素:

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

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

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

[<Locator frame=<Frame name= url='https://cdn2.byhy.net/files/selenium/sample1.html'> selector='div >> nth=0'>, <Locator frame=<Frame name= url='https://cdn2.byhy.net/files/selenium/sample1.html'> selector='div >> nth=1'>]

获取数量:

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

获取某个:

第一个:

lct = page.locator('div').first
print(lct.inner_text())

最后一个:

lct = page.locator('div').last
print(lct.inner_text())

某一个:

lct = page.locator('.plant')
print(lct.nth(5).inner_text()) # 获取第五个

父子关系定位:

father = page.locator('#bottom')

# 在 #bottom 对应元素的范围内 寻找标签名为 span 的元素。
sons = father.locator('span').all()
for son in sons:
    print(e.inner_text())

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

根据属性选择:

from playwright.sync_api import sync_playwright

p = sync_playwright().start()
browser = p.chromium.launch(headless=False, slow_mo=50)
page = browser.new_page()
page.goto("https://cdn2.byhy.net/files/selenium/sample1.html")

# 根据href属性选择元素
element = page.locator('a[href="http://www.miitbeian.gov.cn"]')
# 打印出元素文本
print(element.inner_text())

包含:

a[href*="miitbeian"]

a节点的href属性包含了 miitbeian 字符串,可以使用 *.

开头:

a[href^="http"]

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

结尾:

a[href$="gov.cn"]

a节点的href属性值以 gov.cn 字符串结尾,可以使用 $.

多个属性值:

div[class="misc"][ctype="gun"]

组选择:

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

.plant , .animal

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

div,#BYHY

关于xpath:

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

当然可以了,那么xpath怎么写呢?

css选择器写法:

element = page.locator('[href="http://www.miitbeian.gov.cn"]')

xpath选择器写法:

element = page.locator('//*[@href="http://www.miitbeian.gov.cn"]')

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

总结:

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9583.html
评论
发布的文章

html5怎么实现语音搜索

2024-06-01 10:06:32

HTML5

2024-02-27 11:02:15

HTML - 头部元素

2024-06-01 10:06:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!