Allotropy is a JUnit 5 Test Engine for Layout Testing
- define your (virtual) devices or screen sizes
- write your tests
- assign the tests to your devices
- run single tests, run all tests, run tests grouped by device or custom group with IDE support
- with engine extensions
- with rich annotation support
Writing a Test with Allotropy
1. Start with the basic test class
BasicExampleTest.java
public class BasicExampleTest {
@FromContext
private WebDriver driver;
}
2. Define the devices the test should run against
ExampleDevices.java
public class ExampleDevices {
public static class Desktop implements Device {
...
}
public static class Tablet implements Device {
...
}
public static class Phone implements Device {
...
}
}
3. Register the devices you want to test on
BasicExampleTest.java
@RegisterDevice(id = "desktop", device = ExampleDevices.Desktop.class)
@RegisterDevice(id = "tablet", device = ExampleDevices.Tablet.class)
@RegisterDevice(id = "phone", device = ExampleDevices.Phone.class)
public class BasicExampleTest {
@FromContext
private WebDriver driver;
}
4. Add the page items you want to interact with
BasicExampleTest.java
@RegisterDevice(id = "desktop", device = ExampleDevices.Desktop.class)
@RegisterDevice(id = "tablet", device = ExampleDevices.Tablet.class)
@RegisterDevice(id = "phone", device = ExampleDevices.Phone.class)
public class BasicExampleTest {
@FromContext
private WebDriver driver;
@FindBy(css = ".headline")
private WebElement headline;
}
5. Write your first test for a subset of your devices
FluentExampleTest.java
@RegisterDevice(id = "desktop", device = ExampleDevices.Desktop.class)
@RegisterDevice(id = "mobile", device = ExampleDevices.Mobile.class)
public class BasicExampleTest {
@FromContext
private WebDriver driver;
@FindBy(css = ".headline")
private WebElement headline;
@WithDevice("tablet")
@WithDevice("phone")
void mobileHeadline() {
assertEquals("Headline Mobile", headline.getText());
}
@WithDevice("desktop")
void desktopHeadline() {
assertEquals("Headline Default", headline.getText());
}
}
Asserting Layout Constraints with Fluent Allotropy
1. Write the Base Test
Consider two parts, text and image
- to be aligned next to each other on large screen width
- to be aligned above each other on small screen width
BasicExampleTest.java
@RegisterDevice(id = "desktop", device = ExampleDevices.ChromeDesktop.class)
@RegisterDevice(id = "mobile", device = ExampleDevices.ChromePhone.class)
public class FluentExampleTest {
@FindBy(css = ".text")
private WebElement text;
@FindBy(css = ".image")
private WebElement image;
@FromContext
private WebDriver driver;
@FromContext
private Server server;
@View
void prepare() {
driver.navigate().to(server.url("/textImage.html"));
}
@WithDevice("mobile")
void aboveEachOther() {
//assertions go here
}
@WithDevice("desktop")
void nextToEachOther() {
//assertions go here
}
}
2. Fill in the proper expectations
BasicExampleTest.java
...
@WithDevice("mobile")
void aboveEachOther() {
Expectations.expect(image).below().of(text);
}
@WithDevice("desktop")
void nextToEachOther() {
Expectations.expect(image).right().of(text);
}
...