Hey Meena, Glad the video helped you! Selenium and Playwright are the two most popular frameworks when it comes to test automation. Selenium is quite old as compared to Playwright, and both of them have their own set of advantages and limitations. However, will surely consider creating a video around the comparison.
Very nice explanation. Iam struggling to find locator of an input textbox with id = "username134". Where the number is 134 keeps on changing every time. Could you help with the locator. I tried the below but not working in typescript page.locator("//input[contains(@id, 'username')]")
Hey there, For handling dynamic element IDs in your test scripts with Playwright in TypeScript, when the ID changes as in your example (username134 where 134 can change), using contains with the @id attribute is a good approach. However, Playwright's locator API uses CSS selectors and text selectors by default, not XPath, which is why your current approach may not be working as expected. To target an element with a dynamic ID that always starts with a specific prefix (like username in your case) using Playwright, you can use the CSS attribute selector that matches the beginning of the attribute value. Here's how you can do it: page.locator('input[id^="username"]') This selector uses the ^= operator, which matches elements whose id attribute value begins with "username". Here's what each part means: input: Targets elements. [id^="username"]: Targets elements whose id attribute value starts with "username". This approach should work reliably for any input element whose ID starts with "username", regardless of the digits that follow.
Hey there, You can handle alerts by using the page.on('dialog', async dialog => { await dialog.dismiss(); }); method in Playwright. For username and password, use the page.authenticate({username, password}) function. For more, please refer to the documentation here: playwright.dev/docs/auth
I'm working on a test where I have I get an alert with two options: Ok and Cancel. I have to click Ok to continue with the test. When I do the steps manually then the alert appears and I can click Ok and proceed with the test. When I do it with Playwright, then the alert just doesn't appear so it continues without that which leads to some changes on the page not being saved. What can I do for that? Is there something that I have to change in playwright config that could be causing the alert to not appear?
Hi Damanbir, It sounds like the issue with Playwright might be related to the way it handles JavaScript dialogs such as alerts, confirms, and prompts by default. Playwright typically auto-dismisses these dialogs, which might explain why you don’t see the alert when running your tests. You can manage this behavior by setting up an event listener for the dialog event, which will allow you to intercept and interact with dialogs programmatically.
Thank you for your help. I had figured it out after I left this comment. I just had to add the dialog handling before the action that triggers it. I was clicking on a button that would trigger a JS alert but because I was handling it after that, it was already dismissed by that time. When I worked with Selenium, I would trigger the alert first and them handle it so that confused me. Once again, thank you.
GitHub Repo: github.com/ortoniKC/playwright-ts-lambdatest
Amazing video 😁 Can you please have a video on the Playwright's assertions?
Thanks Kinza, Sure. Will consider this while creating next set of videos
Thanks for the video. It really helped me with my query 👍 Can you please create a quick video on Selenium vs Playwright? Which one is better to use?
Hey Meena, Glad the video helped you! Selenium and Playwright are the two most popular frameworks when it comes to test automation. Selenium is quite old as compared to Playwright, and both of them have their own set of advantages and limitations. However, will surely consider creating a video around the comparison.
Very nice explanation. Iam struggling to find locator of an input textbox with id = "username134". Where the number is 134 keeps on changing every time. Could you help with the locator. I tried the below but not working in typescript
page.locator("//input[contains(@id, 'username')]")
Hey there,
For handling dynamic element IDs in your test scripts with Playwright in TypeScript, when the ID changes as in your example (username134 where 134 can change), using contains with the @id attribute is a good approach. However, Playwright's locator API uses CSS selectors and text selectors by default, not XPath, which is why your current approach may not be working as expected.
To target an element with a dynamic ID that always starts with a specific prefix (like username in your case) using Playwright, you can use the CSS attribute selector that matches the beginning of the attribute value. Here's how you can do it:
page.locator('input[id^="username"]')
This selector uses the ^= operator, which matches elements whose id attribute value begins with "username". Here's what each part means:
input: Targets elements.
[id^="username"]: Targets elements whose id attribute value starts with "username".
This approach should work reliably for any input element whose ID starts with "username", regardless of the digits that follow.
Quality content, thanks 🤩
Thanks Mansi
Great video 😍 Can you show us how to use this feature to automate the date picker in Playwright?
Hi Kaushiki, You can follow this video to automate the date picker in Playwright: ua-cam.com/video/EtpASWgbWPg/v-deo.html
I want to handle prompt alert voor username and password? How can I do this? Help you please..
Hey there,
You can handle alerts by using the page.on('dialog', async dialog => { await dialog.dismiss(); }); method in Playwright. For username and password, use the page.authenticate({username, password}) function.
For more, please refer to the documentation here: playwright.dev/docs/auth
I'm working on a test where I have I get an alert with two options: Ok and Cancel. I have to click Ok to continue with the test. When I do the steps manually then the alert appears and I can click Ok and proceed with the test. When I do it with Playwright, then the alert just doesn't appear so it continues without that which leads to some changes on the page not being saved.
What can I do for that? Is there something that I have to change in playwright config that could be causing the alert to not appear?
Hi Damanbir,
It sounds like the issue with Playwright might be related to the way it handles JavaScript dialogs such as alerts, confirms, and prompts by default. Playwright typically auto-dismisses these dialogs, which might explain why you don’t see the alert when running your tests.
You can manage this behavior by setting up an event listener for the dialog event, which will allow you to intercept and interact with dialogs programmatically.
Thank you for your help.
I had figured it out after I left this comment. I just had to add the dialog handling before the action that triggers it. I was clicking on a button that would trigger a JS alert but because I was handling it after that, it was already dismissed by that time.
When I worked with Selenium, I would trigger the alert first and them handle it so that confused me.
Once again, thank you.
//button[text()='Save Changes'])[1] is not valid xpath its not working with this , changed to //*[@id='myModal']/div/div/div[3]/button[2]
Hey there, Glad you liked it 😇
Make sure you subscribe to our UA-cam channel for more 👋🏻