webdriverio-boneyard / webdrivercss

Regression testing tool for WebdriverIO v4
http://webdriver.io
MIT License
616 stars 106 forks source link

Biggest pitfalls and problems using WebdriverCSS #151

Open christian-bromann opened 8 years ago

christian-bromann commented 8 years ago

Please let me know what is most annoying about using WebdriverCSS and what should be changed/improved.

Thanks!

kevinlambert commented 8 years ago

viewportChangePause

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

Blackbaud-PatrickOFriel commented 8 years ago

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.

Jointts commented 8 years ago

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.