UI-testing

med

Page

Object

Pattern

public class TodoComponentTest {
    
    private final String URL = "http://localhost:3000/";
    private WebDriver webDriver;
    private HomePageObject homePageObject;

    @BeforeEach
    void setup() {
        webDriver = new ChromeDriver();
        webDriver.get(URL);
        this.homePageObject = new HomePageObject(webDriver);
    }

    @AfterEach
    void tearDown() {
        webDriver.quit();
    }
}

@Test
public void verifyExistingTodosInTable() {
    homePageObject
    .countTodos(5)
    .verifyTodoDescriptionInTable(1, "Create a todo app that can be tested using the Page Object Pattern")
    .verifyTodoDescriptionInTable(2, "Conjure clever test data")
    .verifyTodoDescriptionInTable(3, "Use Bootstrap instead of styling the example app yourself")
    .verifyTodoDescriptionInTable(4, "Initialize git")
    .verifyTodoDescriptionInTable(5, "Write the article");
}

public class HomePageObject {
    
    private WebDriver webDriver;

    @FindBy(id="todo-table")
    private WebElement todoTable;
    
    @FindBy(how = How.XPATH, using = "//table/tbody/tr")
    private List<WebElement> tableRows;

    public HomePageObject(WebDriver webDriver) {
        this.webDriver = webDriver;
        PageFactory.initElements(webDriver, this);
        new WebDriverWait(webDriver, Duration.ofSeconds(3)).until(ExpectedConditions.visibilityOf(todoTable));
    }

    public HomePageObject verifyTodoDescriptionInTable(int rowNumber, String expectedDescription) {
        WebElement tableDataElement = webDriver.findElement(descriptionFieldAtRowNumber(rowNumber));
        String actualDescription = tableDataElement.getText();
        Assertions.assertEquals(expectedDescription, actualDescription);
        return this;
    }

    public HomePageObject countTodos(int count) {
        Assertions.assertEquals(count, tableRows.size());
        return this;
    }
}

public HomePageObject clickOnCompletedCheckboxAtRowNumber(int rowNumber) {
    WebElement checkbox = webDriver.findElement(completedCheckboxAtRowNumber(rowNumber));
    checkbox.click();
    return this;
}

public HomePageObject checkboxAtRowShouldBe(int rowNumber, boolean expected) {
    WebElement checkbox = webDriver.findElement(completedCheckboxAtRowNumber(rowNumber));
    Assertions.assertEquals(expected, checkbox.isSelected());
    return this;
}

private By completedCheckboxAtRowNumber(int rowNumber) {
    return By.xpath(String.format("//table/tbody/tr[%d]/td[3]/input", rowNumber));
}

@FindBy(id="addNewTodoButton")
private WebElement addNewTodoButton;

(...)

public AddPageObject clickOnAddNewTodo() {
    addNewTodoButton.click();
    return new AddPageObject(webDriver);
}

public class AddPageObject {

    private WebDriver webDriver;

    @FindBy(id="description-field")
    private WebElement descriptionField;

    @FindBy(id="cancel-button")
    private WebElement cancelButton;

    @FindBy(id="save-button")
    private WebElement saveButton;

    public AddPageObject(WebDriver webDriver) {
        this.webDriver = webDriver;
        PageFactory.initElements(webDriver, this);
    }

    public AddPageObject fillDescriptionField(String description) {
        descriptionField.sendKeys(description);
        return this;
    }

    public HomePageObject clickCancelButton() {
        cancelButton.click();
        return new HomePageObject(webDriver);
    }

    public HomePageObject clickSaveButton() {
        saveButton.click();
        return new HomePageObject(webDriver);
    }

 }

@Test
public void addNewTodo() {
    homePageObject
    .countTodos(5)
    .clickOnAddNewTodo()
    .fillDescriptionField("A brand new TODO")
    .clickSaveButton()
    .countTodos(6)
    .verifyTodoDescriptionInTable(6, "A brand new TODO");
}

@Test
public void markSomeTodosAsCompleted() {
    homePageObject
    .countTodos(5)
    .checkboxAtRowShouldBe(1, false)
    .clickOnCompletedCheckboxAtRowNumber(1)
    .clickOnCompletedCheckboxAtRowNumber(3)
    .checkboxAtRowShouldBe(1, true)
    .checkboxAtRowShouldBe(2, false)
    .checkboxAtRowShouldBe(3, true);
}

@Test
public void AddNewTodoButChangeYourMindAndCancel() {
    homePageObject
    .countTodos(5)
    .clickOnAddNewTodo()
    .clickCancelButton()
    .countTodos(5);
}

@Test
public void editATodoDescription() {
    homePageObject
    .verifyTodoDescriptionInTable(1, "Create a todo app that can be tested using the Page Object Pattern")
    .clickEditButtonAtRowNumber(1)
    .fillDescription("This description has been altered")
    .clickSaveButton()
    .countTodos(5)
    .verifyTodoDescriptionInTable(1, "This description has been altered");
}

@Test
public void deleteATodo() {
    homePageObject
    .countTodos(5)
    .clickEditButtonAtRowNumber(1)
    .clickDeleteButton()
    .countTodos(4);
}