EasyPageFix

The code from my dissertation project, "Automated Bug-Fixing of Website Layouts"

Original idea and supervision from Phil McMinn @ The University of Sheffield

Abstract

"The world wide web is becoming an increasingly large part of people’s lives and they are accessing it in increasingly diverse ways; through mobile phones, tablets, laptops and desktop PCs with various different browsers. It is therefore difficult for developers to account for these differences when designing a website. This project aims to produce a system which allows them to write a specification for a website, which should be able to fix problems quickly and easily, using search-based techniques, enabling them to spend more time on the content of the website, instead of the minor details of layout bugs."

General Info

EasyPageFix is written in Java, using the internal API from the Galen Framework, which allows for the checking of webpages against an easily readable specification. EasyPageFix then uses its own internal representation of the webpage and stylesheet to trial different CSS changes, producing a 'patch' of the most successful ones (that fix errors detected by Galen).

Currently the project has very basic functionality for detecting and fixing errors with elements on the screen. Your elements will need to have the same names as their names in the Galen Specification.

In future, it might be possible to re-architect the detection system so it can use deeper 'linking' to the specification, allowing for more accurate CSS patches to be generated.

Don't expect this to fix your website. It is a proof-of-concept project which has many limitations.

Setup/Installation

.jar file

Ensure your Java classpath is set up correctly with a Java 1.8 runtime. Instructions here
Download the tool here (TODO link)
Download the version of ChromeDriver that corresponds to your version of Chrome or Chromium.
Create a local copy of your webpage, with files for HTML, CSS and any others you might have. Make sure all relevant styles are in a single CSS file.
Create a Galen specification for your webpage. Instructions here

Run the jar:

java -jar EasyPageFix.jar (arguments)

The order of the arguments:

0: Path to HTML file
1: Path to CSS file
2: Path to misc. resources for the page (page's root folder, normally)
3: Path to galen spec
4: Output path of fixed page
5: Path to a chrome driver executable
6: Chrome Window Width
7: Chrome Window Height

From source (to use example run configurations)

Clone the repo from this page. General instructions for Git are available here.
```
git clone https://github.com/mmwatt/EasyPageFix.git
```
Download the version of ChromeDriver that corresponds to your version of Chrome or Chromium.
Open the project with an IDE like IntelliJ. This is recommended for the dependencies to be imported correctly, and to have access to some example run configurations.

If you are not using IntelliJ or Maven, then the project needs to have the following dependencies available:
- Galen Framework 2.4.4+ (might work with versions 2+ but untested)
- Java String Similarity 1.2.1+
- CSS Parser 0.9.27+
- SAC (Simple API for CSS) 1.3+
- Apache Commons IO 2.4+
- jsoup HTML parser 1.12.1+
You can use one of the built-in run configurations to 'fix' problems with the sample page and specification. Please note, these may not work fully, and exist to illustrate the tool's limitations.

Ensure your ChromeDriver is in the following path:
```
EasyPageFix/drivers/chromedriver.exe
```
It can be located elsewhere if you are running the tool yourself.

For your own run configurations, please use the following order for the command-line arguments

0: Path to HTML file
1: Path to CSS file
2: Path to misc. resources for the page (page's root folder, normally)
3: Path to galen spec
4: Output path of fixed page
5: Path to a chrome driver executable
6: Chrome Window Width
7: Chrome Window Height