Page Objects Design Pattern | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Page Objects
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore the Page Object Model (POM) , a widely-used design pattern in test automation that enhances code organization, maintainability, and reusability. The main goal of POM is to create a separate class for each page of a web application, encapsulating methods that handle operations specific to that page. Key Concepts of Page Object Model Code Reusability: By placing operations in dedicated methods, we avoid code duplication. For example, instead of repeating login steps across multiple tests, we can create a method called performLogin() that encapsulates these steps. Improved Readability: Using descriptive method names enhances the clarity of tests, allowing developers to understand the test flow at a glance. Important Principles DRY (Don't Repeat Yourself): This principle encourages reducing code duplication. If code is repeated more than twice, it should be refactored into a reusable function. KISS (Keep It Simple, Stupid): Avoid over-engineering. Keep the framework straightforward and efficient without unnecessary complexity. Best Practices Descriptive Naming: Use clear and meaningful names for classes, methods, and variables to improve code readability. Avoid Tiny Methods: Instead of creating methods that perform trivial tasks, group related operations into more meaningful methods to maintain organization. This introduction sets the stage for implementing the Page Object Model in upcoming lessons, where we will begin coding our first page object.
Video Transcript
hello guys and we're beginning a new section about page objects so page objects is one of the most popular pattern that automation engineers are using to organize their code into more reusable components so the code easier to manage easier to reuse and easier to refactor later on so there are no single type of the page object pattern all page object pattern are different in this section I will show you the basic page object pattern that I like to use and which is very scalable and applicable for different projects and applications and in this particular lesson I will show you the presentation with introduction to what is page object how to use it and what is it about let's get into so the page object model is a design pattern used in the test automation to organize source code improve maintainability and reusability of the code so this is pretty much the main concept page object model is used widely in the test automation but here is the important no there is no industry implemented standard for this design pattern depends on the framework depends on the language you use depends on the author of the framework the flavor or the pattern of this approach can be different and in this module I will show you approach that playwright recommends to use and with my additional notes how I prefer to modify this approach to make in my opinion page object model more optimal the core concept for this model is that for every page of the web application we create own class and this class has methods or functions responsible for operations on this particular page so that way we logically can structure all our code base into the different sections of the test framework and then call those methods and functions inside of the test that are responsible for particular functionality on the web page so let me show you the example so let's say we have this login screen with email password and login button if we would automate this just inside of the test and let's say we want to repeat these steps in the several tests we basically would need to copy paste three lines of code and this is of course not really optimal way because think about it if the button for login will be changed in the design then we will need to go and change this login text on the button for every single test this is difficult to maintain and absolutely not the best way to organize the code and the page objects can do this we put this logic into the reusable method and then simply call this method inside of the test so here we put those three lines in the method called perform login and then inside of the test we just call this method perform login so that way we reached two goals first we removed duplication of the code code that's responsible for clicking on the login button with filling out email and password is inside of dedicated method and then inside of the test we're just calling this method also the method name gives us clear understanding what is happening inside so so perform login method clearly telling us what this method gonna do also this approach will improve readability over the test so when you just simply look at the test what the test is doing you can read the steps one by one and reading the method names understand what the framework is doing and what the test is doing so there are two important principles that you need to follow when building your framework using page object model first principle called dry which is acronym for don't repeat yourself and this is what I just mentioned that page object model helps to reduce duplication of your code inside of the framework instead of copy pasting you just put your code into reusable function and then call this function inside of the test what could be a good rule for this principle so as for me if something is copy pasted just once it means that code is repeated into different places I'm not necessarily trying to extract this code into the reusable function sometimes for me it can be acceptable but if you repeat your code three times in your code this is definitely a red flag you need to stop there and think how you can organize and optimize your code moving that code into reusable component and then calling this component from the place where it should be called and another acronym is KISS which stands for keep it simple stupid this is kind of an opposite principle from the first one because engineers once they begin to implement page object model they become too excited about what they can do and begin over complicating and over engineering their framework creating multiple layers of abstraction different helper classes helper features different methods processors and so on and that sometimes may over complicate the code that you did not optimize to maintain your code easier you making it even more complex and don't try to impress your developers like hey look at my framework how cool is that with so many different functions don't do this make your framework design just enough to be efficient what it's supposed to do that's it so the key qualities for your framework would be reliability your test should be easy to read and easy to maintain and two other useful practices that I would recommend you to follow first one is descriptive naming so when you design the framework with page object model give a very good descriptive naming to all instances that you create constants variables method names functions names class names instance of the objects give it a really really good descriptive name without any double meaning then when you read the code by yourself you exactly understand what this function is doing or you exactly understand what value this variable is holding and by the way the naming is one of the most difficult thing in computer programming actually sometimes it's hard to figure out with the right naming in the way that your code would look really meaningful and easy to read train your skill on the naming if you can't figure out the certain right way for the variable or the method name ask your peers ask your developers or ask someone to make a code review for you to provide the feedback is it easy to read is it understandable what this code is doing so try to follow this recommendation and the second recommendation and useful practice is avoid tiny methods and here is the example avoid creating methods like this click submit and this method has just a single line of code get by roll button click so very often new engineers are super excited about page object model and begin creating methods like that with this kind of approach you increase the complexity of the framework but not gaining any functional value from it so try to keep your methods more meaningful block of the function or block of the flow so that way your code will be better organized all right so that's pretty much it quick introduction into the page object model and in the next lesson we will start writing the code with our first page object