Playwright元素截图并保存至allure的实现示例

目录
  • 引言
  • 问题分析
  • 快速截图：
  • 代码示例（以Playwright为例）

引言

在UI自动化测试中，我们经常需要获取屏幕截图，尤其是在CI环境中，一般是使用浏览器的无头模式执行测试，此时对关键步骤进行页面截图就很重要了。通常自动化框架都提供了页面截图功能，但是基本都是只提供了页面整体的截图或者对页面元素单独截图，无法做到在页面整体截图中将我想要的元素标记出来（比如红框标出），而这种截图在某些预期结果的场景下需要经常用到，比如人工辅助结果判断，或者在结果判断不正确时标记出不正确的元素以帮助错误排查。因此，在项目中单独封装了标记元素的截图方法。

问题分析

  • 获取屏幕截图：这个很简单，直接通过 page.screenshot 方法就可以获得
  • 获取元素位置：通过 ElementHandle.bounding_box 获得元素的边界信息
  • 在截图中标记出元素：通过PIL（python3使用pillow库）和获取到的元素位置将元素标记出来
  • 在报告中展示：这里选用的是allure作为测试报告框架，将最终结果保存至allure报告即可

需要注意的是，由截图生成 PIL.Image 对象，和编辑之后保存至allure，都需要通过 io.BytesIO 进行中转

快速截图：

screenshot方法可以进行截图，参数如下:

timeout:以毫秒为单位的超时时间，0为禁用超时

path:设置截图的路径

type：图片类型，默认jpg

quality：像素，不适用于jpg

omit_background: 隐藏默认白色背景，并允许捕获具有透明度的屏幕截图。不适用于“jpeg”图像。

full_page：如果为true，则获取完整可滚动页面的屏幕截图，而不是当前可见的视口。默认为`假`。

clip：指定结果图像剪裁的对象clip={'x': 10 , 'y': 10, 'width': 10, 'height': 10}

代码示例（以Playwright为例）

from io import BytesIO

import allure
from PIL import Image, ImageDraw
from playwright.sync_api import sync_playwright

def highlight_screenshot(page, element, tips='高亮截图'):
    # 滚动页面将元素移动到视野中
    element.scroll_into_view_if_needed()

    # 获取元素的位置信息
    box = element.bounding_box()
    x, y, width, height = box['x'], box['y'], box['width'], box['height']

    # 获取页面截图，并读取为PIL.Image对象
    png = page.screenshot(type='png')
    img = Image.open(BytesIO(png))

    # 利用元素的位置信息在页面截图中标记出元素
    draw = ImageDraw.Draw(img)
    draw.rectangle((x, y, x + width, y + height), outline='red', width=3)

    # 将标记后的截图保存至allure报告中
    with BytesIO() as output:
        img.save(output, format='png')
        allure.attach(output.getvalue(), tips, allure.attachment_type.PNG)

def test_screenshot():
    with sync_playwright() as pw:
        # 打开百度进行搜索
        browser = pw.chromium.launch()
        page = browser.new_page()
        page.goto('https://www.baidu.com')  # 跳转至百度页面
        page.fill('#kw', 'playwright 选择器')  # 搜索框中输入内容
        page.click('#su')  # 点击搜索按钮

        # 等待搜索结果加载
        page.wait_for_load_state('networkidle')

        # 判断当前页面显示10条搜索结果
        results = page.query_selector_all('h3')
        assert len(results) == 10

        # 将当前页面的搜索结果分别进行截图
        for i, result in enumerate(results):
            highlight_screenshot(page, result, f'搜索结果{i}')

上面以百度搜索为例，将所有搜索结果分别进行截图，最终报告效果如下：

到此这篇关于Playwright元素截图并保存至allure的实现示例的文章就介绍到这了,更多相关Playwright元素截图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 如何使用Playwright对Java API实现自动视觉测试

    微软新的端到端浏览器自动化框架Playwright引起了轰动!仅在几个月前,我才试玩了Playwright,当时它是一个仅JavaScript的框架,当得知语言支持已经扩展到我心爱的Java以及Python和C#时,我感到非常惊喜. 借助额外的语言支持以及跨现代浏览器引擎Chromium,Firefox和WebKit执行的能力,这使Playwright与Selenium WebDriver处于同一类别,成为所有需要交叉测试的Web测试人员(不仅是JS)的可行测试解决方案浏览器测试功能,适用于复杂

  • Playwright快速上手指南(入门教程)

    目录 1. 为什么选择Playwright 1.1 Playwright的优势 1.2 已知局限性 2. Playwright使用 2.1 安装 2.2 自动录制 2.3 定制化编写 2.4 网络拦截(Mock接口),示例如下: 2.6 异步执行,示例如下: 2.7 Pytest结合,示例如下: 2.8 移动端操作,示例如下: 3. 总结 Playwright是由微软公司2020年初发布的新一代自动化测试工具,相较于目前最常用的Selenium,它仅用一个API即可自动执行Chromium.Fi

  • 微软开源最强Python自动化神器Playwright(不用写一行代码)

    微软开源最强Python自动化神器Playwright(不用写一行代码)

    相信玩过爬虫的朋友都知道selenium,一个自动化测试的神器工具.写个Python自动化脚本解放双手基本上是常规的操作了,爬虫爬不了的,就用自动化测试凑一凑. 虽然selenium有完备的文档,但也需要一定的学习成本,对于一个纯小白来讲还是有些门槛的. 最近,微软开源了一个项目叫「playwright-python」,简直碉堡了!这个项目是针对Python语言的纯自动化工具,连代码都不用写,就能实现自动化功能. 可能你会觉得有点不可思议,但它就是这么厉害.下面我们一起看下这个神器. 1. Pl

  • Python开源自动化工具Playwright安装及介绍使用

    Python开源自动化工具Playwright安装及介绍使用

    目录 1.Playwright介绍 2.Playwright安装 3.实操演示 微软开源了一个非常强大的自动化项目叫 playwright-python 它支持主流的浏览器,包含:Chrome.Firefox.Safari.Microsoft Edge 等,同时支持以无头模式.有头模式运行,并提供了同步.异步的 API,可以结合 Pytest 测试框架 使用,并且支持浏览器端的自动化脚本录制. 项目地址:https://github.com/microsoft/playwright-python

  • 如何提取Playwright录制文件中的元素定位信息

    目录 引言 方法研究 提取代码 代码解析 引言 最近组内推行Playwright进行自动化测试,由我封装了一个简单的框架供大家使用.本意是想让大家使用Page Object模式来编写自动化代码的,可是不知道是因为大家嫌麻烦,还是Playwright自带的录制工具太好用,基本上都是先录制,再把录制好的脚本放到框架中执行,结果就是Page Object的优势完全没有享受到,另外我在页面操作中加入了自动等待.重试等优化机制也是,还得在脚本里面一个个处理.由此,我分析大家不愿意用Page Object的

  • python中playwright结合pytest执行用例的实现

    目录 安装pytest插件 编写测试用例 忽略 HTTPS 错误和设置自定义视口大小 持久上下文 playwright结合Pytest为您的 Web 应用程序编写端到端的测试. 安装pytest插件 C:\Users\lifeng01>pip install pytest-playwright Collecting pytest-playwright Using cached pytest_playwright-0.2.2-py3-none-any.whl (9.8 kB) Requiremen

  • python+playwright微软自动化工具的使用

    python+playwright微软自动化工具的使用

    它支持主流的浏览器,包含:Chrome.Firefox.Safari.Microsoft Edge 等,同时支持以无头模式.有头模式运行 playwright-python 提供了同步.异步的 API,可以结合 Pytest 测试框架使用,并且支持浏览器端的自动化脚本录制 项目地址:https://github.com/microsoft/playwright-python 安装playwright-python,执行命令:pip install playwright 安装成功之后,执行命令:p

  • python playwright 自动等待和断言详解

    目录 自动等待及元素执行方法 鼠标双击 获取元素焦点 鼠标悬停 鼠标点击 设置复选框取消或选中 取消已选中复选框取 输入参数 获取元素属性值 获取内部文本 获取内部HTML 获取文本内容 截图 填写文本并触发键盘事件 输入键盘操作 设置select下拉选项 调度事件 检查点(断言) 文字内容断言 内部文字断言 属性断言 复选框断言 js表达式断言 内部HTML断言 元素可见断言 启动状态断言 直接对比断言 总结 自动等待及元素执行方法 操作元素的一系列方法,只要调用了测试夹函数page,就能引出

  • Playwright中如何保持登录状态

    目录 引言 功能实现 结合Pytest 结合Clent-Page Object模式 引言 在编写UI自动化测试用例的时候,通常会采用每个测试用例前打开新页面重新进行登录,以减少用例间的影响,比如一个测试用例执行失败会影响到下一个测试用例的执行,或者下一个用例的开始依赖于上一个用例的结束页面.但是这种方式会使得测试用例的执行时间大幅度上升,尤其是在测试用例划分的颗粒度比较小的时候:加入一个项目中有2000个测试用例,登录操作耗时2秒,那么光耗费在登录上面的时间就有4000秒,达到一个多小时了,严重

  • Playwright元素截图并保存至allure的实现示例

    Playwright元素截图并保存至allure的实现示例

    目录 引言 问题分析 快速截图: 代码示例(以Playwright为例) 引言 在UI自动化测试中,我们经常需要获取屏幕截图,尤其是在CI环境中,一般是使用浏览器的无头模式执行测试,此时对关键步骤进行页面截图就很重要了.通常自动化框架都提供了页面截图功能,但是基本都是只提供了页面整体的截图或者对页面元素单独截图,无法做到在页面整体截图中将我想要的元素标记出来(比如红框标出),而这种截图在某些预期结果的场景下需要经常用到,比如人工辅助结果判断,或者在结果判断不正确时标记出不正确的元素以帮助错误排查

  • python3应用windows api对后台程序窗口及桌面截图并保存的方法

    python的版本及依赖的库的安装 #版本python 3.7.1 pip install pywin32==224 pip install numpy==1.15.3 pip install opencv-python==3.4.2.16 pip install opencv-contrib-python==3.4.2.16 pip install Pillow-PIL==0.1.dev0 对后台窗口截图 #对后台窗口截图 import win32gui, win32ui, win32con

  • Python截图并保存的具体实例

    大家肯定会疑问,为什么需要用python去进行截图保存,或者说是我们的QQ.微信都是自带截图工具的,可以直接拿过来进行使用的,但是事实上,一般在测试的时候,经常会遇到代码报错等问题,这种需要反馈的时候,就需要利用到python自行截图,好啦,下面就是实现的几个操作. 1.selenium for python 实现代码如下: import time from selenium import webdriver driver = webdriver.Chrome() driver.maximize

  • C语言实现可保存的动态通讯录的示例代码

    C语言实现可保存的动态通讯录的示例代码

    目录 一.Contact.h 二.Contact.c 1.判断是否增容 2.初始化通讯录 3.打印 4.增加联系人信息 5.通过名字查找 6.删除联系人信息 7.查找信息 8.修改信息 9.排序 10.清空通讯录 11.保存通讯录为文件 三.text.c 四.错误写法分享 五.动图展示 一.Contact.h #pragma once #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <assert.h> #

  • ssm框架上传图片保存到本地和数据库示例

    本文介绍了ssm框架上传图片保存到本地和数据库示例,主要使用了Spring+SpringMVC+MyBatis框架,实现了ssm框架上传图片的实例,具体如下: 1.前台部分 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head&g

  • IOS实现手动截图并保存

    IOS实现手动截图并保存

    本文实例介绍了iOS手动剪裁图片并保存到相册的详细代码,分享给大家供大家参考,具体内容如下 一.实现效果 1.操作步骤 绘制一个矩形框,弹出一个alertView,提示是否保存图片 点击"是",将图片保存到相册 在相册中查看保存的图片 2.效果图 二.实现思路 1.在控制器的view上添加一个imageView,设置图片 2.在控制器的view上添加一个pan手势 3.跟踪pan手势,绘制一个矩形框(图片的剪切区域) 4.在pan手势结束时,通过alertView提示"是否将

  • Android 保存WebView中的图片示例

    前言 项目中有需求在APP的Webview中长按图片可以保存.后来就去研究一下该怎么实现,顺便整理了一下. WebView基本配置 mWvContent.getSettings().setJavaScriptEnabled(true); mWvContent.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); mWvContent.getSettings().setDomStorageEnabled(false); mWvC

  • js获取触发事件元素在整个网页中的绝对坐标(示例代码)

    如下所示: 复制代码 代码如下: //返回数组类型        function findPosition(oElement) {//oElement 当前元素            if (typeof (oElement.offsetParent) != 'undefined') {                for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {               

  • java求数组元素重复次数和java字符串比较大小示例

    复制代码 代码如下: /** * Name: 求数组中元素重复次数对多的数和重复次数 * Description:  * 数组中的元素可能会重复,这个方法可以找出重复次数最多的数,同时可以返回重复了多少次. * 但需要知道这个数组中最大的元素是多少,如果无法确定,就悲剧啦~ * * @param array目标数组: *           max数组中数据的最大值: * @return 返回一个包含重复次数最多的数(value)和重复次数(maxCount)的map集合: *         

  • iOS中利用KeyChain保存用户信息的方法示例

    iOS中利用KeyChain保存用户信息的方法示例

    前言 说到保存用户名和密码,以前有用过本地的数据库来保存,也接触过用userdefault来保存,后来在一个项目中发现了一个新的方法--用Keychain来保存.下面话不多说了,直接通过示例代码来介绍吧. 方法示例 一.新建一个LYKeychainTool类,导入系统Security框架 ,LYKeychainTool.h文件实现如下: // // LYKeychainTool.h // keyChainTest // // Created by Liyu on 2017/6/2. // Cop

随机推荐