Page Object Model In Playwright With JavaScript

This video will help you to give understanding of the powerful Page Object Model (POM) design pattern! If you're looking to enhance your automation testing skills and make your Playwright scripts more robust and maintainable then you should consider page object model
In this video, we'll cover:
Introduction to Page Object Model (POM) and its importance in test automation.
How To Implement Page Objects in Playwright to structure your code for maximum reusability.
Best practices for creating scalable and maintainable automation scripts.
Navigating through real-world examples to demonstrate the effectiveness of POM in Playwright.
References
playwright.dev/docs/pom
Playwright Series - • Playwright Tutorials F...
Subscribe and Stay Updated:
Don't forget to subscribe for more insightful tutorials on Playwright, testing strategies. Hit the bell icon to receive notifications whenever we release new content!
Connect with us:
Email - [e-mail]
Linkedin- / mukesh-otwani-93631b99
Instagram- / mukeshotwaniofficial
Facebook Group- / 256655817858291

[@SelectorsHub]

Very well explained. Thank you for this tutorial Mukesh.

[@Mukeshotwani]

So nice of you

[@ashutoshpratapsingh6872]

Good explanation and please design with Cucumber as well in future, will wait for that

[@ashutoshpratapsingh6872]

Thanks for highlighting my comment

[@venkatsubramaniyan2385]

Thank you so much for the detailed explanation!! I've one doubt that whether its fine to do assertion at the page level?

[@Mukeshotwani]

Page should have locators and action. Assertion should be at test.

[@luckytima2315]

Thank you very much, one of the best videos on this topic

[@Mukeshotwani]

Glad it was helpful! Thank you

[@rakeshbabuvs]

Superb Mukesh bro😊 step by step and easy to follow ❤

[@Mukeshotwani]

Thank you so much 😀

[@andyrockstar78]

Nice one Mukeshji

[@Snehaandsahasra]

Thanks Mukesh. In page class methods( for ex in Log in page , can we write directly this.username.fill(username) instead of this.page.fill(this.username, ‘aaa’)? . In Playwright documentation, they used the variables as this.variable instead of this.page.locator(this.variable). Thank you!

[@ffgaming-fe3cx]

how to find multiple elements using python? which locator or selector should i need?

[@Mukeshotwani]

You can xpath or css selectors or playwright in build locators for this # Finding multiple elements using XPath elements_xpath = page.query_selector_all('your_xpath_expression') for element in elements_xpath: print(element.text())

[@AparnaKompella]

how to keep the browser open which is opened by PlayWright on mac

[@Mukeshotwani]

Its closes automatically everytime

[@sindhurabc6857]

if you have any video explaining how to write xpath and css selector in detail, can you please share the link.

[@Mukeshotwani]

Hi Sindhu, here is the link kzbin.info/www/bejne/d6SaY6Bvptd0h5o&pp=ygUnaG93IHRvIHdyaXRlIGR5bmFtaWMgeHBhdGggaW4gc2VsZW5pdW0g

[@sindhurabc6857]

​@@Mukeshotwanithank you so much Mukesh

[@user-hm5eo1qj5t]

Can you please do an episode of Playwright automated test by using test data from a database

[@Mukeshotwani]

Sure as of now this guide will help medium.com/@Amr.sa/managing-database-integration-with-playwright-4b7484e98615

[@HabibUllah-jo7vm]

kindly add custom commands in the playwright typescript.

[@AparnaKompella]

and how do i debug in play wright

[@Mukeshotwani]

I have video on debugging in playwrigt please check

[@bongtube1983]

The as-is code shows in this video for the page objects are not working. I had to tweak the code by following PlayWright official documentation to have this working. My working code for page object class of Login Page is as below. I just added an assertion for the login page to check for the logo image. const {expect}=require("@playwright/test") class LoginPage { constructor(page) { this.page=page this.pagelogo=page.locator("div.col-lg-6>img") this.username=page.locator("input#email1") this.password=page.locator("input#password1") this.loginBtn=page.locator("//button[text()='Sign in']") } async login_validation(){ await expect(this.pagelogo).toBeVisible() await this.username.fill("[e-mail]") await this.password.fill("admin@123") await this.loginBtn.click() } } module.exports=LoginPage