Where should I define modal specific code in Selenium Page Object Model pattern

Question

In Selenium Page Object model pattern web pages are represented as classes, various elements on the page are defined as variables in the class, and user interactions are implemented as methods in the class.

That is for each page separate class is created.

There's an ecommerce application with pages- login, home, search, product, cart, checkout, and order confirmation.

There are variuos modals also, like cart preview, add customer, etc. Some modals will be visible on multiple pages and some modals will be visible on particular page only.

E.g. Cart preview modal will show information like current products in cart, quantity, price, total, etc and it can be accessed from home, search, product, and cart pages.

Whereas add customer modal will have fields to add new customer- Name, Conact information, Address, etc. and this modal will be visible only on checkout page.

If I am using page object model pattern, where should I define these modals I mean shall I create a separate class for modals or shall I define them in the respective enclosing page?

Shall I create a separate class for modal that is visible on multiple pages and define the page specific modal in the respective enclosing class?

Mayapple

Answer 1

As per the Test Design Consideration following Page Object Design Pattern :

• A Page Object is an object-oriented class that serves as an interface to a page of the Application Under Test. Your @Tests uses the methods of this Page Object class whenever they need to interact with the User Interface of that page. The benefit is that if the UI changes for the page your @Tests themselves don’t needs to be changed. Only the code within the Page Object needs to be changed.

  Advantages :

  • Clean separation between test code and page specific code such as locators, methods and layout.
  • A single repository for the operations offered by the page rather than having these services scattered throughout the tests.

Based on these features and the advantages the Modal Box which you are observing in your UAT are a result of Bootstrap Modal Plugin and essentially part of the HTML DOM of the same page. So these Locators and the associated Methods should also be defined for each Page Object individually so that the WebElement associated with these Modal Box also gets initialized when the Page Object is initialized.

Speedway

So you mean there should be a different page object for each modal instead of defining it in the same page? – Mayapple