8.3. Working with web elements

8.3.1. Checking whether elements are visible

The element method of the PageObject class provides a convenient fluent API for dealing with web elements, providing some commonly-used extra features that are not provided out-of-the-box by the WebDriver API. For example, you can check that an element is visible as shown here:

public class FindAJobPage extends PageObject {

    WebElement searchButton;

    public boolean searchButtonIsVisible() {
        return element(searchButton).isVisible();
    }
    ...
}

If the button is not present on the screen, the test will wait for a short period in case it appears due to some Ajax magic. If you don’t want the test to do this, you can use the faster version:

public boolean searchButtonIsVisibleNow() {
    return element(searchButton).isCurrentlyVisible();
}

You can turn this into an assert by using the shouldBeVisible() method instead:

public void checkThatSearchButtonIsVisible() {
    element(searchButton).shouldBeVisible();
}

This method will through an assertion error if the search button is not visible to the end user.

If you are happy to expose the fact that your page has a search button to your step methods, you can make things even simpler by adding an accessor method that returns a WebElementFacade, as shown here:

public WebElementFacade searchButton() {
    return element(searchButton);
}

Then your steps will contain code like the following:

        searchPage.searchButton().shouldBeVisible();

8.3.2. Checking whether elements are enabled

You can also check whether an element is enabled or not:

element(searchButton).isEnabled() element(searchButton).shouldBeEnabled()

There are also equivalent negative methods:

element(searchButton).shouldNotBeVisible();
element(searchButton).shouldNotBeCurrentlyVisible();
element(searchButton).shouldNotBeEnabled()

You can also check for elements that are present on the page but not visible, e.g:

element(searchButton).isPresent();
element(searchButton).isNotPresent();
element(searchButton).shouldBePresent();
element(searchButton).shouldNotBePresent();

8.3.3. Manipulating select lists

There are also helper methods available for drop-down lists. Suppose you have the following dropdown on your page:

<select id="color">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

You could write a page object to manipulate this dropdown as shown here:

public class FindAJobPage extends PageObject {

        @FindBy(id="color")
        WebElement colorDropdown;

        public selectDropdownValues() {
            element(colorDropdown).selectByVisibleText("Blue");
            assertThat(element(colorDropdown).getSelectedVisibleTextValue(), is("Blue"));

            element(colorDropdown).selectByValue("blue");
            assertThat(element(colorDropdown).getSelectedValue(), is("blue"));

            page.element(colorDropdown).selectByIndex(2);
            assertThat(element(colorDropdown).getSelectedValue(), is("green"));

        }
        ...
}

8.3.4. Determining focus

You can determine whether a given field has the focus as follows:

element(firstName).hasFocus()

You can also wait for elements to appear, disappear, or become enabled or disabled:

element(button).waitUntilEnabled()
element(button).waitUntilDisabled()

or

element(field).waitUntilVisible()
element(button).waitUntilNotVisible()

8.3.5. Using direct XPath and CSS selectors

Another way to access a web element is to use an XPath or CSS expression. You can use the element method with an XPath expression to do this more simply. For example, imagine your web application needs to click on a list item containing a given post code. One way would be as shown here:

WebElement selectedSuburb = getDriver().findElement(By.xpath("//li/a[contains(.,'" + postcode + "')]"));
selectedSuburb.click();

However, a simpler option would be to do this:

element(By.xpath("//li/a[contains(.,'" + postcode + "')]")).click();