...
You can test against any Selenium-supported browser by setting properties inside ~/.test.properties, or passing them as Java properties to the JVM. But by default the tests will run using the Phantomjs headless Chrome Headless browser. This means that this needs chrome and chromedriver need to be installed on whatever station DomUI is built on - see the Phantomjs website for details.on, as follows:
- Install Chrome as usual
- Download the latest chromedriver from here.
- Unzip the file. This will give you a single file, "chromedriver".
- Copy this file to some directory on your PATH, like /usr/bin for Linux, or ~/bin if you have no rights.
Using Headless Chrome
Since Chrome 59 we can also use Chrome in headless mode, and as PhantomJS development has been abandoned this is now the default.
There are some issues with using chrome. The most important issue is that ChromeDriver/Chrome does not properly take screenshots. Unlike the other drivers chrome takes only partial screenshots of the page, and that breaks some tests and makes bugs harder to find.
To circumvent this issue the DomUI wrapper around WebDriver has a special implementation of the code that creates a screenshot for Chrome. The code is described on Stackoverflow.
Alternative: using Phantomjs
You can also use PhantomJS as the headless test platform. Just install the "phantomjs" executable in some directory in your PATH, and define webdriver.hub=phantomjs in .test.properties or on the command line (-Dwebdriver.hub=phantomjs).
Sadly enough PhantomJS is no longer supported because the main developer quit 8-/
| Warning |
|---|
Please install phantomjs from the website, and do not use your distribution's version of it (so do not use apt-get). The distributions often distribute handicapped versions causing odd test failures. |
Using HTMLUNIT
I moved to Phantomjs because its alternative, htmlunit, does not allow screenshots to be taken from the pages, and this makes a lot of tests hard to use. But it can still be used, with the effect that some tests will not really work.
Test helper base classes
...
But there are tests that we cannot do with this. A good example is the test for the HtmlEditor. This component contains a lot of Javascript, and the actual DomUI node (a TextArea) actually gets replaced by an IFRAME by the editor's Javascript. Other tests require that a layout is fully correct, and that is also difficult to do with just DOM matching.
For this we can use Selenium/Phantomjs's ability to take screenshots. Using screenshots of a rendered page we can load the screenshot, then use Selenium's knowledge of the position and size of a web page element to extract from the screenshot the actual rendering of the component as a bitmap. This bitmap can then be further analyzed.
Tests and the Travis-CI build
Failed test screenshots
The UI tests that run during the build will make screenshots for those tests that fail. These screenshots are stored inside the [module]/target/failsafe-reports directory as classname_testname.png, for instance:
| Code Block |
|---|
display ./to.etc.domui.demo/target/failsafe-reports/ITTestLookupInput_testInitialLayout.png |
If the build fails all of the failsafe-reports directories are collected and tarred, and these are copied to the deployment server so that they can be obtained (they are copied to deployer@xxx/reports.tgz).
The version of phantomjs inside the build
Travis-CI has phantomjs default in its image, but that is an older version (2.0.0). To ensure that we have the same results locally and in the build the build script will download version 2.1.1 of phantomjs and cause it to be used by setting the PATH to it.