Project For Facilitating Page Layout Testing For Websites

The project aims to provide a simple light weight object (Creative Element) to compare the layout of one Web Element with respect to the Other.

The relation between web elements (two web elements) is expressed in the following terms:

• On
• Near
• Inside
• Aligned

The project is inspired by Galen Framework and has been produced so that relevant functions can be utilized by other frameworks.

Usage

Including It In Your Project POM:

<repositories>
     <repository>
	<id>jitpack.io</id>
	<url>https://jitpack.io</url>
     </repository>
</repositories>

<dependency>
    <groupId>com.github.sethijatin</groupId>
    <artifactId>creative-element</artifactId>
    <version>1.1</version>
    <scope>test</scope>
</dependency>

Creating a Creative Element:

Creative Element is created using a WebElement.

CreativeElment element = new creative.layout.CreativeElement(driver.findElement(By.cssSelector(...)));

Creative Element also returns back the Selenium WebElement so as the tester can continue with their regular selenium operations

WebElement element = creativeElement.getElement();

Relation between one Creative Element with respect to other can be asserted in the following way:

CreativeElment elementOne = new CreativeElement(driver.findElement(By.cssSelector(...)));
CreativeElment elementTwo = new CreativeElement(driver.findElement(By.cssSelector(...)));
Assert.assertTrue(elementOne.isInside().isInside(elementTwo));

Near

Near is used to evaluate that a WebElement is not on, or inside another WebElement. Relevant functions for near are:

• On Top Of => isNear().onTopOf(...)
• On Bottom Of => isNear().onBottomOf(...)
• Is Near => isNear().isNear(...)
• On Right Of => isNear().onRightOf(...)
• On Left Of => isNear().onLeftOf(...)

//Is creative.layout.Near
//Returns true in case the WebElement is neither inside other WebElement, nor on the other WebElement
elementOne.isNear().isNear(elementTwo);

//creative.layout.On Top Of
//Returns true in case the WebElement is near and on right of other WebElement
elementOne.isNear().onRightOf(elementTwo);

//creative.layout.On Top Of
//Returns true in case the WebElement is near other WebElement, and the distance between the Top Edge of Element 1, and Top Edge of
//Element 2 is exactly 16 pixels (calculated using integers)
elementOne.isInside().isInside(elementTwo, creative.layout.Direction.Top, 16);

//creative.layout.On Top Of
//Returns true in case the WebElement is near other WebElement, and the distance between the Top Edge of Element 1, and Top Edge of
//Element 2 is between 16 - 20 pixels (calculated using integers)
elementOne.isInside().isInside(elementTwo, creative.layout.Direction.Top, 16, 20);

On:

On is used to evaluate if a WebElement overlaps the other WebElement. If the respective edges or even points of 2 WebElements will overlap each other they are considered overlapping.

//Overlaps
//Returns true in case the WebElement overlaps the other WebElement
elementOne.on().overlaps(elementTwo);

//Get Distance
//Returns the distance (integer) between Top edge of ElementOne and Top Edge of ElementTwo
elementOne.on().getDistance(elementTwo, creative.layout.Direction.TOP);

Inside

Inside is used to evaluate if a WebElement is inside other WebElement. Completely inside no edges or points overlap.

//Is Inside

//Returns true in case the WebElement is inside other WebElement
elementOne.isInside().isInside(elementTwo); //Simple check

//Returns true in case the WebElement is inside other WebElement, and the distance between the Top Edge of Element 1, and Top Edge of
//Element 2 is exactly 16 pixels (calculated using integers)
elementOne.isInside().isInside(elementTwo, creative.layout.Direction.Top, 16);

//Returns true in case the WebElement is inside other WebElement, and the distance between the Top Edge of Element 1, and Top Edge of
//Element 2 is between 16 - 20 pixels (calculated using integers)
elementOne.isInside().isInside(elementTwo, creative.layout.Direction.Top, 16, 20);

Aligned

Aligned evaluates if the two WebElemnts are aligned. creative.layout.Aligned is validated on the edges, or inside another Web Element. Functions:

• Top => isAligned().top(...);
• Bottom => isAligned().bottom(...);
• Left => isAligned().left(...);
• Right => isAligned().right(...);

//creative.layout.Inside Top
//Returns true in case the WebElement 1 is top aligned with WebElement 2
elementOne.isAligned().top(elementTwo);

Aligned & Inside

It is possible for the WebElements to be inside another webaligned and still be aligned. The following functions can be used to validate the same:

• Inside Centrally => isAligned().insideCentrally(...);
• Inside Horizontally => isAligned().insideHorizontally(...);
• Inside Vertically => isAligned().insideVertically(...);

//Returns true if element one is inside element two and are aligned right in the center (vertically & horizontally).
elementOne.isAligned().insideCentrally(elementTwo);

Describe

While most functions in the API were meant to be used directly into assertions, this specific function describes the relation between the two web elements.

elementOne.describe().describeRelationTo(elementTwo);

Sample Output For Inside:

 Element is 'inside' the other element to which it is compared to.

 Space Between Element Edges In Pixels
 Top    : 17
 Bottom : 17
 Left   : 194
 Right  : 195

 Alignment Between Elements
 Top Aligned : false
 Bottom Aligned : false
 Left Aligned : false
 Right Aligned : false
 Aligned Inside Horizontally : false
 Aligned Inside Vertically : true
 Aligned Inside Centrally : false

Sample Output For Near:

 Element is 'near' (on top right of) the other element to which it is compared to.

 Space Between Element Edges In Pixels
 My Top & Other's Bottom : 1908
 My Bottom & Other's Top : 1598
 My Left & Other's Right : 373
 My Right & Other's Left : 722

 Alignment Between Elements
 Top Aligned : false
 Bottom Aligned : false
 Left Aligned : false
 Right Aligned : false
 Aligned Inside Horizontally : false
 Aligned Inside Vertically : false
 Aligned Inside Centrally : false

BrowserStack is helping us getting better:

BrowserStack is helping me extend the API by providing their state of the art infrastructure to test this API across platforms! Together we shall make the layout testing easy!