The Page Object Model

The Page Object Model (POM) is a design pattern which represents the different pages or components of an application as objects in your test automation code. Each page or component is encapsulated within a separate class. This provides a clear separation of concerns, which in turn enables better maintainability, reusability and readability of your test automation code.

Creating a Page Object Model in WebDriverIO and Appium

To demonstrate the implementation of the Page Object Model, let's create a login scenario that will be used in a mobile app. We will create two classes: a LoginPage class and a MainPage class.

// LoginPage.js
class LoginPage {
  get usernameField() { return $('input[name="username"]') }
  get passwordField() { return $('input[name="password"]') }
  get loginButton() { return $('.login-button') }

  login(username, password) {
    this.usernameField.setValue(username)
    this.passwordField.setValue(password)
    this.loginButton.click()
  }
}

module.exports = new LoginPage()

// MainPage.js
class MainPage {
  get onboardingMessage() { return $('.onboarding-message') }

  isOnboardingMessageDisplayed() {
    return this.onboardingMessage.isDisplayed()
  }
}

module.exports = new MainPage()

Now that we have these two POM classes, we can use these in our test automation code.

const LoginPage = require('./LoginPage');
const MainPage = require('./MainPage');

describe('Login Test', () => {
  it('should log in successfully', () => {
    LoginPage.login('myusername', 'mypassword')
    expect(MainPage.isOnboardingMessageDisplayed()).toBe(true)
  })
})

Benefits of Using the Page Object Model

• Modularity: By encapsulating the functionality of each page or component within a separate class. This provides easy maintenance and reusability of code. Any change in the application's functionality can be adjusted through the relevant page object model class.
• Collaboration: The POM structure improves collaboration between developers and QA. Developers can focus on building the application, while testers can independently work on creating and maintaining the automation code using the POM. This separation of concerns promotes efficient teamwork.
• Reusability: With the POM structure you can reuse page objects across multiple test cases. This reduces code duplication and improves test coverage.