python+playwright 学习-66 highlight 调试定位时高亮显示元素

Posted 2023-05-29 上海-悠悠

前言

highlight() 方法是通过高亮显示元素,在调试中有很大优势,可以清楚看到定位的元素所在的位置

遇到的问题

使用示例：点百度页面，定位文本元素“新闻”后点击

from playwright.sync_api import sync_playwright
# 上海悠悠 wx:283340479
# blog:https://www.cnblogs.com/yoyoketang/

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=2000)
    context = browser.new_context()
    page = context.new_page()
    page.goto(\'https://www.baidu.com\')
    page.get_by_text("新闻").click()

    page.wait_for_timeout(200000)

运行时会报错

从报错日志中你会看到定位到3个元素，导致点击报错。

highlight 高亮调试

为了更清楚的知道当前定位的方式，在页面上找到哪些元素，可以用到highlight() 方法，方便达到调试的目的（仅仅只是调试的时候用）。

from playwright.sync_api import sync_playwright
# 上海悠悠 wx:283340479
# blog:https://www.cnblogs.com/yoyoketang/

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=2000)
    context = browser.new_context()
    page = context.new_page()
    page.goto(\'https://www.baidu.com\')
    page.get_by_text("新闻").highlight()  # 高亮

    page.wait_for_timeout(200000)

让定位的元素处于高亮状态

这样会发现在屏幕上定位到3个元素（其中有一个是隐藏的元素，也被定位到了）

2023最新《Playwright+Python自动化测试》点我 ->立即参与
联系微信：283340479

python+playwright 学习-6.截图使用

前言

playwright 除了可以截取当前屏幕，还可以截长图，也可以对某个元素截图，这点非常棒。

screenshot 截图

这是捕获屏幕截图并将其保存到文件中的快速方法：

page.screenshot(path="screenshot.png")

使用示例

from playwright.sync_api import sync_playwright
# 上海悠悠 wx:283340479  
# blog:https://www.cnblogs.com/yoyoketang/


with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=1000)
    context = browser.new_context()  # 创建上下文，浏览器实例1

    page = context.new_page()    # 打开标签页
    page.goto("https://www.baidu.com/")
    print(page.title())
    page.screenshot(path="screenshot.png")

于是就可以看到截图了

截长图

设置full_page=True 参数 screenshot 是一个完整的可滚动页面的屏幕截图，就好像你有一个非常高的屏幕并且页面可以完全容纳它。

page.screenshot(path="screenshot.png", full_page=True)

捕获图片数据流

您可以获取包含图像的缓冲区并对其进行后处理或将其传递给第三方像素差异工具，而不是写入文件。

screenshot_bytes = page.screenshot()
print(base64.b64encode(screenshot_bytes).decode())

截取单个元素

有时截取单个元素的屏幕截图很有用

page.locator(".header").screenshot(path="screenshot.png")

使用示例,截图百度页面的form 表单输入框和搜索按钮

from playwright.sync_api import sync_playwright
# 上海悠悠 wx:283340479  
# blog:https://www.cnblogs.com/yoyoketang/


with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=1000)
    context = browser.new_context()  # 创建上下文，浏览器实例1

    page = context.new_page()    # 打开标签页
    page.goto("https://www.baidu.com/")
    print(page.title())
    page.screenshot(path="screenshot.png")

于是最终截图效果