柚子快報邀請碼778899分享：Selenium圖表自動化開篇

http://yzkb.51969.com/

目錄

前言：?

使用 Canvas 或者 SVG 渲染

選擇哪種渲染器

代碼觸發(fā) ECharts 中組件的行為

前言：?

? 圖表自動化一直以來是自動化測試中的痛點，也是難點，痛點在于目前越來越多公司開始構建自己的BI報表平臺但是沒有合適的自動化測試工具去做測試支持，而圖表的測試工作量冗余繁重，一個新功能或者一個小小的改動也會引起意想不到的問題，讓測試人員不堪重負，回歸亞歷山大。

? 難點在于目前業(yè)界主流的UI自動化測試工具無論是老牌的Selenium、還是新貴Playwright、Cpress等框架都沒有圖表操作相關的API，也足以看出圖表自動化并不是一個可以標準化的東西，因為圖表元素在這些框架看來就是一個黑盒子，至于黑盒子里面是什么圖形那就不得而知了，因為圖表元素對HTML暴露的只有一個canvas元素或者svg元素，然而canvas和svg都是使用JavaScript使用代碼畫出來的，而目前UI自動化框架的操作基本都是基于HTML層去操作的，所以圖表里面的東西當然是操控不了的。

? 那么我們真的沒有辦法去做了嗎？非也，小編將結合自己實際工作經驗來給讀者撥開云霧見青天，讓大家看清圖表自動化測試的廬山真面目！

? 孫子兵法有云：知己知彼百戰(zhàn)百勝。誠然自動化測試也是這樣，我們首先要搞清楚目前市面上主流的圖表庫用的什么技術。目前市場上主流的圖表庫有：Echarts（百度開源的框架）、HighCharts、D3.js、Chart.js、AntV（螞蟻開源的框架）等。每個框架的技術棧有些差異，但是基本都是基于canvas技術和svg繪圖技術去實現(xiàn)的圖表繪制。例如Echarts主要是基于Canvas技術實現(xiàn)的,4.0+的版本也支持svg渲染圖表，而HighCharts、AntV主要基于SVG技術實現(xiàn)的繪圖。

使用 Canvas 或者 SVG 渲染

瀏覽器端圖表庫大多會選擇 SVG 或者 Canvas 進行渲染。對于繪制圖表來說，這兩種技術往往是可替換的，效果相近。但是在一些場景中，他們的表現(xiàn)和能力又有一定差異。于是，對它們的選擇取舍，就成為了一個一直存在的不易有標準答案的話題。

ECharts 從初始一直使用 Canvas 繪制圖表。而 ECharts v4.0 發(fā)布了 SVG 渲染器，從而提供了一種新的選擇。在初始化圖表實例時，只需設置 renderer 參數(shù) 為 'canvas' 或 'svg' 即可指定渲染器，比較方便。

SVG 和 Canvas 這兩種使用方式差異很大的技術，能夠做到同時被透明支持，主要歸功于 ECharts 底層庫 ZRender 的抽象和實現(xiàn)，形成可互換的 SVG 渲染器和 Canvas 渲染器。

選擇哪種渲染器

一般來說，Canvas 更適合繪制圖形元素數(shù)量較多（這一般是由數(shù)據(jù)量大導致）的圖表（如熱力圖、地理坐標系或平行坐標系上的大規(guī)模線圖或散點圖等），也利于實現(xiàn)某些視覺 特效。但是，在不少場景中，SVG 具有重要的優(yōu)勢：它的內存占用更低（這對移動端尤其重要）、并且用戶使用瀏覽器內置的縮放功能時不會模糊。

選擇哪種渲染器，我們可以根據(jù)軟硬件環(huán)境、數(shù)據(jù)量、功能需求綜合考慮。

在軟硬件環(huán)境較好，數(shù)據(jù)量不大的場景下，兩種渲染器都可以適用，并不需要太多糾結。在環(huán)境較差，出現(xiàn)性能問題需要優(yōu)化的場景下，可以通過試驗來確定使用哪種渲染器。比如有這些經驗：

在需要創(chuàng)建很多 ECharts 實例且瀏覽器易崩潰的情況下（可能是因為 Canvas 數(shù)量多導致內存占用超出手機承受能力），可以使用 SVG 渲染器來進行改善。大略的說，如果圖表運行在低端安卓機，或者我們在使用一些特定圖表如 水球圖 等，SVG 渲染器可能效果更好。數(shù)據(jù)量較大（經驗判斷 > 1k）、較多交互時，建議選擇 Canvas 渲染器。

代碼觸發(fā) ECharts 中組件的行為

所以我們既然已經知道了圖表庫的技術棧就知道如何對癥下藥了，解鈴還須系鈴人我們一般使用圖表庫提供的API并結合UI自動化框架的JS代碼執(zhí)行來進行圖表自動化操作。例如項目使用了Echarts做圖表展現(xiàn)，那么我們就可以使用Echarts暴露的API來做自動化操作：Documentation - Apache EChartsApache ECharts，一款基于JavaScript的數(shù)據(jù)可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。https://echarts.apache.org/zh/api.html#echarts代碼觸發(fā) ECharts 中組件的行為https://echarts.apache.org/handbook/zh/concepts/event

Echarts官方提供了一些簡單的示例操作，但是這是遠遠不夠的，我們需要拿到Echarts的實例來對圖表實例進行操作如上圖，一般項目都會將圖表實例隱藏以提高頁面響應性能，所以如果我們在實際自動化工程中需要讓研發(fā)童鞋暴露圖表的實例供我們來展開自動化測試。通過實例我們能夠拿到一些圖表中的數(shù)據(jù)和坐標，因為圖表都是畫出來的，所以這些坐標和數(shù)據(jù)都是極其重要的是我們后續(xù)開展自動化測試的關鍵。

對于使用非echarts的圖表庫的項目也可以按照此方法實施，小編將在后續(xù)文章中逐步展開講解如何進行餅圖、柱狀圖、折線圖的自動化測試~

柚子快報邀請碼778899分享：Selenium圖表自動化開篇

http://yzkb.51969.com/

參考閱讀