spike - improvement on visual regression

the current percy visual regression has several issues in terms of execution time and false alert(noise):

1. the snapshot is mostly taken at the top level of each chapter route, which produces a super long snapshot image. it’s not obvious to catch the minor diff
2. there are some hardcoded time.sleep(5) which should be replaced by implicit_wait
3. there is no easy way to ignore certain flakey area by either css selector or fixed region coordinates, need to investigate more on percy docs, or trial on applitools
4. lack of IE testings, @cldougl mentioned ideally we should test at least the last two edge versions

@plotly/dash-core comments are welcome

• change the datetime.now() case in demo #423 #425
• reduce the execution time with `driver.implicitly_wait(2) #427

[wbrgss]

In another project (plotly/dash-design-kit#680, private repo) @markzporter used Percy-specific CSS to add visibility: hidden to the problematic elements, with a visibility: visible pseudo-element that indicated the hidden element should be ignored in manual review of Percy snapshots.

[alexcjohnson]

Oh interesting indeed - I was about to suggest converting to an image actually, we’ve done similar stuff in plotly.js to push webgl output to a static image. Some of the other repos have a percy_snapshot method in their IntegrationTests inherited class, if this works we should just build it in there; convert every <canvas> to an <img>, take the snapshot, then remove the <img> tags and put <canvas> back where it was.

Enabling JS is unlikely to be useful, that’ll only be able to run things that happen on page load.