CODEWITHSUNDEEP
validationtestingseleniumwebdriver
Stilltorik
Stilltorik

Reputation: 1692

Validation testing: how to validate a UI?

I have been asked to implement validation tests on the javascript part of our website. I've been considering using selenium WebDriver. One of the things we want to test is the UI: check whether it "looks" good (things that must be aligned are aligned, boxes are in the right position).

For the moment, the only option I found was to take a snapshot using Selenium, and either compare it to a test snapshot manually taken beforehand, or check the snapshots manually. The snapshot comparison is not very maintainable, as any change in the layout requires all the test snapshots to be taken again, and the manual check is very time consuming.

Does anyone know of any way (in Selenium or other) to achieve this?

Upvotes: 1

Views: 4116

Answers (2)

Petr Janeček
Petr Janeček

Reputation: 38434

It's not nice, but it can be done to some extent.

For positioning, you can use WebElement's getLocation() (Java doc, but the same method exists in all Selenium bindings). Note that most browsers render slightly differently, so do not expect things to be pixel-perfect when working with older IE. Also, things might be positioned slightly differently when e.g. the first font defined in CSS was not found and an alternative was used. Don't rely heavily on this method. But if you'll be able to make your tests sane and your environment stable, it will work.

For aligning, I wrote a simple Java method for WebDriver that asserts that an element is visually inside of another element.

There should be no false negatives, but there could be some false positives in the case when the inner element is visually inside, but its (invisible) actual borders "peek out". I haven't bumped into this problem, however, in my real experience, since nice websites behave nicely and don't need such hacks :). Still, it's kinda hackish and Selenium wasn't designed for this type of work, so it might be harder to implement more complex checks.

public static void assertContains(WebElement outerElem, WebElement innerElem) {
    // get borders of outer element
    Point outerLoc = outerElem.getLocation();
    Dimension outerDim = outerElem.getSize();
    int outerLeftX = outerLoc.getX();
    int outerRightX = outerLeftX + outerDim.getWidth();
    int outerTopY = outerLoc.getY();
    int outerBottomY = outerTopY + outerDim.getHeight();

    // get borders of inner element
    Point innerLoc = innerElem.getLocation();
    Dimension innerDim = innerElem.getSize();
    int innerLeftX = innerLoc.getX();
    int innerRightX = innerLeftX + innerDim.getWidth();
    int innerTopY = innerLoc.getY();
    int innerBottomY = innerTopY + innerDim.getHeight();

    // assures the inner borders don't cross the outer borders
    final String errorMsg = "ughh, some error message";
    final boolean contains = (outerLeftX <= innerLeftX)
            && (innerRightX <= outerRightX)
            && (outerTopY <= innerTopY)
            && (innerBottomY <= outerBottomY);
    assertTrue(errorMsg, contains);
}

Upvotes: 3

Edu
Edu

Reputation: 2052

If you use term validation in meaning: "Test that we have built the right thing", I would say it is nearly impossible to automate this. How will you judge if it looks pleasing or that it is easy to use, if not by having some people to really use it?

This kind of visual checks are also something humans are good at. If you use the website at all while developing it, you will notice quite easily if there is something fishy with the layouts and such.

For functionalities automated tests are good idea.

Upvotes: 2

Related Questions