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)]
public class LayoutTestingTests : WebTest
    public void TestPageLayout()

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


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.AssertWidthBetween(50, 70);

You can use for all layout assertions the special web elements- Viewport and 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.


resolution for desktop testing

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


resolution for mobile testing

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


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.

    recordScreenshots: true,
    recordVideo: true)]

    captureNetworkLogs: true,
    captureVideo: true,
    consoleLogType: BrowserStackConsoleLogType.Verbose,
    debug: true,
    build: "myUniqueBuildName")]

    "Windows 10",
    recordVideo: true,
    recordNetwork: true,
    build: "myUniqueBuildName")]

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

Learn more

Style Testing

Style testing is a module from BELLATRIX that allows you to test the CSS styles of your website, such as background, border, other colors, font size, size, weight, and many others.

Style Testing <label style="background: #4EC9B0;color: white;font-size: 0.7rem;padding-left: 0.3rem;padding-right: 0.3rem;padding-top: 0.1rem;padding-bottom: 0.1rem;margin-left: 0.3rem;">NEW</label>

In the case where you have a style guide for how different elements should look like consistently in your app, you can create a base class containing the tests for checking these styles. For example, you can have a base class for buttons, anchors, tables, and so on. After that, instead of copy-pasting these tests each time, you can derive from these base classes and navigate to the particular page, which should be checked.

Autogerated Test Cases

You might be interested also in our online trainings

Learn How to write automated tests for web, desktop, mobile, or API apps using WebDriver, Appium, SpecFlow, and other industry-leading tools/frameworks.

See Our Trainings