Test Responsive Layouts

Test responsive layouts based on test location of objects relative to each other on the page. 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.

BELLATRIX 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.

[TestMethod]
public void TestPageLayout()
{
    var button = App.ElementCreateService.CreateByIdContaining<Button>("button");
    var secondButton = App.ElementCreateService.CreateByIdContaining<Button>("button_disabled");
    var checkBox = App.ElementCreateService.CreateByIdContaining<CheckBox>("checkBox");
    var secondCheckBox = App.ElementCreateService.CreateByIdContaining<CheckBox>("secondsCheckBox");
    var mainElement = App.ElementCreateService.CreateById<Element>("mainView");

    button.AssertAboveOf(checkBox);

    checkBox.AssertNearBottomRightOf(button);
    button.AssertNearTopLeftOf(checkBox);

    LayoutAssert.AssertAlignedHorizontallyAll(button, secondButton);

    LayoutAssert.AssertAlignedVerticallyAll(secondCheckBox, checkBox);

    button.AssertInsideOf(mainElement);

    button.AssertHeightLessThan(100);
    button.AssertWidthBetween(50, 80);
}

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 purchase button is above the checkbox.

button.AssertAboveOf(checkBox);

Assert with the exact distance between them.

button.AssertAboveOf(checkBox, 105);

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

button.AssertAboveOfGreaterThan(checkBox, 100);
button.AssertAboveOfGreaterThanOrEqual(checkBox, 105);
button.AssertAboveOfLessThan(checkBox, 110);
button.AssertAboveOfLessThanOrEqual(checkBox, 105);

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

button.AssertAboveOfApproximate(checkBox, 104, percent: 10);

You can assert the position of elements again each other in all directions- above, below, right, left, top right, top left, below left, below right. Assert that the checkbox is positioned near the top right of the button.

checkBox.AssertNearBottomRightOf(button);
button.AssertNearTopLeftOf(checkBox);

You can test whether different elements are aligned correctly.

LayoutAssert.AssertAlignedHorizontallyAll(button, secondButton);
LayoutAssert.AssertAlignedHorizontallyTop(button, secondButton);
LayoutAssert.AssertAlignedHorizontallyCentered(button, secondButton, secondButton);
LayoutAssert.AssertAlignedHorizontallyBottom(button, secondButton, secondButton);

LayoutAssert.AssertAlignedVerticallyAll(secondCheckBox, checkBox);

Verify the height and width of elements.

button.AssertHeightLessThan(100);
button.AssertWidthBetween(50, 80);

Assert that the elements are aligned vertically only from the left side.

button.AssertInsideOf(mainElement);

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 applied to the test class.

[IOSSauceLabs("sauce-storage:TestApp.app.zip",
    Constants.IOSDefaultVersion,
    Constants.IOSDefaultDeviceName,
    AppBehavior.RestartEveryTime)]

[IOSBrowserStack("pngG38y26LZ5muB1p46P",
    "11.3",
    "iPhone 6",
    AppBehavior.RestartEveryTime,
    captureVideo: true,
    captureNetworkLogs: true,
    consoleLogType: BrowserStackConsoleLogType.Disable,
    debug: false,
    build: "CI Execution")]

[IOSCrossBrowserTesting("crossBrowser-storage:TestApp.app.zip",
    "11.3",
    "iPhone 6",
    AppBehavior.RestartEveryTime,
    recordVideo: true,
    recordNetwork: true,
    build: "CI Execution")]

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