Open christian-bromann opened 8 years ago
We have come across rendering issues when using multiple breakpoints. When WebdriverCSS resizes the window - images, fonts, content are resized. It can take a while for the browser to re-paint. However WebdriverCSS takes the screenshot before the browser has finished rendering properly. This tends to be more of an issue with images but fonts can be problematic too.
The result is rendering is inconsistent between test runs. This is particularly noticeable between taking the baseline and the next test run.
Our solution was to add a viewportChangePause
property to the config file. This allows for the browser to pause for a number of milliseconds in order to render fully.
plugins: {
webdrivercss: {
screenshotRoot: 'myTest',
failedComparisonsRoot: 'myTest/diff',
screenWidth: [340, 480, 800, 1200],
misMatchTolerance: 0.10,
viewportChangePause: 800
}
},
Code: https://github.com/kevinlambert/webdrivercss/commit/08c40709e89a86aae9b07c24e77f784a17b49253
https://github.com/kevinlambert/webdrivercss/commit/23fd34d041a56e6737a664bd5f6ff7c6f69064ae
https://github.com/kevinlambert/webdrivercss/commit/8852d32ffb1252ad6bd07452d83479e97cdc9480
When taking a screenshot, when I have specified a screenWidth, Every test calls setViewportWidth, even if they are all set to something like 1280px (the width doesn't change between tests). This adds significant time to every run.
Also, when the screen resizes, it tends to grow and shrink, which can mess up whatever click or hover or other event that was launched before webdrivercss was called.
You should also be able to specify automatic screenshot name prefixes for different browsers. If you are running these tests in browserstack in both firefox and chrome, then not having the prefixes will cause incorrect comparisons to occur.
Why is not the fix from kevinlambert implemented? The fact that multiple screen widths produce incorrect results should be an critical error for this library.
Please let me know what is most annoying about using WebdriverCSS and what should be changed/improved.
Thanks!