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!
Hey there, Thank you for your feedback! Looping through new data in each text box with Playwright is a powerful testing technique. To achieve this, you can use a loop in your script, and for each iteration, input new data into the text box, and then execute your test steps. Ensure your loop iterates through all the data you have.
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.
Here's a simplified way to set up dropdown selection with POM: - Page Object Class: Define your dropdown as an element in your page object class and provide a method to select an option from it. class ExamplePage { constructor(page) { this.page = page; this.dropdownSelector = 'your-dropdown-css-or-xpath-selector'; } async selectDropdownOption(value) { const dropdown = await this.page.$(this.dropdownSelector); await dropdown.selectOption(value); } } module.exports = ExamplePage; - Spec File: In your spec or test file, create an instance of the page object and call the method to select a dropdown option. const { test, expect } = require('@playwright/test'); const ExamplePage = require('./ExamplePage.js'); test('Select dropdown option', async ({ page }) => { const examplePage = new ExamplePage(page); await page.goto('your-test-url'); await examplePage.selectDropdownOption('optionValue'); // Your assertions here }); This way, you encapsulate the dropdown behavior within the page object and still have the flexibility to select different options in your test scenarios. If you still face issues, ensure that: Your selectors are correct. - The selectOption method is being correctly used. - Any required libraries or dependencies are properly imported. - Ensure that the Playwright version you're using supports the methods and patterns you're implementing.
Hello, import { test, expect } from "@playwright/test"; 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? :(
Hey there, It seems you might be facing an issue with the way your environment is set up or how you're importing @playwright/test. Here are some steps you can try: - Ensure that you've installed the @playwright/test library correctly. You can reinstall it with: - Ensure that the file you're trying to execute is correctly structured as a Playwright test. The test should follow the standard format of: import { test, expect } from "@playwright/test"; test('some description', async ({ page }) => { // your test code here }); - Try running the test directly using the Playwright test runner instead of your npx playwright test [your-test-file-name] - If you're using any configuration files, ensure they are set up correctly. Let us know if you face any issues
Hey Katyayani, If you're receiving an "undefined URL" error, it could mean that the URL variable you're trying to use is not properly defined or initialized before it's being used. Here are some general debugging steps you could follow: - Check the definition - Check the scope - Logging with console.log If you're still facing issues, please provide more details about your code or the context of the problem, and we would be happy to assist you further.
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.
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.
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?
Hey there, Thanks for reaching out, The code snippet you mentioned uses the Page Object Model (POM) pattern, a best practice in test automation that promotes code organization, reusability, and maintainability by encapsulating page elements and interactions within classes. This approach defines elements as properties of the class, making them easily accessible and manageable across different tests. The approach seen in the video might have been simpler and more direct, possibly for the sake of clarity or brevity in demonstration. Both methods are valid and work for automating tests with Playwright. The choice between them usually depends on the complexity of your test suite and your preferences for code structure and maintainability. The POM pattern is especially beneficial for larger projects and teams aiming for high maintainability and reusability of test code.
Hi Nishanth, The SelectorGadget Chrome extension can help you find CSS selectors for WebElements easily by simply clicking on them. It highlights related elements and refines selections.
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 expect(this.page.getByText(`Warning: No match for E-Mail Address and/or Password.`,{exact: true})).toBeVisible(); } Can I call in mytest something like this NewLoginPage.errormessage()
Hey @skhambampati , Yes, you can call the expect method from another method in Playwright. In your example, the errormessage method contains the expect assertion, and you can call this method from your test. Here's how you can do it: class NewLoginPage { constructor(page) { this.page = page; } async errormessage() { await expect(this.page.getByText('Warning: No match for E-Mail Address and/or Password.', { exact: true })).toBeVisible(); } } // In your test const newLoginPage = new NewLoginPage(page); await newLoginPage.errormessage(); This will call the errormessage method, which contains the expect assertion, ensuring the warning message is visible.
Thank you for your interest and appreciation! Glad you're finding value in our videos. Currently, we don't offer live classes, but you can catch all our instructional content on our RUclips channel. Make sure to subscribe for more insightful videos!
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 :(
Hey David, That's strange test.beforeEach(hookFunction) is the correct method to do this. Please also refer to the documentation playwright.dev/docs/api/class-test#test-before-each Can you any chance share us the code and we can try to find what's going wrong?
![SahBabii - Viking [Official Music Video]](http://i.ytimg.com/vi/D37cL92JX0I/mqdefault.jpg)
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!
Hey there,
Thank you for your feedback! Looping through new data in each text box with Playwright is a powerful testing technique. To achieve this, you can use a loop in your script, and for each iteration, input new data into the text box, and then execute your test steps. Ensure your loop iterates through all the data you have.
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.
Here's a simplified way to set up dropdown selection with POM:
- Page Object Class:
Define your dropdown as an element in your page object class and provide a method to select an option from it.
class ExamplePage {
constructor(page) {
this.page = page;
this.dropdownSelector = 'your-dropdown-css-or-xpath-selector';
}
async selectDropdownOption(value) {
const dropdown = await this.page.$(this.dropdownSelector);
await dropdown.selectOption(value);
}
}
module.exports = ExamplePage;
- Spec File:
In your spec or test file, create an instance of the page object and call the method to select a dropdown option.
const { test, expect } = require('@playwright/test');
const ExamplePage = require('./ExamplePage.js');
test('Select dropdown option', async ({ page }) => {
const examplePage = new ExamplePage(page);
await page.goto('your-test-url');
await examplePage.selectDropdownOption('optionValue');
// Your assertions here
});
This way, you encapsulate the dropdown behavior within the page object and still have the flexibility to select different options in your test scenarios.
If you still face issues, ensure that:
Your selectors are correct.
- The selectOption method is being correctly used.
- Any required libraries or dependencies are properly imported.
- Ensure that the Playwright version you're using supports the methods and patterns you're implementing.
Hello, import { test, expect } from "@playwright/test";
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? :(
Hey there,
It seems you might be facing an issue with the way your environment is set up or how you're importing @playwright/test. Here are some steps you can try:
- Ensure that you've installed the @playwright/test library correctly. You can reinstall it with:
- Ensure that the file you're trying to execute is correctly structured as a Playwright test. The test should follow the standard format of:
import { test, expect } from "@playwright/test";
test('some description', async ({ page }) => {
// your test code here
});
- Try running the test directly using the Playwright test runner instead of your
npx playwright test [your-test-file-name]
- If you're using any configuration files, ensure they are set up correctly.
Let us know if you face any issues
Hi, for me it showing undefined URL for the same that u have used. What can I do regarding that
Hey Katyayani,
If you're receiving an "undefined URL" error, it could mean that the URL variable you're trying to use is not properly defined or initialized before it's being used.
Here are some general debugging steps you could follow:
- Check the definition
- Check the scope
- Logging with console.log
If you're still facing issues, please provide more details about your code or the context of the problem, and we would be happy to assist you further.
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.
Thanks Juan for your kind words. Glad you liked it ❤
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.
Glad you liked it!
Please subscribe to our RUclips channel for more such videos 🌟
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?
Hey there,
Thanks for reaching out,
The code snippet you mentioned uses the Page Object Model (POM) pattern, a best practice in test automation that promotes code organization, reusability, and maintainability by encapsulating page elements and interactions within classes. This approach defines elements as properties of the class, making them easily accessible and manageable across different tests.
The approach seen in the video might have been simpler and more direct, possibly for the sake of clarity or brevity in demonstration. Both methods are valid and work for automating tests with Playwright. The choice between them usually depends on the complexity of your test suite and your preferences for code structure and maintainability. The POM pattern is especially beneficial for larger projects and teams aiming for high maintainability and reusability of test code.
Does Playwright have custom commands for repetitive operations as in cypress?
Hey there👋🏻
Playwright does not have built-in support for custom commands as Cypress does.
Thanks for making these tutorials. I appreciate the precise explanation 🤗
Thanks for liking the video Navya.
what is the googlle extentsion for finding locators easily?
Hi Nishanth,
The SelectorGadget Chrome extension can help you find CSS selectors for WebElements easily by simply clicking on them. It highlights related elements and refines selections.
Thank you so much for the excellent tutorials. I wonder what the difference between Page Object Model (POM) and Page Factory is? 🤔
POM is a design pattern, whereas page factory is a class in selenium.
Awesome explanation 🤩 Could you please share your playwright GITHUB link?
Hi Dushyant. Here's the GitHub Link: github.com/ortoniKC/playwright-ts-lambdatest. I have pinned it as well
Really excellent bro... Please keep it up..
Glad you liked this😊
Subscribe to our channel to never miss an update on the upcoming tutorials! ✨
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?
Hey Yasser,
Yes, we can use LetXPath to find the best XPath, CSS, and unique locators in any DOM. Stay tuned for new videos
Thanks a lot sir for the clear explanation. Keep doing great works sir 🤗
Glad you liked it!
Please subscribe the channel for more such videos🙂
LetXpath is really amazing. Able to double check my locators. Making automation easy. Thanks for that too 😊
Very useful. Thanks
Thanks for watching!
Subscribe, and look forward to more such tutorials! ✨
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.
Hi Srinivas,
Thanks for the suggestion! Subscribe, and look forward to more such tutorials! ✨
Hello Koushik, can you do a video for implementing builder pattern in typescript for ui automation with playwright
Thanks for the feedback!
Subscribe and look forward to more tutorials! ✨
Congrats on your great videos 🤩 Can you also make a video of using Javascript with Selenium?
Hi Jessica, Thanks for liking the video. We do have a playlist on Selenium with JavaScript: ruclips.net/p/PLZMWkkQEwOPl0udc9Dap2NbEAkwkdOTV3
Nice explanation bro
Thanks Jajati. Glad you liked it 💖
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 expect(this.page.getByText(`Warning: No match for E-Mail Address and/or Password.`,{exact: true})).toBeVisible();
}
Can I call in mytest something like this
NewLoginPage.errormessage()
Hey @skhambampati , Yes, you can call the expect method from another method in Playwright. In your example, the errormessage method contains the expect assertion, and you can call this method from your test.
Here's how you can do it:
class NewLoginPage {
constructor(page) {
this.page = page;
}
async errormessage() {
await expect(this.page.getByText('Warning: No match for E-Mail Address and/or Password.', { exact: true })).toBeVisible();
}
}
// In your test
const newLoginPage = new NewLoginPage(page);
await newLoginPage.errormessage();
This will call the errormessage method, which contains the expect assertion, ensuring the warning message is visible.
@LambdaThank you for taking the time and effort , are you providing online live classes , iam interested to take
Thank you for your interest and appreciation! Glad you're finding value in our videos. Currently, we don't offer live classes, but you can catch all our instructional content on our RUclips channel. Make sure to subscribe for more insightful videos!
GitHub Repo: github.com/ortoniKC/playwright-ts-lambdatest
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 :(
Hey David,
That's strange test.beforeEach(hookFunction) is the correct method to do this. Please also refer to the documentation playwright.dev/docs/api/class-test#test-before-each
Can you any chance share us the code and we can try to find what's going wrong?
David, Did you find the fix for the issue. I am also facing problem with my script.
@@LambdaTest if possible share us simple POM with test beforeEach. It will reduce our work on creating individual objects in all tests
Hey Arul 👋🏻
Can you any chance share us the code and we can try to find what's going wrong?
very nice
Glad you liked it!
Please subscribe the channel for more such videos🙂