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.

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

[App(Constants.WpfAppPath, AppBehavior.RestartEveryTime)]
public class LayoutTestingTests : DesktopTest
{
    [TestMethod]
    public void CommonActionsWithDesktopControls_Wpf()
    {
        var button = App.ElementCreateService.CreateByName<Button>("purchaseButton");
        var calendar = App.ElementCreateService.CreateByAutomationId<Calendar>("calendar");
        var selectedRadioButton = App.ElementCreateService.CreateByName<RadioButton>("selectedRadioButton");

        button.AssertAboveOf(calendar);

        saturnVAnchor.AssertNearBottomRightOf(sortDropDown);
        sortDropDown.AssertNearTopLeftOf(saturnVAnchor);

        LayoutAssert.AssertAlignedHorizontallyAll(button, bcalendar);
        
        LayoutAssert.AssertAlignedVerticallyLeft(radioButton, selectedRadioButton);

        button.AssertHeightLessThan(100);
        button.AssertWidthBetween(70, 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 calendar.

button.AssertAboveOf(calendar);

Assert with the exact distance between them.

button.AssertAboveOf(calendar, 106);

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

button.AssertAboveOfGreaterThan(calendar, 100);
button.AssertAboveOfGreaterThanOrEqual(calendar, 106);
button.AssertAboveOfLessThan(calendar, 110);
button.AssertAboveOfLessThanOrEqual(calendar, 106);

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

button.AssertAboveOfApproximate(calendar, 105, percent: 10);

You can test whether different desktop elements are aligned correctly.

LayoutAssert.AssertAlignedHorizontallyAll(button, button1);
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);

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. Browser attribute gives you the option to resize your browser window so that you can test the rearrangement of the desktop elements on your screens.

Desktop Testing

desktop testing responsive

[App(Constants.WpfAppPath, DesktopWindowSize._1280_1024,  AppBehavior.RestartEveryTime)]

Mobile Testing

mobile testing responsive

[App(Constants.WpfAppPath, MobileWindowSize._360_640, AppBehavior.RestartEveryTime)]

Tablet Testing

tablet testing responsive

[App(Constants.WpfAppPath, TabletWindowSize._600_1024,  AppBehavior.RestartEveryTime)]

Learn more

Custom Resolutions

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

[App(Constants.WpfAppPath, width: 600, height: 900, behavior: AppBehavior.RestartEveryTime)]

Learn more

Try Now Bellatrix

Build up to 100 tests using full product capabilities.

Download