WebDriverIO Framework: Combining Page Object Model with Advanced Concepts

The requirement for high-quality and efficient web applications keeps growing with each passing day; therefore, the need for automation frameworks supporting automated testing is on a rise. Thus, automated testing can save the required amount of manual effort while providing reliable and consistent results. WebDriverIO is the next-generation automation framework, built on Node.js specifically for end-to-end testing in modern web applications. Notably, it is gaining popularity in JavaScript applications due to seamless integration into the whole JavaScript ecosystem along with the powerful features in simple browser automation and testing.

There is an even more effective way in WebDriverIO to structure and maintain scalable test code, that is the Page Object Model, or POM, pattern. The POM design pattern separates from the test logic the UI structure and interactions of a webpage, encapsulating them into reusable page classes. This way, the test scripts in light of UI changes are cleaner, more readable, and thus more easily updated. The use of POM with WebDriverIO enables the building of modular, testable, and maintainable test suites that can face the complexity of a web application workflow easily.

Apart from POM, WebDriverIO supports data-driven tests and integration tests, custom commands, and continuous integration (CI) setups. This makes WebDriverIO flexible, especially in large-scale projects where automation at multiple browsers and platforms is required.

Getting Started with the Page Object Model (POM)

Advantages of Using POM in WebDriverIO

WebDriverIO integrates seamlessly with the POM design pattern, offering several benefits:

Modularity and Reusability: Page objects allow each page or component to be modularized, with reusable methods that can be called across different tests.

Ease of Maintenance: Since all UI elements for a page are centralized in a single class, updates due to UI changes can be easily managed, reducing maintenance time and effort.

Enhanced Readability: By separating page-specific operations from test logic, POM makes test scripts more readable. Test scripts are shorter, easier to understand, and more descriptive.

Error Reduction: With well-structured page objects, potential bugs related to UI changes are minimized, as element locators and actions are encapsulated within page classes.

Basic Structure of a POM Class in JavaScript

In WebDriverIO, POM classes are written in JavaScript or TypeScript. A page class typically includes:

• Selectors for the elements on the page.
• Methods that interact with those elements, such as filling out forms, clicking buttons, or verifying text.
• Custom Commands that abstract complex actions or workflows.

Here’s a basic structure of a POM class in JavaScript:

Now, in this example, the LoginPage class represents an application’s login page. Properties such as the username, password fields, and the login button are all there in it along with its method that performs the action of logging in. Test scripts can now use LoginPage.login() to execute the login function without needing to interact with individual elements directly.

Creating Clean, Maintainable Page Objects

To create effective page objects in WebDriverIO, consider the following best practices:

1. Encapsulate Element Locators: Keep element selectors private to the class, accessible only through methods. This keeps them hidden from the test scripts, making it easier to refactor when necessary.
2. Avoid Logic in Page Classes: Page objects should focus on actions related to the UI, not on business logic. Avoid implementing conditions or complex workflows within page classes.
3. Limit Each Class to a Specific Page or Component: Keep each page object focused on a single page or component. For complex pages with multiple sections, consider creating separate page objects for each section.
4. Use Descriptive Method Names: Method names should describe what the method does, like clickLoginButton or enterUsername, to make tests easy to read.

Here’s an example of how a test might use the LoginPage page object:

In this example, the LoginPage class enables the test script to execute the login function in a clean and straightforward way, with minimal repetition. This use of POM not only improves the test’s readability but also makes it more resilient to changes in the UI, as all selectors and actions are defined in a single location.

Building Your First POM with WebDriverIO

Setting up the WebDriverIO environment involves a few steps to configure everything needed for automated testing.For setting up WebdriverIO you can refer our blog WebdriverIO Setup.

Setting Up a Simple Page Object for a Login Page

Here’s the basic structure:

• Create a new directory for page objects (if it doesn’t already exist) in your project root.

• Inside LoginPage.js, define a class with methods and properties for each element on the page.

Defining Locators and Selectors for Elements

When working with WebDriverIO we refer to elements on the page using selectors. A selector can be constructed based on an ID, class, data attribute, or another HTML attribute. Here’s how we define selectors for the login page elements, such as the username and password fields and the login button.

Writing Methods for Page Interactions (Click, Input Text, etc.)

Inside the class LoginPage we define the login method that will make our login process reusable and efficient. It takes care of all the actions required to perform on a login page, which include filling in the username and password fields as well as clicking the button to log in. This allows our tests to perform a login by calling a single function, LoginPage.login().

In this setup:

• setValue(username) inputs text into the username field.
• setValue(password) inputs text into the password field.
• click() triggers a click event on the login button.

Creating Tests that Use the POM Structure

With our LoginPage class ready, we can create a test that uses this page object to perform a login action. This allows us to reuse the login method in multiple tests, ensuring clean and efficient test scripts.

Here’s a sample test file that uses LoginPage to test the login functionality.

How This POM Structure Enhances Your Tests Using POM in our tests has several

key benefits:

1. Modularity: We encapsulate login functionality in a reusable login method, reducing code duplication.
2. Maintainability: All UI element selectors for the login page are in one place. If the login page structure changes, we only need to update the selectors in LoginPage.js.
3. Readability: Test scripts become easier to read, as we use intuitive methods like LoginPage.login() instead of writing out all steps repeatedly.

Advanced POM Structure in WebDriverIO

When building test automation frameworks for large or complex applications, a simple POM structure may not be enough. To keep tests maintainable and scalable, advanced POM techniques such as handling complex page structures, using inheritance, breaking down large pages into smaller components, and organizing POMs effectively become essential. Here’s how to apply these techniques with WebDriverIO.

Example: Handling Nested Components

Consider a DashboardPage that contains a UserProfileWidget and a NotificationPanel. Instead of placing all selectors and methods in DashboardPage, we create separate page objects for each widget.

Read More Full Blog...

Click Here