- \n
- The test code becomes cleaner and easier to maintain by encapsulating page interactions.<\/li>\n\n\n\n
- If the UI is updated anywhere in the future, it is easy to update only the page class, reducing the need to make huge changes in the framework.<\/li>\n\n\n\n
- Whenever new tests are added, only page object methods are required without the need to work on element locators again.<\/li>\n\n\n\n
- Segregation between test code and the UI interaction code is promoted.
<\/li>\n<\/ul>\n<\/li>\n\n\n\n - Promotes Reusability\n
- \n
- Using page object classes, we can share the common actions across multiple tests.<\/li>\n\n\n\n
- Since page objects encapsulate reusable logic, code duplicity is reduced.<\/li>\n\n\n\n
- For example, a login page can be used for multiple tests using the login method.
<\/li>\n<\/ul>\n<\/li>\n\n\n\n - Hides UI Implementation Details\n
- \n
- Test methods or test scripts work with methods like login(), search(), etc. directly without the need to expose the code within these methods.<\/li>\n\n\n\n
- Test scripts do not directly interact with the UI elements, hence protecting the scripts from the effect of UI changes.
<\/li>\n<\/ul>\n<\/li>\n\n\n\n - Robust Tests, Less Vulnerable to UI Changes\n
- \n
- The test scripts are less brittle to UI changes, if any UI element is updated, only the page object class needs to be updated.<\/li>\n\n\n\n
- As compared to updating many locators spread across the script, it is very easy to maintain the scripts using POM.
<\/li>\n<\/ul>\n<\/li>\n\n\n\n - Clean Separation of Test Code and Page Interactions\n
- \n
- The test cases logic is focused on validations rather than UI details.<\/li>\n\n\n\n
- The test actions are translated to UI interactions using the page object.<\/li>\n\n\n\n
- Separation makes code modular and easier to maintain.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
What are the disadvantages related to Page Object Model?<\/h2>\n\n\n\n
While the Page Object Model provides a lot of benefits, there are some potential drawbacks that one should consider.<\/p>\n\n\n\n
- \n
- Complexity due to additional classes\n
- \n
- Other than maintaining the tests, additional page object classes are introduced.<\/li>\n\n\n\n
- More files and classes are created in the project structure.<\/li>\n\n\n\n
- New members might take some time to understand the page object structure.
<\/li>\n<\/ul>\n<\/li>\n\n\n\n - Page Object needs to sync with UI\n
- \n
- If there is any update in the UI, the page object needs to be updated to accommodate the changes.<\/li>\n\n\n\n
- If any additional feature is added to the web page, corresponding page objects might need addition of new methods to handle the same.<\/li>\n\n\n\n
- Using page objects will not eliminate the need of maintenance, any change in the flow, locators will still require maintenance of the page objects.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Abstraction layer is added\n
- \n
- Although abstraction helps hide UI implementation details, it can become difficult to access or verify elements at times.<\/li>\n\n\n\n
- It can sometimes lead to difficulty in debugging issues.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
Now that we understand what page object model is and how it can be helpful to us, let us see how we can implement it in our Playwright Tests<\/a>.<\/p>\n\n\n\n
Implementing Page Object Model for Playwright Tests<\/h2>\n\n\n\n
To begin writing Playwright tests, ensure that you have downloaded and installed Visual Studio Code<\/a>. Also, download and install Node JS<\/a> in your system.<\/p>\n\n\n\n
Let us now look through the steps to creating the structure of our Playwright Page Object Model project.<\/p>\n\n\n\n
- \n
- Create a new directory for the project. I have created a directory PlaywrightPOM <\/em><\/strong>in my system.<\/li>\n\n\n\n
- Next, we open the directory in Visual Studio Code(VS Code)we created in Step#1. Click on File > Open > Select the directory name you have created(PlaywrightPOM)<\/em>.
You will see it in the VS Code explorer as shown below-<\/li>\n<\/ol>\n\n\n\n![\"Playwright](\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2023\/10\/playwright-install.png\" "\\"\\"")
<\/figure>\n\n\n\n3.We next install playwright, by clicking on Terminal > New Terminal<\/em>. In the terminal write the below command:<\/p>\n\n\n\n
npm init playwright@latest\n\n<\/code><\/pre>\n\n\n\nThis command will prompt you to answer certain questions, select them as per your requirement.<\/p>\n\n\n\n
Once the above command is executed, you will see that files and folders have been added to the project as shown in the snapshot below-<\/p>\n\n\n\n
![\"\"](\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2023\/10\/image4-1.png\" "\\"\\"")
<\/figure>\n\n\n\n4. Next, we will create two more folders viz, pages and utilities in the project directory. The pages folder will hold the page objects of our page object model. The Utilities folder on the other hand will contain common utilities(if any) for the project.<\/p>\n\n\n\n
![\"\"](\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2023\/10\/image3-2.png\" "\\"\\"")
<\/figure>\n\n\n\n5. Before we start writing the scripts we will install the browsers by entering the below command in the terminal:<\/p>\n\n\n\n
npx playwright install<\/code><\/pre>\n\n\n\n6.We are now all set with our project structure and we will now start writing our tests, but before that let us see the use case steps that we will be using to implement the POM for Playwright Test.<\/p>\n\n\n\n
a. Navigate to testgrid.io.<\/p>\n\n\n\n
b. Click on the Get Started button.<\/p>\n\n\n\n
c. Enter details in the Sign Up Form.<\/p>\n\n\n\n
Note that you can automate your own use case by following the approach mentioned below.<\/strong><\/em><\/p>\n\n\n\n
7. To achieve thi,s we will be using Typescript. Let us first create one file inside the pages folder and name it home.page.ts. In this fil,e we will write our code to locate the elements on the page and perform actions on them:<\/p>\n\n\n\n
home.page.ts<\/em><\/strong><\/p>\n\n\n\nimport { expect, Locator, Page } from '@playwright\/test';\nexport class TestGridHomePage{\nreadonly url=\"https:\/\/testgrid.io\/\";\nreadonly page: Page;\nreadonly getStartedButton: Locator;\n\n\nconstructor(page: Page){\nthis.page = page;\nthis.getStartedButton = page.locator('text=Get started');\n}\n\n\nasync goTo(){\nawait this.page.goto(this.url);\n}\n\n\nasync getStarted(){\nawait this.getStartedButton.click();\n}\n\n}\n<\/code><\/pre>\n\n\n\nCode Walkthrough<\/p>\n\n\n\n
import { expect, Locator, Page } from '@playwright\/test';<\/code><\/pre>\n\n\n\nImports Playwright test library classes that will be used in the page object<\/p>\n\n\n\n
export class TestGridHomePage{<\/code><\/pre>\n\n\n\nDefines the TestGridHomePage class that will contain the page object logic<\/p>\n\n\n\n
readonly url=\"https:\/\/testgrid.io\/\";\nreadonly page: Page;\nreadonly getStartedButton: Locator;<\/code><\/pre>\n\n\n\nRead only fields are declared where-<\/p>\n\n\n\n
- \n
- Url<\/em><\/strong>, is used to declare the TestGrid base URL.<\/li>\n\n\n\n
- Page<\/em><\/strong>, field of type Page that will reference the Playwright Page object.<\/li>\n\n\n\n
- getStartedButton<\/em><\/strong>, locator field to store the Get Started button locator.<\/li>\n<\/ul>\n\n\n\n
constructor(page: Page){\nthis.page = page;\nthis.getStartedButton = page.locator('text=Get started');\n}\n<\/code><\/pre>\n\n\n\nConstructor is created to accept the Page object and initialise the page and locator fields.<\/p>\n\n\n\n
async goTo(){\nawait this.page.goto(this.url);\n}\n<\/code><\/pre>\n\n\n\ngoTo() method is used to navigate to the base url.<\/p>\n\n\n\n
async getStarted(){\nawait this.getStartedButton.click();\n}\n<\/code><\/pre>\n\n\n\ngetStarted() method is used to click on the Get Started button.<\/p>\n\n\n\n
We will create another page class, viz, register..page.ts that will be used to hold the elements of the Sign Up page that we see after clicking on the Get Started button. The code for the same will be:<\/p>\n\n\n\n
register.page.ts<\/em><\/strong><\/p>\n\n\n\n
import { expect, Locator, Page } from '@playwright\/test';\nexport class RegistrationPage{\nreadonly page: Page;\nreadonly fullName: Locator;\nreadonly email: Locator;\nreadonly mobile: Locator;\nreadonly password: Locator;\nreadonly signUpButton: Locator;\n\n\nconstructor(page: Page){\nthis.page = page;\nthis.fullName = page.locator('id=full_name');\nthis.email = page.locator('id=business_email');\nthis.mobile = page.locator('id=mobile_number');\nthis.password = page.locator('id=password');\nthis.signUpButton = page.locator('id=signin-button');\n}\n\n\nasync fillForm(){\nawait this.fullName.fill(\"Your Name\");\nawait this.email.fill(\"Your email id\");\nawait this.mobile.fill(\"Your mobile number\");\nawait this.password.fill(\"Your choice password\");\nawait this.signUpButton.click();\n}\n\n\n}\n\n<\/code><\/pre>\n\n\n\nCode Walkthrough<\/p>\n\n\n\n
readonly page: Page;\nreadonly fullName: Locator;\nreadonly email: Locator;\nreadonly mobile: Locator;\nreadonly password: Locator;\nreadonly signUpButton: Locator;<\/code><\/pre>\n\n\n\nRead only fields are declared for the page, and the sign up form elements.<\/p>\n\n\n\n
constructor(page: Page){\nthis.page = page;\nthis.fullName = page.locator('id=full_name');\nthis.email = page.locator('id=business_email');\nthis.mobile = page.locator('id=mobile_number');\nthis.password = page.locator('id=password');\nthis.signUpButton = page.locator('id=signin-button');\n}\n<\/code><\/pre>\n\n\n\nA constructor is created to initialise the page and its elements using the locators.<\/p>\n\n\n\n
async fillForm(){\nawait this.fullName.fill(\"Your Name\");\nawait this.email.fill(\"Your email id\");\nawait this.mobile.fill(\"Your mobile number\");\nawait this.password.fill(\"Your choice password\");\nawait this.signUpButton.click();\n}\n<\/code><\/pre>\n\n\n\nThe fillForm() method is used to fill in the details to the sign up form. You can add more lines of code to the method to handle specific scenarios in your case.<\/p>\n\n\n\n
<\/p>\n\n\n\n
8. The next step is to write the test file to execute our test case. We create home.test.ts file and write the below code in it:<\/p>\n\n\n\n
import{test,expect} from '@playwright\/test';\nimport { TestGridHomePage } from \"..\/pages\/home.page\";\nimport { RegistrationPage } from '..\/pages\/register.page';\ntest('TestGrid Get Started Flow',async ({page}) => {\nconst homePage = new TestGridHomePage(page);\nconst regPage = new RegistrationPage(page);\nawait homePage.goTo();\nawait homePage.getStarted();\nconst delay = ms => new Promise(resolve => setTimeout(resolve, ms));\nawait delay(10000);\nawait regPage.fillForm();\n})\n<\/code><\/pre>\n\n\n\nCode Walkthrough<\/p>\n\n\n\n
import { TestGridHomePage } from \"..\/pages\/home.page\";\nimport { RegistrationPage } from '..\/pages\/register.page';<\/code><\/pre>\n\n\n\nWe import the required pages in the test.<\/p>\n\n\n\n
const homePage = new TestGridHomePage(page);\nconst regPage = new RegistrationPage(page);<\/code><\/pre>\n\n\n\nReferences to the pages of the POM are created using which we will refer the methods of the page classes.<\/p>\n\n\n\n
await homePage.goTo();\nawait homePage.getStarted();<\/code><\/pre>\n\n\n\nThe goTo() and the getStarted() methods of the home page are called to navigate to the url and click on the Get Started Button respectively.<\/p>\n\n\n\n
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));\nawait delay(5000);<\/code><\/pre>\n\n\n\nWe are using promise to set a timeout to handle network lags here. You may use other ways to handle timeout scenarios in your project as per your requirement.<\/p>\n\n\n\n
await regPage.fillForm();<\/code><\/pre>\n\n\n\n- \n
- Finally, we call the fillForm() method to fill up the details in the sign up form using the registration page object.<\/li>\n<\/ul>\n\n\n\n
Once these files are created, your project directory would look like below-<\/p>\n\n\n\n
![\"\"](\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2023\/10\/image6-2.png\" "\\"\\"")
<\/figure>\n\n\n\n9. You can now execute this test file using the command below:<\/p>\n\n\n\n
npx playwright test home.test.ts \u2013headed<\/code><\/pre>\n\n\n\nBy default, playwright executes in headless mode, hence use \u2013headed to execute the test in headed mode. Once this command is executed, you will see that your test is executed and the results are displayed in the console as below-<\/p>\n\n\n\n
![\"\"](\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2023\/10\/image1-3.png\" "\\"\\"")
<\/figure>\n\n\n\nAdditionally, you can look at the generated report to look at the results of execution:<\/p>\n\n\n\n
![\"\"](\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2023\/10\/image2-2.png\" "\\"\\"")
<\/figure>\n\n\n\nConclusion<\/h3>\n\n\n\n
To summarise the Page Object Model, we can conclude on the following points:<\/p>\n\n\n\n
- \n
- Page Object Model, POM is a design pattern that helps to create a robust and maintainable automation framework.<\/li>\n\n\n\n
- Due to the ease of handling the scripts and segregating the test logic from the UI interactions, POM helps in creating efficient and scalable frameworks.<\/li>\n\n\n\n
- Although POM makes the tests more readable and maintainable, it might sometimes create problems in debugging issues.<\/li>\n\n\n\n
- POM eases the process of updating the page objects in case of changes in the UI or the flow, by just having the need to update the page object classes with minimal need to touch the test scripts.<\/li>\n\n\n\n
- POM when implemented in a clear and concise manner can help in creating modular frameworks, reusing page objects wherever necessary.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"Test automation eases the test execution in the software development lifecycle but it comes with its own set of challenges. One of the most important aspects of writing effective automation suites is their maintainability. To be able to easily scale the frameworks it is very essential to write clear, modular and segregated scripts to minimise […]<\/p>\n","protected":false},"author":29,"featured_media":10050,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[209],"tags":[],"class_list":["post-10041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-test-automation"],"acf":[],"images":{"medium":"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2023\/10\/playwright-POM.jpg","large":"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2023\/10\/playwright-POM.jpg"},"_links":{"self":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/10041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/comments?post=10041"}],"version-history":[{"count":6,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/10041\/revisions"}],"predecessor-version":[{"id":15355,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/10041\/revisions\/15355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/media\/10050"}],"wp:attachment":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/media?parent=10041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/categories?post=10041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/tags?post=10041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Page<\/em><\/strong>, field of type Page that will reference the Playwright Page object.<\/li>\n\n\n\n
- Next, we open the directory in Visual Studio Code(VS Code)we created in Step#1. Click on File > Open > Select the directory name you have created(PlaywrightPOM)<\/em>.
- Create a new directory for the project. I have created a directory PlaywrightPOM <\/em><\/strong>in my system.<\/li>\n\n\n\n
- Complexity due to additional classes\n