---
title: The Page Object Model | Appium and WebDriverIO | TestingBot
description: 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.…
source_url:
  html: https://testingbot.com/resources/courses/appium-webdriverio/page-object-model
  md: https://testingbot.com/resources/courses/appium-webdriverio/page-object-model.md
---

Course

[Appium and WebDriverIO](https://testingbot.com/resources/courses/appium-webdriverio)

Chapter 5 of 7 57%

1. [WebDriverIO Architecture](https://testingbot.com/resources/courses/appium-webdriverio)
2. [Learn about Appium](https://testingbot.com/resources/courses/appium-webdriverio/what-is-appium)
3. [Locate Elements](https://testingbot.com/resources/courses/appium-webdriverio/locate-elements)
4. [Implicit and Explicit Waits](https://testingbot.com/resources/courses/appium-webdriverio/implicit-explicit-wait)
5. [5 The Page Object Model](https://testingbot.com/resources/courses/appium-webdriverio/page-object-model)
6. [6 WebDriverIO Reporters](https://testingbot.com/resources/courses/appium-webdriverio/webdriverio-reporters)
7. [7 Running tests on TestingBot](https://testingbot.com/resources/courses/appium-webdriverio/tests-on-testingbot)

[Exit course](https://testingbot.com/resources/courses)

 Chapter 5 of 7 Easy 2 mins read Updated Feb 2023 

# 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.

```javascript
// 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()
```

```javascript
// 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.

```javascript
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.

[Previous · Chapter 4 Implicit and Explicit Waits](https://testingbot.com/resources/courses/appium-webdriverio/implicit-explicit-wait) [Next · Chapter 6 WebDriverIO Reporters](https://testingbot.com/resources/courses/appium-webdriverio/webdriverio-reporters)