一文告诉您playwright截屏的高级用法,包括具体元素截屏和截长屏

一文告诉您playwright截屏的高级用法,包括具体元素截屏和截长屏_第1张图片

对于playwright的截屏操作大家可能并不陌生,api如下:

page.screenshot(path='a.png')

但是您知道playwright截屏的一些高级用法吗?比如说如何对页面中的某个元素进行截屏以及如何截取长屏,今天就带大家了解相关知识点,相信在自动化测试中一定会帮助到大家!

截屏页面中某个元素

element_handle = page.query_selector("元素信息")  # 按照元素截图
element_handle.screenshot(path="b.png")

截长屏

page.screenshot(path='c.png',full_page=True)

一个完整的例子

下面就给大家搞一个完整的例子,我们以截屏csdn我的博客主页为例,代码如下:

from playwright.sync_api import sync_playwright
import time
playwright1 = sync_playwright().start()
run_browser= playwright1.chromium
browser = run_browser.launch(headless=False)
context = browser.new_context()
page = context.new_page()
url = 'https://blog.csdn.net/liwenxiang629'
page.goto(url)
time.sleep(10)
page.screenshot(path='a.png')
search_button= page.query_selector("id=toolbar-search-button")
search_button.screenshot(path="b.png")
page.screenshot(path='c.png',full_page=True)
context.close()
browser.close()
playwright1.stop()

看到这里有的同学可能会问我怎么没用with sync_playwright() as 的写法呢?有疑问的同学可以看这篇文章:告诉你playwright 不使用with sync_playwright() as编写脚本的新方法-CSDN博客

a截图显示如下:

一文告诉您playwright截屏的高级用法,包括具体元素截屏和截长屏_第2张图片

b元素(搜索按钮)截图显示如下:

c长屏截图显示如下:

一文告诉您playwright截屏的高级用法,包括具体元素截屏和截长屏_第3张图片

我的每一篇文章都希望帮助读者解决实际工作中遇到的问题!如果文章帮到了您,劳烦点赞、收藏、转发!您的鼓励是我不断更新文章最大的动力!

你可能感兴趣的:(自动化测试,Playwright,Python,前端,测试工具)