VISER (VISual vERification) is a prototype designed to automatically classify Responsive Layout Failures (RLFs) as visually observable and non-observable. It takes as input a report generated by ReDeCheck, a DOM-level layout failure detection tool that tests responsively designed web pages, and visually verify 3 types of responsive layout failures. These failures are a result of testing the responsive layout and include elements that overlap each other, overflow their container, or overflow the viewport.
To learn more about ReDeCheck or for installation instruction please visit the dedicated web page at https://github.com/redecheck/redecheck.
You can clone the project repository using a Git client with the following command:
git clone https://github.com/redecheck/viser.git
The directory structure of the repository is as follows:
src- Contains all the source code for the toolresources- Contains the driver used by the tool
VISER makes use of Selenium Webdriver and hence requires Maven, a build automation tool for projects programmed in the Java programming language. In order to build the tool from its source code, you must install Maven on your runtime environment first. If you have Maven already installed, then please skip ahead to the next section. Otherwise, please follow the installation guidelines at https://maven.apache.org/install.html.
Because VISER has been implemented using the Java programming language, we recommend using an integrated development environment (IDE) to build Maven dependencies, compile the source code, programmatically modify two input variables, and run VISER. The instructions for importing VISER as a Maven project in the Eclipse IDE (https://www.eclipse.org/downloads/) are provided.
The pom.xml file provided in the repository will handle most dependencies needed for ReDeCheck to install and run correctly. However, before attempting to run ReDeCheck to test your websites, please ensure your setup is complete with the following requirements:
The driver available in the repository is for use on an Apple machine with Firefox version 46 to match the original experiment in the ReDeCheck publication. If you are using Windows OS, Linux OS, or an alternative or updated browser, you may need to upgrade the selenium version in the pom.xml file and you probably will need to replace the driver with the appropriate version, from the links below:
- https://sites.google.com/a/chromium.org/chromedriver/
- https://github.com/mozilla/geckodriver/releases/
- http://phantomjs.org/
You may also want to read more about Selenium WebDriver at https://www.seleniumhq.org/projects/webdriver/.
- Select "File" → "Import".
- From the project options, select "Maven" → "Existing Maven Projects".
- Select the root directory of VISER. 3.1. You may need to highlight or select the "pom.xml" file to enable "Finish" button.
- Click "Finish" to complete the import (you may need to select the "pom.xml" file).
Since VISER was primarily designed as a proof-of-concept prototype for the research paper, no front-end (graphical or command-lined based) has been developed for the tool. Nevertheless, the tool only expects a modification to two string variables in order to work. They represent a file path to the local repository of the web pages under test and another local path where a ReDeCheck output file exists. They can be found in the main Java class file "Workbench.java". The string "webpagesPath" should point to the local repository of the web pages under test. While the string "reportsPath" is expected to point to the directoy where the ReDeCheck output file exists.
The tool outputs a csv report named "report.csv" and an html-based report "index_X.html". The tool saves these two files, all diagnostic images, and other informative html pages in the output directory called "output".