Create a test suite of HTML files

0xedward / dom-visualizer

Visualize the DOM tree created by your browser for any HTML input

https://0xedward.github.io/dom-visualizer/

4 stars 1 forks source link

Create a test suite of HTML files #7

Open 0xedward opened 3 years ago

0xedward commented 3 years ago

Use chrome and firefox web driver to inject sample HTML and parse the DOM to see if d3 displayed the DOM tree of the sample input HTML properly
Create browser specific test cases - https://caniuse.com/?cats=HTML5&statuses=all
https://github.com/microsoft/playwright

kelvinlin97 commented 3 years ago

https://docs.google.com/document/d/1WcbUEw5iyeHAOrs2M7SXS0F6CEVtk5Z6q80Y8cl7uN4/edit?usp=sharing Comparison of different testing frameworks with sample code on setup

0xedward commented 3 years ago

Great work! So we need to have our testing framework run a browser in the background (not just executing a javascript function and checking the result), because DOMParser is a browser API.

Also another requirement is that we need to consider support for testing on multiple browsers (Edge, Chromium, Chrome, Safari, Firefox, etc.), because DOMParser may behave differently on each browser and we don't want to have to use multiple testing frameworks to test the browsers we are planning on supporting.

Ideally we use something fast and lightweight, with just the features we need and nothing more, to write end-to-end tests with.

https://blog.checklyhq.com/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison/

kelvinlin97 commented 3 years ago

Gotcha, my bad I misunderstood which testing frameworks to look at. Here's my writeup of the two blogs comparing Selenium, Playwright, Puppeteer, and Cypress. I wrote this at the top of the doc but for our use case, I think Selenium would be the best option. Below is a quick summary of each testing frameworks strengths.

Browser-support:

1) Cypress: Chrome family browsers (including Chromium) and Firefox 2) Selenium: IE, Google Chrome (12+), Safari, Opera, Firefox **Most users use Selenium 3) Playwright: Webkit (Safari), Chrome, and Firefox 4) Puppeteer: Specific to Chrome

Speed:

1) Less back-end: Puppeteer 2) More back-end + full live website: Playwright 3) Selenium comes third (1.5x slower than other testing frameworks on average)

Local testing focus:

Cypress (considerably slower on live websites e2e testing)

0xedward commented 3 years ago

Test cases for use to include:

comment: 
doctype: <!DOCTYPE html>
missing closing tags: <html><script>alert(1)</script><body><p>text
multiple head tags: <html><head></head><head></head></html>
root: <html></html>
tags with attributes: <html><head><meta description="test attribute"></head></html>

We should also include MathML, SVG and table tags in our tests because of weird side effects they cause with the HTML parser