Selenium图表自动化开篇

目录

前言: 

使用 Canvas 或者 SVG 渲染

选择哪种渲染器

代码触发 ECharts 中组件的行为


前言: 

  图表自动化一直以来是自动化测试中的痛点,也是难点,痛点在于目前越来越多公司开始构建自己的BI报表平台但是没有合适的自动化测试工具去做测试支持,而图表的测试工作量冗余繁重,一个新功能或者一个小小的改动也会引起意想不到的问题,让测试人员不堪重负,回归亚历山大。

  难点在于目前业界主流的UI自动化测试工具无论是老牌的Selenium、还是新贵Playwright、Cpress等框架都没有图表操作相关的API,也足以看出图表自动化并不是一个可以标准化的东西,因为图表元素在这些框架看来就是一个黑盒子,至于黑盒子里面是什么图形那就不得而知了,因为图表元素对HTML暴露的只有一个canvas元素或者svg元素,然而canvas和svg都是使用JavaScript使用代码画出来的,而目前UI自动化框架的操作基本都是基于HTML层去操作的,所以图表里面的东西当然是操控不了的。

  那么我们真的没有办法去做了吗?非也,小编将结合自己实际工作经验来给读者拨开云雾见青天,让大家看清图表自动化测试的庐山真面目!

  孙子兵法有云:知己知彼百战百胜。诚然自动化测试也是这样,我们首先要搞清楚目前市面上主流的图表库用的什么技术。目前市场上主流的图表库有:Echarts(百度开源的框架)、HighCharts、D3.js、Chart.js、AntV(蚂蚁开源的框架)等。每个框架的技术栈有些差异,但是基本都是基于canvas技术和svg绘图技术去实现的图表绘制。例如Echarts主要是基于Canvas技术实现的,4.0+的版本也支持svg渲染图表,而HighCharts、AntV主要基于SVG技术实现的绘图。

使用 Canvas 或者 SVG 渲染

浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。

ECharts 从初始一直使用 Canvas 绘制图表。而 ECharts v4.0 发布了 SVG 渲染器,从而提供了一种新的选择。在初始化图表实例时,只需设置 renderer 参数 为 'canvas''svg' 即可指定渲染器,比较方便。

SVG 和 Canvas 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 ZRender 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。

选择哪种渲染器

一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 特效。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。

选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。

  • 在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。
  • 在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:
    • 在需要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力),可以使用 SVG 渲染器来进行改善。大略的说,如果图表运行在低端安卓机,或者我们在使用一些特定图表如 水球图 等,SVG 渲染器可能效果更好。
    • 数据量较大(经验判断 > 1k)、较多交互时,建议选择 Canvas 渲染器。

代码触发 ECharts 中组件的行为

所以我们既然已经知道了图表库的技术栈就知道如何对症下药了,解铃还须系铃人我们一般使用图表库提供的API并结合UI自动化框架的JS代码执行来进行图表自动化操作。例如项目使用了Echarts做图表展现,那么我们就可以使用Echarts暴露的API来做自动化操作:Documentation - Apache EChartsApache ECharts,一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。icon-default.png?t=N7T8https://echarts.apache.org/zh/api.html#echarts代码触发 ECharts 中组件的行为icon-default.png?t=N7T8https://echarts.apache.org/handbook/zh/concepts/event

Echarts官方提供了一些简单的示例操作,但是这是远远不够的,我们需要拿到Echarts的实例来对图表实例进行操作如上图,一般项目都会将图表实例隐藏以提高页面响应性能,所以如果我们在实际自动化工程中需要让研发童鞋暴露图表的实例供我们来展开自动化测试。通过实例我们能够拿到一些图表中的数据和坐标,因为图表都是画出来的,所以这些坐标和数据都是极其重要的是我们后续开展自动化测试的关键。

对于使用非echarts的图表库的项目也可以按照此方法实施,小编将在后续文章中逐步展开讲解如何进行饼图、柱状图、折线图的自动化测试~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/683246.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Shell 学习笔记(三)-shell变量

Shell 语言是一种动态类型和弱类型语言, 因此,在Shell中无需显示地声明变量, 且变量的类型会根据不同的操作符而发生变化. 静态类型语言: 在程序编译期间就确定变量类型的语言, 如java, C等 动态类型语言: 在程序运行期间才确定变量类型的语言, 如PHP, Python等. 一 shell变量…

高中信息技术—数据采集与编码(一)

计算机技术的应用,使得数据的处理方式发生了巨大的转变,要用计算机处理这些数据,需要对采集到的数据进行一定的转换。 采集方式 1.人工采集—观察、实验 2.机器采集 互联网—网络爬虫 传感器—自然信源 数字化 信息可用模拟信号或数字信号表…

MySQL学习记录——구 复合查询

文章目录 1、基本查询2、多表查询3、自连接4、子查询1、多行子查询2、多列子查询3、from句中的子查询 5、合并查询 1、基本查询 看一些例子,不关心具体内容,只看写法 //查询工资高于500或岗位为MANAGER的雇员, 同时还要满足他们的姓名首字母为大写的J …

Docker的常见命令以及命令别名

常见命令 命令说明docker pull拉取镜像docker push推送镜像到DockerRegistrydocker images查看本地镜像docker rmi删除本地镜像docker run创建并允许容器docker stop停止指定容器docker start启动指定容器docker restart重新启动容器docker rm删除指定容器docker ps查看容器do…

ClickHouse--04--数据库引擎、Log 系列表引擎、 Special 系列表引擎

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1.数据库引擎1.1 Ordinary 默认数据库引擎1.2 MySQL 数据库引擎MySQL 引擎语法字段类型的映射 2.ClickHouse 表引擎3.Log 系列表引擎几种 Log 表引擎的共性是&#…

opencv通道分离与合并

void QuickDemo::channels_demo(Mat & image) {std::vector<Mat>mv;//通道分离合并split(image,mv);//原图 指针(Mat)imshow("蓝色", mv[0]);imshow("绿色", mv[1]);imshow("红色", mv[2]); } split(image,mv);//原图 指针(Mat) 这里…

学习笔记20:牛客周赛32

D 统计子节点中1的个数即可&#xff08;类似树形dp&#xff1f;&#xff09; #include<iostream> #include<cstring> #include<cmath> #include<algorithm> #include<queue> #include<vector> #include<set> #include<map>u…

Rust 数据结构与算法:5栈:用栈实现前缀、中缀、后缀表达式

3、前缀、中缀和后缀表达式 计算机是从左到右处理数据的,类似(A + (B * C))这样的完全括号表达式,计算机如何跳到内部括号计算乘法,然后跳到外部括号计算加法呢? 一种直观的方法是将运算符移到操作数外,分离运算符和操作数。计算时先取运算符再取操作数,计算结果则作为…

HTML5+CSS3+JS小实例:锥形渐变彩虹按钮

实例:锥形渐变彩虹按钮 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /…

maven创建webapp+Freemarker组件的实现

下载安装配置maven Maven官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘123云盘为您提供Maven最新版正式版官方版绿色版下载,Maven安卓版手机版apk免费下载安装到手机,支持电脑端一键快捷安装https://www.123pan.com/s/9QRqVv-TcUY.html链接为3.6.2-3.6.3的版本 下载解…

LLVM的中间表示

概括 选择编译器IR的决策很重要&#xff0c;它决定了优化过程将拥有多少信息来使代码运行得更快。 一方面非常高层级的IR允许优化器轻松地提取原始源代码的相关信息。 另一方面&#xff0c;低层的IR更加贴近目标机器&#xff0c;这样编译器更容易为特定的硬件生成相应的代码…

RH850从0搭建Autosar开发环境【2X】- Davinci Configurator之XCP模块配置详解(上)

XCP模块配置详解 - 上 一、XCP模块配置项处理1.1 Tx Pdu配置项二、XCP模块其他配置项2.1 参数XcpMainFunctionPeriod2.2 参数XcpOnCanEnabled2.3 容器XcpOnCan总结从本节开始先专注与配置项错误处理以及构建Autosar Rh850的最小系统搭建。 XCP模块在汽车电子各控制器中处于十分…

【Java记】数据类型与变量

一、数据类型 在Java中数据类型主要分为两类&#xff1a;基本数据类型和引用数据类型。基本数据类型有四类八种&#xff1a; 四类&#xff1a;整型、浮点型、字符型以及布尔型八种&#xff1a; 数据类型 关键字 内存占用 范围 字节型 byte 1 字节 -128~ 127 短整型 …

高程 | 数组、指针与字符串(c++)

文章目录 &#x1f4da;数组&#x1f407;数组的概念&#x1f407;数组的声明与使用&#x1f407;数组的存储与初始化&#x1f407;数组作为函数参数&#x1f407;对象数组 &#x1f4da;指针&#x1f407;内存空间的访问方式&#x1f407;指针变量的声明&#x1f407;指针运算…

蓝桥杯嵌入式第10届真题(完成) STM32G431

蓝桥杯嵌入式第10届真题(完成) STM32G431 题目 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body********************************…

【C语言】指针练习篇(下),深入理解指针---指针练习题【图文讲解,详细解答】

欢迎来CILMY23的博客喔&#xff0c;本期系列为【C语言】指针练习篇&#xff08;下&#xff09;&#xff0c;深入理解指针---指针练习题【图文讲解,详细解答】&#xff0c;图文讲解指针练习题&#xff0c;带大家更深刻理解指针的应用&#xff0c;感谢观看&#xff0c;支持的可以…

文件操作详解

文章目录 目录1. 为什么使用文件2. 什么是文件2.1 程序文件2.2 数据文件2.3 文件名 3. 文件的打开和关闭3.1 文件指针3.2 文件的打开和关闭 4. 文件的顺序读写5. 通讯录的改造6. 文件的随机读写6.1 fseek6.2 ftell6.3 rewind 7. 文本文件和二进制文件8. 文件读取结束的判定9. 文…

『运维备忘录』之 Lsof 命令详解

运维人员不仅要熟悉操作系统、服务器、网络等只是&#xff0c;甚至对于开发相关的也要有所了解。很多运维工作者可能一时半会记不住那么多命令、代码、方法、原理或者用法等等。这里我将结合自身工作&#xff0c;持续给大家更新运维工作所需要接触到的知识点&#xff0c;希望大…

Excel模板2:进度条甘特图

Excel模板2&#xff1a;进度条甘特图 ‍ 今天复刻B站up【名字叫麦兜的狗狗】的甘特图&#xff1a;还在买Excel模板吗&#xff1f;自己做漂亮简洁的甘特图吧&#xff01;_哔哩哔哩_bilibili 阿里网盘永久分享&#xff1a;https://www.alipan.com/s/cXhq1PNJfdm 当前效果&…

《剑指offer》--字符串左旋【超详细建议收藏】

字符串左旋的三种方法 1. 一个一个字符挪2. 库函数---strcpy和strncat3. 三段逆置法 1. 一个一个字符挪 代码实现如下&#xff1a; #include <stdio.h> #include <string.h>void Left_Reverse(char* str,int k) {int len strlen(str);//6int time 0;time k % …