Test Responsive Layouts

Test responsive layouts based on test location of objects relative to each other on the page. We have more than 15 predefined resolutions, featuring the ability to set up custom ones and easily integrate with all major cloud providers.

200+ Assertions Based on Coordinates

Layout testing always seemed like a complex task. BELLATRIX offers a simple solution: test the location of objects relative to each other on the page.

BELLATRIX resizes your browser or app. It then finds the elements and makes various calculations and assertions based on their coordinates and whether an element is above, below, left, right, etc. in relation to another one. BELLATRIX comes with 200+ layout assertion methods.

[Browser(BrowserType.Chrome, DesktopWindowSize._1280_1024,  BrowserBehavior.RestartEveryTime)]
[TestClass]
public class LayoutTestingTests : WebTest
{
    [TestMethod]
    public void TestPageLayout()
    {
        App.NavigationService.Navigate("http://demos.bellatrix.solutions/");

        Select sortDropDown = App.ElementCreateService.CreateByNameEndingWith<Select>("orderby");
        Anchor protonRocketAnchor = 
		App.ElementCreateService.CreateByAttributesContaining<Anchor>("href", "/proton-rocket/");
        Div saturnVRating = saturnVAnchor.CreateByClassContaining<Div>("star-rating");

        sortDropDown.AssertAboveOf(protonRocketAnchor, 41);

        LayoutAssert.AssertAlignedHorizontallyAll(sortDropDown, protonRocketAnchor);

        saturnVRating.AssertInsideOf(saturnVAnchor);

        saturnVRating.AssertHeightLessThan(100);
        saturnVRating.AssertWidthBetween(50, 70);
    }
}

Depending on what you want to check, BELLATRIX gives lots of options. You can test px perfect or just that some element is below another. Check that the popularity sort dropdown is above the Proton rocket image.

sortDropDown.AssertAboveOf(protonRocketAnchor); 

Assert with the exact distance between them.

sortDropDown.AssertAboveOf(protonRocketAnchor, 41);

For each available method, you have variations of it such as, >, >=, <, <=, between and approximate to some expected value by specified %.

sortDropDown.AssertAboveOfGreaterThan(protonRocketAnchor, 40);
sortDropDown.AssertAboveOfGreaterThanOrEqual(protonRocketAnchor, 41);
sortDropDown.AssertAboveOfLessThan(protonRocketAnchor, 50);
sortDropDown.AssertAboveOfLessThanOrEqual(protonRocketAnchor, 43); 

The expected distance is ~40px with 10% tolerance.

sortDropDown.AssertAboveOfApproximate(protonRocketAnchor, 40, percent: 10);

You can test whether different web elements are aligned correctly.

LayoutAssert.AssertAlignedHorizontallyTop(protonRocketAnchor, protonMAnchor, saturnVAnchor);
LayoutAssert.AssertAlignedHorizontallyCentered(protonRocketAnchor, protonMAnchor, saturnVAnchor);
LayoutAssert.AssertAlignedHorizontallyBottom(protonRocketAnchor, protonMAnchor, saturnVAnchor);

LayoutAssert.AssertAlignedVerticallyAll(falcon9Anchor, falconHeavyAnchor);
 

Verify the height and width of elements.

saturnVRating.AssertHeightLessThan(100);
saturnVRating.AssertWidthBetween(50, 70);

You can use for all layout assertions the special web elements- Viewport and Screen.

saturnVRating.AssertInsideOf(SpecialElements.Viewport);
saturnVRating.AssertInsideOf(SpecialElements.Screen);

Learn more

15+ Predefined Resolutions

BELLATRIX comes with 15+ of most often used resolution for desktop, mobile and tablet.

You can access them through DesktopWindowSize, MobileWindowSize and TabletWindowSize enumerations. The Browser attribute gives you the option to resize your browser window so that you can test the rearrangement of the web elements on your pages.

DesktopWindowSize

resolution for desktop testing

[Browser(BrowserType.Firefox, DesktopWindowSize._1280_1024,  BrowserBehavior.RestartEveryTime)]

MobileWindowSize

resolution for mobile testing

[Browser(BrowserType.Firefox, MobileWindowSize._360_640,  BrowserBehavior.RestartEveryTime)]

TabletWindowSize

resolution for mobile testing

[Browser(BrowserType.Firefox, TabletWindowSize._600_1024,  BrowserBehavior.RestartEveryTime)]

Learn more

Custom Resolutions

If you cannot find the resolution you would like to test on, you can specify your own.

[Browser(BrowserType.Firefox, width: 600, height: 900, behavior: BrowserBehavior.RestartEveryTime)]

Learn more

Cloud Integration

Easily integrate tests with all major cloud providers.

Cloud Integration

Some companies have their own farms of devices and computers with various browser configurations. However, nowadays the cloud providers such as SauceLabs, BrowserStack or CrossBrowserTesting are a reasonable solution to the problem.

In BELLATRIX, we make that possible through the usage of a single attribute which is placed over the test class.

[SauceLabs(BrowserType.Chrome,
    "62",
    "Windows",
    BrowserBehavior.ReuseIfStarted,
    recordScreenshots: true,
    recordVideo: true)]

[BrowserStack(BrowserType.Chrome,
    "62",
    "Windows",
    "10",
    BrowserBehavior.ReuseIfStarted,
    captureNetworkLogs: true,
    captureVideo: true,
    consoleLogType: BrowserStackConsoleLogType.Verbose,
    debug: true,
    build: "myUniqueBuildName")]

[CrossBrowserTesting(BrowserType.Chrome,
    "62",
    "Windows 10",
    BrowserBehavior.ReuseIfStarted,
    recordVideo: true,
    recordNetwork: true,
    build: "myUniqueBuildName")]

These integrations can help you to perform pixel perfect layout testing on various devices.

Learn more

Try Now Bellatrix

Build up to 100 tests using full product capabilities.

Download