Support retina screens in element.compareScreen()

[vlukashov]

When running tests in a browser (not headless) and the browser window opens on a high-DPI screen (aka retina), the screenshot used by element.compareScreen() is wrong. For example, compare the screenshots of the same grid element from (headless) PhantomJS and Google Chrome.

An expected behavior would be that:

• on a retina screen the element screenshots have double the dimensions compared to the same element screenshots from a non-retina screen
• the 'content' of the element screenshots is the same regardless of the screen device pixel ratio

How to reproduce:

• make sure you have a high DPI screen available (e.g. a MacBook retina screen). This issue does not occur on screens with the device pixel ratio of 1.
• clone this fork of the testbench git repo
• checkout the element-screenshots branch
• build the project skipping all tests: mvn clean install -DskipTests -DskipITs
• install a standalone selenium server (e.g. via npm install selenium-standalone)
• start the standalone selenium server on your local machine (e.g. via selenium-standalone start)
• start the test Vaadin application (cd testbench-integration-tests && mvn jetty:run)
• run the tests from the RetinaElementScreenCompareIT class: cd testbench-integration-tests && mvn failsafe:integration-test -Dit.test=RetinaElementScreenCompareIT
• if you are on Mac verify that the test run completes successfully (Tests run: 2, Failures: 0, Errors: 0, Skipped: 0) and check the reference screenshots with the name starting with 'retina-grid-element_' in the testbench-integration-tests/reference-screenshots folder
• if you are not on Mac the test run would fail since there are no reference screenshots (Tests run: 2, Failures: 2, Errors: 0, Skipped: 0). Check the generated screenshots with the name starting with 'retina-grid-element_' in the testbench-integration-tests/error-screenshots folder.