图表自动化开篇

目录

前言: 

使用 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/681107.shtml

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

相关文章

BLE蓝牙安全机制

1. 蓝牙配对 蓝牙配对是建立安全连接的关键过程。对于传统蓝牙应采用SSP配对方式,而低功耗蓝牙4.0和4.1的版本应使用legacy pairing配对方式,4.2以后的版本应采用Secure connection的配对方式。 传统的蓝牙采用的配对方式如下: 蓝牙2.1版本…

1012: 【C1】【循环】【入门】均值

题目描述 给出一组样本数据,计算其均值。 输入 输入有两行,第一行包含一个整数n(1<n<100),代表样本容量;第二行包含n个绝对值不超过1000的浮点数,代表各个样本数据。 …

《Linux 简易速速上手小册》第4章: 包管理与软件安装(2024 最新版)

文章目录 4.1 包管理基础4.1.1 重点基础知识4.1.2 重点案例:在 Ubuntu 上安装和管理软件4.1.3 拓展案例 1:添加软件仓库4.1.4 拓展案例 2:回滚软件到旧版本 4.2 使用 APT 与 YUM4.2.1 重点基础知识4.2.2 重点案例:在 Ubuntu 上配置…

排序刷题11

题目来源:[NOIP1998 提高组] 拼数 - 洛谷 解题思路:这道题重点在于怎么把数字拼接,得到最大的值。这里可以用to_string()函数,将数字先转换为字符再拼接,最后得到拼接的最大值。ps:…

Kong 负载均衡

负载均衡是一种将API请求流量分发到多个上游服务的方法。负载均衡可以提高整个系统的响应速度,通过防止单个资源过载而减少故障。 在以下示例中,您将使用部署在两台不同服务器或上游目标上的应用程序。Kong网关需要在这两台服务器之间进行负载均衡&…

2024年华为OD机试真题-求幸存数之和-Java-OD统一考试(C卷)

题目描述: 给一个正整数列 nums,一个跳数 jump,及幸存数量 left。运算过程为:从索引为0的位置开始向后跳,中间跳过 J 个数字,命中索引为J+1的数字,该数被敲出,并从该点起跳,以此类推,直到幸存left个数为止。然后返回幸存数之和。 约束: 1)0是第一个起跳点。 2)起…

Java中,List、Map和Set的区别是什么?

在Java中,List、Map和Set是三种常用的集合类型,它们之间的主要区别如下: 1、List List是有序集合,它可以包含重复元素。 List中的元素是按照插入顺序排列的,可以通过索引访问每个元素。 Java中常见的List实现类有A…

简单易懂:一篇文章讲透所有Python知识

Python语法简单,应用领域广,本文给出 Python八大核心知识点,供大家迅速上手,建议收藏。 第一部分:基础语法 # 6种数据类型# 整数、浮点数、字符串 x 2 y 3.1415926 name "You jump, I jump"# 列表、元组…

嵌入式Qt 计算器界面设计

一.计算器界面设计 计算机界面程序分析&#xff1a; 需要用到的组件&#xff1a; 界面设计&#xff1a; 界面设计实现&#xff1a; 实验1&#xff1a;计算器界面设计 #include <QtGui/QApplication> #include <QWidget> //主窗口 #include <QLineEdit> //文…

2024年2月5日-2月11日周报

论文阅读 1. 本周计划2. 完成情况2.1 论文摘要2.2 网络结构2.3 损失函数2.4 优化器2.5 代码2.5.1 代码结果2.5.2 代码大致流程 4. 总结及收获4. 下周计划 1. 本周计划 阅读论文《Data-Driven Seismic Waveform Inversion: A Study on the Robustness and Generalization》并实…

桥接模式:连接抽象与实现的设计艺术

桥接模式&#xff1a;连接抽象与实现的设计艺术 在软件开发中&#xff0c;设计模式是帮助我们以优雅的方式解决问题的模板。桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;它的主要目标是将抽象部分与实现部分分离&#xff0c;这样两者可以…

五.实战软件部署 1-3实战章节-前言MYSQL 5.7版本在centos系统安装MYSQL 8.0版本在centos系统安装

目录 五.实战软件部署 1-实战章节-前言 五.实战软件部署 2-MYSQL 5.7版本在centos系统安装 1-配置yum仓库 2-使用yum安装mysql 3-安装完成后&#xff0c;启动mysql并配置开机自启动 4-检查mysql的运行状态 --配置 1-获取mysql的初识密码 2-登录mysql数据库系统 3-修改…

限制资源使用

限制资源使用 您需要显示对服务器资源的访问来保护Web应用程序和应用程序数据不受未授权用户的访问。在Java EE Web应用程序中,您可以通过在应用服务器中创建用户和用户组来保护资源免受未经授权的访问。您可以为应用程序定义角色并在部署过程中将角色分配给用户。 1. 创建授权…

2024.2.9

作业1 请使用递归实现n&#xff01; #include<stdio.h> #include<string.h> #include<stdlib.h>int fun(int m) {if(m0)return 1;else{return m*fun(m-1);} } int main(int argc, const char *argv[]) {int m;printf("please enter m:");scanf(&…

软件测试 - 测试用例设计方法之等价类划分和边界值分析

1. 等价类划分法 1.1 基本理论 等价类划分法是通过科学的方法找到具有共同特性的测试输入的集合&#xff0c;避免进行穷举测试&#xff0c;大大减少了测试用例的数量&#xff0c;从而提高测试效率。等价类划分法的典型应用场景就是输入框&#xff0c;适用于较少数量输入框的场…

【学习笔记】TypeScript编译选项

TS 中的编译选项 我们写了一个TS的文件&#xff0c;我们需要使用如下的命令将我们的TS文件转换为JS文件。 tsc xxx.ts 这样会产生一个对应的js文件 自动编译文件 编译文件时&#xff0c;使用 -W 指令后&#xff0c;TS编译器会自动监视文件的变化&#xff0c;并在文件发生变…

I.MX6U C语言运行环境构建及驱动开发格式

1.设置处理器模式 设置6ULL处于SVC模式下。设置下CPSR寄存器的bit4-0,也就是M[4:0]为100110x13.。读写状态寄存器需要用到MRS和MSR指令。MRS将CPSR寄存器数据读出到通用寄存器里面&#xff0c;MSR指令将通用寄存器的值写入到CPSR寄存器里面去。 2.设置SP指针 SP可以指向内部…

数据结构与算法:单链表

朋友们大家好&#xff0c;本节来到数据结构与算法的新内容&#xff1a;单链表 在上篇文章中&#xff0c;我们知道顺序表通常需要预分配一个固定大小的内存空间&#xff0c; 通常以二倍的大小进行增容&#xff0c;可能会造成空间的浪费&#xff0c;本篇文章我们介绍的链表可以解…

leetcode刷题(模拟问题)

题一&#xff1a;替换所有的问号 1.链接 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; 2.思路 这道题&#xff0c;最重要的就是理解什么是连续重复的字符 连续重复字符是指&#xff1a;相同字母连在一起多次出现 先遍历这个数组&#xff0c;去找到 &#x…

C语言每日一题(56)平衡二叉树

力扣网 110 平衡二叉树 题目描述 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,…