Home

Purpose

The purpose of this project is to have a way to develop html pages using a double bookkeeping methodology like Test Driven Development prescribes. A novice typically will start developing HTML/Css/JavaScript by writing the code and visually inspecting this. Changes in the code later on will then require tedious visual inspection to ensure nothing was broken. The point of HtmlRenderTest is exactly to automate this job.

How does it work

You test your pages using Selenium as regular (probably only using Java to start with). When your page is in some state (AJAX considered too), you choose to compare with a reference version of that page in that state. At this point, HRT will take screenshots of both pages in all positions of the scroll bars and compare them. If it finds any difference, it will create a report indicating the differences between both documents. (In the beginning, this will be a pure bitmap comparison, but I hope to come up with something better as the project grows.)

Use cases

TDD

Before developing the fully functional page itself, I start creating a mock up html page that looks good in the preferred resolution of the browser, or receive some document from the designer that will act as a reference. After that, I start implementing the real page and use the reference to visually inspect they are more or less the same. Using HTR, I would run a comparison between the real page and the reference, and adapt either one until they are visually the same in every browser I support.

Refactoring

At some point in time, you may want to optimize the Css of you pages, but how do you do that without running the risk of screwing up? ###Restyling When you’re restyling the website, you’ll first want to restyle the reference. By running HTR now, you’ll see what parts of the pages will be affected by your restyling, as you now compare the changed reference with the current website (which now acts as reference). That way, you can prevent the problem that changing some css influences some things you didn’t think of.

Implementation ideas

implementation of stuff should be divided in two parts: one part written in javascript and meant to be included in Selenium’s user-extension.js (see http://seleniumhq.org/docs/08_user_extensions.html), and one part written in Java.

• The selenium part should consist of following functionalities:
  • getBrowserDimensions()
  • setBrowserSize()
  • setBrowserPosition()
  • scrollerToNext(locator)
  • scrollerHasNext(locator)
• The java part should then have: *createSnapshot():BufferedImage *comparePages()

I guess a comparePages functionality could also be implemented in Selenium itself, trying to detect content blocks and comparing dimensions and positions of these. Also some information can get passed to the java part to create a more intelligent bitmap comparison...

user-extensions code will be validated using selenium itself.

canvas only comparison:

• before starting the test, determine the browser clutter dimensions by taking a screenshot of an empty page, and comparing it with an empty page with a green background.
• by running the page in a frame, we can make sure the URL displayed in the browser is exactly the same in the reference and the actual page. (Actually, I think the previous one is better).
• Even smarter: when creating a snapshot, we ignore the top part of of the browser. Not sure yet what the best way is to achieve this.