Page object abstraction -- bdd script

Question description

In bdd automation script, page object is one of the key for class design. When beginning to write the page objects, we got confused with that should page object only provide UI element and related actions, or more complicated operations aligned to user story? This is a question about page object abstraction. We have a few patterns on page object.

Analysis on page object abstraction

1. Structural implementation.

In structural implementation, page object only provide UI element and related actions, which could be called and combined in steps. Also, we also adopt the chain rule design.

LogonPage.java

public class LogonPage {    private WebDriver driver;    private By usernameInput = By.id("username");    private By passwordInput = By.id("password");    private By logonBtn = By.id("logonBtn");    public LogonPage(WebDriver driver) {        this.driver = driver;    }    public void fillUsernameInput(String username) {        this.driver.findElement(this.usernameInput).sendKeys(username);        return this;    }    public void fillPasswordInput(String password) {        this.driver.findElement(this.passwordInput).sendKeys(password);        return this;    }    public void clickLogonButton() {        this.driver.findElement(this.logonBtn).click();        return this;    }}

In the above implementation, page object is pretty flexible, because each element action is almost atomic. We could combine any actions on the page to complete our step, but the shortcoming is that we need to modify each function call in steps when there are changes on UI element, which will be a disaster if UI change frequently.

2. Functional implementation

In this implementation we will add a higher-layer view based on user story and scenarios, which expose public functional methods for scenarios and steps

LogonPage.java

public class LogonPage {    private WebDriver driver;    private By usernameInput = By.id("username");    private By passwordInput = By.id("password");    private By logonBtn = By.id("logonBtn");    public LogonPage(WebDriver driver) {        this.driver = driver;    }    public void logon(String username, String password) {        this.driver.findElement(this.usernameInput).sendKeys(username);        this.driver.findElement(this.passwordInput).sendKeys(password);        this.driver.findElement(this.logonBtn).click();        return this;    }}

The benefit of the approch is that the detail operations on UI element is complete encapsulated on a higher layer. Scenarios and steps could just call the high-layer methods. When there are changes on UI element, you simply modify the UI layer code to fit the changes. The flaw is, when the number of scenarios increase, there are more public methods, e.g. logonWithValidPassword, logonWithInvalidPassword etc.

3. Combined implementation

Then our solution will combine both of the implementation. We set up two layers, one on UI element and actions(low layer), one on functional operations(high layer). The later one combine the former one for different requirements.

LogonPage.java

public class LogonPage {    private WebDriver driver;    private By usernameInput = By.id("username");    private By passwordInput = By.id("password");    private By logonBtn = By.id("logonBtn");    public LogonPage(WebDriver driver) {        this.driver = driver;    }    private void fillUsernameInput(String username) {        this.driver.findElement(this.usernameInput).sendKeys(username);        return this;    }    private void fillPasswordInput(String password) {        this.driver.findElement(this.passwordInput).sendKeys(password);        return this;    }    private void clickLogonButton() {        this.driver.findElement(this.logonBtn).click();        return this;    }    public void logon(String username, String password) {        this.fillUsernameInput(username)            .fillPasswordInput(password)            .clickLogonButton();        return this;    }    public void logonWithValidPasswrod(String username, String password) {        this.logon(username, password);        return this;    }}

So far, this is the most flexible way to encupsulate the page object.