The Rob Lambert

Fighting Layout Bugs…Fight

I’ve mentioned a few times via Twitter (mainly from India) about a neat little tool Julian Harty talked about at the Step_Auto conference; FightingLayoutBugs. It’s a Java code project that checks for layout bugs. It’s all Open Source code and available from “http://code.google.com/p/fighting-layout-bugs/“.

So here is what FightingLayoutBugs does out of the tin:

DetectInvalidImageUrls  

  • Scans the HTML for <img> elements with no or an invalid src attribute
  • Scans the CSS (all style attributes and <style> elements in the HTML as well as directly linked and indirectly imported CSS files) for invalid image URLs.
  • Checks if the URL to the favicon is valid.

DetectNeedsHorizontalScrolling 

You can configure the minimal supported screen resolution for your web page like this: 

FightingLayoutBugs flb = new FightingLayoutBugs(); flb.configure(DetectNeedsHorizontalScrolling.class).setMinimalSupportedScreenResolution(800, 600);

The default screen resolution is 1024 x 768.

 

DetectTextNearOrOverlappingHorizontalEdge  

detects text which is very near or overlaps a horizontal edge

 

DetectTextNearOrOverlappingVerticalEdge  

detects text which is very near or overlaps a vertical edge

 

DetectTextWithTooLowContrast  

detects text which is not readable because of too low contrast

 

A super simple bit of code creates a very simple test:

public class FirstTestClass {

 

    @Test
    public void testGetRectangularRegions() {
        FirefoxDriver driver = new FirefoxDriver();
        try {
            String testPageUrl = “http://www.YourURLhere.com”;
            driver.get(testPageUrl);
            FightingLayoutBugs flb = new FightingLayoutBugs();
            flb.setScreenshotDir(new File(“.”));
            final Collection<LayoutBug> layoutBugs = flb.findLayoutBugsIn(driver);
            System.out.println(“Found ” + layoutBugs.size() + ” layout bug(s)”);
            for (LayoutBug bug : layoutBugs) {
                System.out.println(bug);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            driver.quit();
        }
    }
}

 

Enter your website url in the “String testPageUrl = “http://www.YourURLhere.com”;” line and run the test. It will open up Firefox, then load the website and then do some magic with the CSS (and other stuff) to check your layout. It puts out screen shots of the potential errors too. Very cool.

 

To get this working you will need Java installed, some form of IDE, an SVN client and the source code to build the Jar file or to contribute to the project if you like. Once you’ve built the project then add this .jar as a reference and hey presto you can write your tests.

Enjoy.

6 thoughts on “Fighting Layout Bugs…Fight”

  1. Good post Rob. The number of tools available performing these checks is pretty minimal.We’re currently implementing this tool at my current client. We’re loving the potential, but the tolerances for overlapping checks need some tweaking – the tool thinks some of text fails the check – maybe it does, but I don’t think we’re going to change the text spacing.Our Programmers have attempted to get around the resize issue in Chrome with this neat trick – They have created a Chrome profile in Webdriver, copied the Chrome browser profile preferences & updated window_placement_DevToolsApp – “maximized”: true,Preferences file is located here: …Local SettingsApplication DataGoogleChromeUser DataDefaultIf you’re there already, apologies for teaching your grandma to suck eggs & have you got any pointers for us please?If not, I hope this helps!Duncs

  2. Hi Duncan,Thanks for commenting. This is all new to me so thanks for the insights you’ve commented with. It’s great to see teams trialling new tools out and working around the “issues”. I did notice it reported a few areas that didn’t seem like bugs but on the whole very insightful little tool.Thanks again for commentingCheersRob..

Comments are closed.