Page Object Model In Playwright | Playwright With TypeScript Tutorial 🎭| Part IX | LambdaTest

Watch this video to learn about the Page Object Model (POM) design pattern and how to write POM tests in Playwright to maintain the test cases easily.

🔹 𝑾𝒉𝒂𝒕 𝒊𝒔 𝑷𝒂𝒈𝒆 𝑶𝒃𝒋𝒆𝒄𝒕 𝑴𝒐𝒅𝒆𝒍 (𝑷𝑶𝑴)?
➡ Page Object Model, known as POM, is a design pattern that creates a repository for storing all online elements. It helps in the reduction of code duplication and the management of test scripts. Consider each web page of an application as a different class file in the Page Object Model. Each class file will only contain web page elements that correspond to it. Testers can use these items to conduct operations on the website under test.

🔹 𝑾𝒉𝒂𝒕 𝒂𝒓𝒆 𝒕𝒉𝒆 𝒂𝒅𝒗𝒂𝒏𝒕𝒂𝒈𝒆𝒔 𝒐𝒇 𝒕𝒉𝒆 𝑷𝒂𝒈𝒆 𝑶𝒃𝒋𝒆𝒄𝒕 𝑴𝒐𝒅𝒆𝒍 (𝑷𝑶𝑴)?
➡ 𝗘𝗮𝘀𝘆 𝗠𝗮𝗶𝗻𝘁𝗲𝗻𝗮𝗻𝗰𝗲: Everything in web automation depends on the DOM tree and selectors. The page object model simplifies maintenance since if the DOM tree or selectors change, we don't have to alter them.
➡ 𝗜𝗻𝗰𝗿𝗲𝗮𝘀𝗲𝗱 𝗥𝗲𝘂𝘀𝗮𝗯𝗶𝗹𝗶𝘁𝘆: Using POM, we can reuse code written for another test. We can also construct custom helper methods to accomplish this. Reusability of code minimizes code, saving time and effort.
➡ 𝗥𝗲𝗮𝗱𝗮𝗯𝗶𝗹𝗶𝘁𝘆: Readability is improved because the tests are independent.

Ｖɪᴅᴇᴏ Ｃʜᴀᴘᴛᴇʀꜱ 👀
0:00 Introduction
0:04 Modules
0:24 What is POM?
0:48 Demo of Page Object Model
2:53 How to write pages?
27:42 How to execute the POM tests?
47:29 Conclusion

📌Also, learn 📃
🔸 What is the Page object model in playwright?
🔸 What is playwright testing?
🔸 How do you run a playwright test?
🔸 Should I use the page object model?

**𝑼𝒔𝒆𝒇𝒖𝒍 𝑫𝒐𝒄𝒔**

Sign Up for LambdaTest! It’s FREE 🙌

Register Now to Avail Bonanza Offerings 💎
+ Test websites and web apps on 3000+ real browsers over LambdaTest cloud
+ Trusted By 1M+ users, 500+ enterprises and 130+ countries
+ Online scalable Selenium Grid to perform Manual as well as Automation Testing
+ 100 minutes of free Web + Mobile Automation Testing
+ 60 minutes of free Live Interactive Testing per month
+ 10 Screenshot Tests per month
+ 10 Responsive Tests per month (Test a page across 50+ Device configurations with a single click)
+ Unlimited free testing on LT Browser

**𝑬𝒙𝒑𝒍𝒐𝒓𝒆**

**𝑺𝒐𝒄𝒊𝒂𝒍**

#playwrighttutorial #playwrighttesting #lambdatest #playwrightautomation #playwright #microsoftplaywright #playwrightautomationtutorial #playwrightframework #playwrighttestingtool #playwrightuploadfile #playwrightdownloadfile #playwrightdownload

Disclaimer:
This video features materials protected by the Fair Use guidelines of Section 107 of the Copyright Act. All rights reserved to © 2022 LambdaTest. Any illegal reproduction of this content will result in immediate legal action.

[gagrciajuanluis]

Thank you for taking the time to put this tutorial together. I implemented this concept with Playwright and Java, and the implementation was a bit more "involved" when it came to "integrating" steps across pages; I had to use a common method to create instances of pages, such that (for instance) when clicking the "loginBtn", the return value would be an instance of the "HomePage" object. So, I am glad I came across this implementation which seems to make the overall experience much simpler.

[aishwaryakamaraj]

Thanks a lot sir for the clear explanation. Keep doing great works sir 🤗

[stxbhep]

Hey, do you guys have a video on how to loop new data into each text box & run the script until it loops through all the data? It's the missing part that would make this super awesome that no one has any videos on how to do with playwright. Thanks for the video!

[navyasharma]

Thanks for making these tutorials. I appreciate the precise explanation 🤗

[pcdtfrg]

Thank you for the detailed explanation. It is really helpful. I just discovered your channel and I am going through all the videos one by one. You have explained it really nicely. Keep the good work up.

[noras]

Thank you so much for the excellent tutorials. I wonder what the difference between Page Object Model (POM) and Page Factory is? 🤔

[jessicak]

Congrats on your great videos 🤩 Can you also make a video of using Javascript with Selenium?

[srikanth]

Thank you Koushik, Can you please make a video on how to call these elements and methods from one page object to another page object in playwright TS.

[BurnedZero]

Good video, but I have a question, in the playwright doc it's suggested to construct the page in this way:

export class PlaywrightDevPage {

readonly getStartedLink: Locator;


constructor(page: Page) {

this.getStartedLink = page.locator('a', { hasText: 'Get started' });
}

Why is your different? Will both ways work?

[shelly]

I am not able to access method selectOption for selecting any option from drop down in page files where css and path are defined. This method is accessible only in spec file, then how to frame Pom with drop down selection.

[dushyantkaushik]

Awesome explanation 🤩 Could you please share your playwright GITHUB link?

[cansudenizaksoy]

Even though I added the library as, when I run the test using terminate, I get Error: Requiring @playwright/test second time, error. so error says No tests found What should i do? :(

[katyayanilal]

Hi, for me it showing undefined URL for the same that u have used. What can I do regarding that

[udhayarajaraja]

Really excellent bro... Please keep it up..

[shazianadim]

Hello Koushik, can you do a video for implementing builder pattern in typescript for ui automation with playwright

[ckgvpup]

@LambdaThank you for taking the time and effort, are you providing online live classes, iam interested to take

[skhambampati]

Hi - Thank you so much for the video . I have one question
Can we call the expect also from methods

Here is the example
async errormessage()
{
await No match for E-Mail Address and/or Password.`, {exact: true})).toBeVisible();
}

Can I call in mytest something like this
NewLoginPage.errormessage()

[Yasser-hqxo]

Can we also use LetXPATH locally when we're working on the project? if so, how can we use it then? a video would be optima for explaining?

[vfveocv]

Does Playwright have custom commands for repetitive operations as in cypress?

[DavidMudge]

I have this setup as well but its annoying that for every test you need to remember to add the line const register = new Register (page)
I already tried putting this line in the test.beforeEach but its not working and not creating the object
Is there any other way it can be done? I don't want it as Global setup as this will load a new browser for each test. I want each test file to load a browser and then each test will run on that browser session but I didnt want to have to declare the const for every new test!! jest works to put it in beforeEach but not playwright/test :(