Page Object Model In Playwright With JavaScript
Vložit
- čas přidán 12. 09. 2024
- 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...
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 - mukeshotwani@learn-automation.com
Linkedin- / mukesh-otwani-93631b99
Instagram- / mukeshotwaniofficial
Facebook Group- / 256655817858291
Man, you helped me so much!! I make a prayer for you during the feast of Sharithk!
Thank you so much mate, very glad to see your beautiful comment.
Very well explained. Thank you for this tutorial Mukesh.
So nice of you
Good explanation and please design with Cucumber as well in future, will wait for that
Thanks for highlighting my comment
Thank you very much, one of the best videos on this topic
Glad it was helpful! Thank you
Superb Mukesh bro😊 step by step and easy to follow ❤
Thank you so much 😀
Hey Mukesh Nice video - But as per POM we should not write assertions in page class - In this example we are writing expect assertions in Page class - Is this allowed ? Please confirm
Hi Priyanka, Thank you so much for watching the video, and good question! 😊 You're absolutely correct -according to the Page Object Model (POM) best practices, assertions generally shouldn't be placed in the page classes. The primary role of a page class is to represent the UI elements and actions on that page, keeping the logic and structure clean and focused.
In Playwright with JavaScript, it's common to see assertions like `expect` in the spec files , not in the page classes.
However, in some quick demos/video or simple projects, you might see assertions in the page classes for convenience or to keep examples compact. But for larger, real-world projects, it's best to keep assertions in the spec files.
So, in short, while it's technically allowed and will work, it's not recommended if you're aiming for clean, maintainable test automation for end to end scripts (ok to use in quick examples).
If you check below doc from official website few assertion done at page level and other assertion at test level
playwright.dev/docs/pom
Nice one Mukeshji
Thank you so much for the detailed explanation!! I've one doubt that whether its fine to do assertion at the page level?
Page should have locators and action. Assertion should be at test.
Hi Mukesh,
Thank you so much for your efforts,its a great video.
I have followed the same POM way,but in my page object class,i was facing issues like below:
Error: locator.click: Test ended.
Call log:
- waiting for getByLabel('Next')
In spec file the code was working perfectly but seems its the issue with the page object "page".Intelli sense methods are also not showing up,tried different page methods like locator,click...etc..not working out...
I have followed the same way like constructor to assign this.page=page and iam using like this.page.locator() and other methods but still i was getting above kind of issues.
Could you pls help me out on this...
Error: page.waitForLoadState: Test ended.
at e2e/pages/loginpage.js:49
47 |
48 |
> 49 | await this.page.waitForLoadState("domcontentloaded");
I have to wait for some time to load the page in page object class,i tried all the options but its giving above issue
Could you help me out
Hi Talluri,
Ensure that the page object method which contains waitForLoadState is being properly awaited in the test
await loginPage.loadPage();
await this.page.waitForLoadState("domcontentloaded", { timeout: 10000 });
The problem here is waitforloadstate is giving problem like test ended.
thi.page.waitForLoadState("domcontentloaded");
i have seen previous video which was writting using Eclipse, now on VScode why is it so?
For playwright series I am using VSCode. For Seleniun Java series I have used Eclipse.
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!
how to find multiple elements using python? which locator or selector should i need?
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())
Can you please do an episode of Playwright automated test by using test data from a database
Sure as of now this guide will help medium.com/@Amr.sa/managing-database-integration-with-playwright-4b7484e98615
how to keep the browser open which is opened by PlayWright on mac
Its closes automatically everytime
if you have any video explaining how to write xpath and css selector in detail, can you please share the link.
Hi Sindhu, here is the link czcams.com/video/As72m9qrAQ8/video.html&pp=ygUnaG93IHRvIHdyaXRlIGR5bmFtaWMgeHBhdGggaW4gc2VsZW5pdW0g
@@Mukeshotwanithank you so much Mukesh
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("admin@email.com")
await this.password.fill("admin@123")
await this.loginBtn.click()
}
}
module.exports=LoginPage
Hi Mukesh, Is there any way we can compare 2 .csv files using Playwright with Typescript
import { parse } from 'csv-parse/sync';
import * as fs from 'fs';
import * as assert from 'assert';
function readCsvSync(filePath: string) {
const fileContent = fs.readFileSync(filePath, { encoding: 'utf-8' });
return parse(fileContent, {
columns: true,
skip_empty_lines: true,
});
}
function compareCsvFiles(file1Path: string, file2Path: string) {
const data1 = readCsvSync(file1Path);
const data2 = readCsvSync(file2Path);
// You might want to customize comparison logic based on how exactly you need to compare these files
assert.deepStrictEqual(data1, data2, "CSV files do not match!");
}
// Example usage:
compareCsvFiles('path/first.csv', 'path/second.csv');
and how do i debug in play wright
I have video on debugging in playwrigt please check
kindly add custom commands in the playwright typescript.