You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/01/21 11:58:51 UTC

[GitHub] [echarts] msbasanth removed a comment on issue #13635: Test Automation (E2E) Support from ECharts

msbasanth removed a comment on issue #13635:
URL: https://github.com/apache/echarts/issues/13635#issuecomment-764594510


   @pissang thanks for pointing to regression tests.
   
   I had a look into the current test automation possibilities with ECHarts. 
   
   **Observations**
   
   Open Questions:
   •	how do I click on an echarts series?
   •	How to trigger specific pointer events (click, mouse up, …) on echarts objects?
   
   **E2E in SVG Based Charts** 
   
   * In comparison to other SVG based charts support for e2e automation using objects inside the charts is minimal in ECharts. Reason is we will not find proper selectors for reaching the elements inside ECharts.
   * DOM structure of charts created using ECharts differ according to the renderer used (SVG or Canvas).
   
   _Example DOM structure - HighCharts_
   ![image](https://user-images.githubusercontent.com/17777813/105347876-832c9780-5c0d-11eb-8c70-3f597d8a220d.png)
   
   _Example DOM structure - ECharts_
   ![image](https://user-images.githubusercontent.com/17777813/105347558-17e2c580-5c0d-11eb-8172-e369bd5378b6.png)
   
   This is what we see when tried to access SVG elements inside ECharts. As you could see it is very difficult to locate a particular object as there is no proper locators available. Using nth-child will make the test script tough to maintain generally not recommended
   ![image](https://user-images.githubusercontent.com/17777813/105348031-bd963480-5c0d-11eb-86c9-994b7719ac9f.png)
   
   **Visual Regression Testing – The ECharts way of filling the gap of functional testing**
   ECharts team they use puppeteer and their visual regression testing tool for checking the visual expectations.
    
   ![Uploading image.png…]()
   
   ECharts they are using pixelmatch (https://www.npmjs.com/package/pixelmatch) for their image comparisons.
   Find more details in their repository. @ echarts\test\runTest\compareScreenshot.js
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org