Question

I’m following the Page Object pattern suggested by Selenium, but how would I create a more specialized WebElement for a page. Specifically, we have tables on our pages and I have written some helper functions to get specific rows of a table, return the contents of a table, etc.

Currently, here is a snippet of a page object I created that has a table:

public class PermissionsPage  {

    @FindBy(id = "studyPermissionsTable")
    private WebElement permissionTable;

    @FindBy(id = "studyPermissionAddPermission")
    private WebElement addPermissionButton;

    ... 

}

So, what I’d like to do is have that permissionsTable to be a more customized WebElement that has some of those methods I mentioned earlier.

For example:

public class TableWebElement extends WebElement {
    WebElement table;
    // a WebDriver needs to come into play here too I think

    public List<Map<String, String>> getTableData() {
        // code to do this
    }

    public int getTableSize() {
        // code to do this
    }

    public WebElement getElementFromTable(String id) {
        // code to do this
    }
}

I hope that this makes sense what I’m trying to explain. I guess what I’m looking for is a way to have this custom WebElement to do some additional stuff that’s table-specific. Add this custom element to a Page and take advantage of the way Selenium wires the webelements to the page based on the annotations.

Is it possible? And if so, does anyone know how this can be done?

Answer 1

I created an interface that combines all of the WebDriver interfaces:

public interface Element extends WebElement, WrapsElement, Locatable {}

It’s just there to wrap up all of the things WebElements can do when wrapping an element.

Then an implementation:

public class ElementImpl implements Element {

    private final WebElement element;

    public ElementImpl(final WebElement element) {
        this.element = element;
    }

    @Override
    public void click() {
        element.click();
    }

    @Override
    public void sendKeys(CharSequence... keysToSend) {
        element.sendKeys(keysToSend);
    }

    // And so on, delegates all the way down...

}

Then, for example a check box:

public class CheckBox extends ElementImpl {

    public CheckBox(WebElement element) {
        super(element);
    }

    public void toggle() {
        getWrappedElement().click();
    }

    public void check() {
        if (!isChecked()) {
            toggle();
        }
    }

    public void uncheck() {
        if (isChecked()) {
            toggle();
        }
    }

    public boolean isChecked() {
        return getWrappedElement().isSelected();
    }
}

When using it in my script:

CheckBox cb = new CheckBox(element);
cb.uncheck();

I’ve also come up with a way of wrapping the Element classes. You have to create a few factories to replace the built-in PageFactory, but it is doable, and it lends a lot of flexibility.

I’ve documented this process over on my site:

• Wrapping WebElement: Part 1
• Wrapping WebElement: Part 2

I’ve also got a project called selophane that was inspired by this and other questions: selophane