How To Handle Alerts And Dropdowns | Playwright With TypeScript Tutorial 🎭| Part V | LambdaTest
ฝัง
- เผยแพร่เมื่อ 24 ก.ค. 2024
- Learn how to interact with different types of alerts and dropdowns in Playwright with the help of live examples.
Start FREE Testing: accounts.lambdatest.com/regis...
In this Part V of the Playwright tutorial series, 𝙆𝙤𝙪𝙨𝙝𝙞𝙠 𝘾𝙝𝙖𝙩𝙩𝙚𝙧𝙟𝙚𝙚, Content Creator at LetCode (@Koushik_chat) walks you through handling different alerts and dropdowns in Playwright. He explains various alerts like simple, confirm, prompt, and modal. He also discusses handling select, multi-select, and advanced dropdowns in the video.
🔹 𝑻𝒚𝒑𝒆𝒔 𝒐𝒇 𝑨𝒍𝒆𝒓𝒕 𝒊𝒏 𝑷𝒍𝒂𝒚𝒘𝒓𝒊𝒈𝒉𝒕
➡ Simple Alert: It will have some text and an "OK" button.
➡ Confirm Alert: It will have some text with "OK" and 'Cancel' buttons.
➡ Prompt Alert: It will have some text with a text box for user input and the "OK" and 'Cancel" buttons.
Ｖɪᴅᴇᴏ Ｃʜᴀᴘᴛᴇʀꜱ 👀
0:00 Alert & Dropdown intro
2:40 Simple alert
3:15 Strict violation
5:25 Locator nth
6:36 Accept alert
10:20 Confirm alert
13:00 Prompt Alert
16:00 Modal Alert
21:00 Dropdown
22:45 Select Options
28:10 Multi-select
30:30 Advance dropdown
38:30 SlowMo
39:20 Recap
40:17 Conclusion
📌𝑨𝒍𝒔𝒐, 𝒍𝒆𝒂𝒓𝒏 📃
🔸 How do you handle a playwright alert?
🔸 How do you handle a dropdown in a playwright?
🔸 How do you select a dropdown value in playwright?
📌 𝑮𝒊𝒕𝑯𝒖𝒃 𝑳𝒊𝒏𝒌: github.com/ortoniKC/playwrigh...
𝑪𝒐𝒎𝒑𝒍𝒆𝒕𝒆 𝑷𝒍𝒂𝒚𝒍𝒊𝒔𝒕
✔️ How To Setup Playwright Test Automation Framework: bit.ly/3MPy1i0
✔️ How To Use Functions And Selectors: bit.ly/39s5XUm
✔️ Playwright Testing Features: bit.ly/3u47y9W
✔️ How To Handle Inputs And Buttons In Playwright: bit.ly/3Ac2oMU
*𝑼𝒔𝒆𝒇𝒖𝒍 𝑫𝒐𝒄𝒔*
🔹 How To Run Playwright Tests On LambdaTest Platform: bit.ly/3t5w0XI
🔹 Run Your First Playwright Test On LambdaTest Platform: bit.ly/3x1jRWi
🔹 How To Run Playwright Tests In Parallel: bit.ly/3GyRORe
🔹 Migrate Existing Playwright Test Suites On LambdaTest: bit.ly/3PRFH5T
🔹 Test Execution Setup: bit.ly/3PONYYp
🔹 Run Local Tests Using Playwright: bit.ly/3z6jc7q
🔹 Running Playwright Tests With Playwright Test Runner: bit.ly/3N1WLo7
🔹 Running Playwright Tests With Cucumber.js: bit.ly/3xaKHvr
🔹 Running Playwright Tests In CI/CD: bit.ly/3GzDs3d
Sign Up for LambdaTest! It’s FREE 🙌
Perform scalable and reliable cross-browser compatibility testing of your website and web app on the latest mobile and desktop browsers: accounts.lambdatest.com/regis...
𝑹𝒖𝒏 𝒚𝒐𝒖𝒓 𝑷𝒍𝒂𝒚𝒘𝒓𝒊𝒈𝒉𝒕 𝒕𝒆𝒔𝒕 𝒔𝒄𝒓𝒊𝒑𝒕𝒔 𝒊𝒏𝒔𝒕𝒂𝒏𝒕𝒍𝒚 𝒐𝒏 𝟓𝟎+ 𝒃𝒓𝒐𝒘𝒔𝒆𝒓 𝒂𝒏𝒅 𝑶𝑺 𝒄𝒐𝒎𝒃𝒊𝒏𝒂𝒕𝒊𝒐𝒏𝒔 𝒖𝒔𝒊𝒏𝒈 𝒕𝒉𝒆 𝑳𝒂𝒎𝒃𝒅𝒂𝑻𝒆𝒔𝒕 𝒄𝒍𝒐𝒖𝒅. 𝑬𝒙𝒆𝒄𝒖𝒕𝒆 𝑷𝒍𝒂𝒚𝒘𝒓𝒊𝒈𝒉𝒕 𝒕𝒆𝒔𝒕𝒊𝒏𝒈 𝒊𝒏 𝒑𝒂𝒓𝒂𝒍𝒍𝒆𝒍 𝒂𝒏𝒅 𝒄𝒖𝒕 𝒅𝒐𝒘𝒏 𝒚𝒐𝒖𝒓 𝒕𝒆𝒔𝒕 𝒆𝒙𝒆𝒄𝒖𝒕𝒊𝒐𝒏 𝒕𝒊𝒎𝒆 𝒃𝒚 𝒎𝒖𝒍𝒕𝒊𝒑𝒍𝒆 𝒇𝒐𝒍𝒅𝒔. 𝑲𝒏𝒐𝒘 𝒎𝒐𝒓𝒆: bit.ly/3avWLhF
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
For questions: support@lambdatest.com 😃
*𝑬𝒙𝒑𝒍𝒐𝒓𝒆*
🎬 Most Recent Videos: bit.ly/3kUUeAQ
🎓 Learning Hub: bit.ly/3fr6l4Z
🎥 LambdaTest Customers: bit.ly/2TB7pvD
🚀 Webinars: bit.ly/37i41co
🛠️ Product Updates: bit.ly/3717NGO
💬 LambdaTest Certifications: bit.ly/3x4EtcY
*𝑺𝒐𝒄𝒊𝒂𝒍*
📝 BLOG: bit.ly/3yGVsUc
👥 COMMUNITY: bit.ly/3Aiz5oO
🔴 NEWSLETTER: bit.ly/3juhxzc
🖼️ GITHUB: bit.ly/3jowfYs
🛠️ TH-cam: bit.ly/3rH2Yfh
🌎 LINKEDIN: bit.ly/3xA6F84
👥 FACEBOOK: bit.ly/37mbQOa
🐦TWITTER: bit.ly/3Cn0g3A
📸 PINTEREST: bit.ly/2VCXI05
#playwrighttutorial #playwrighttesting #lambdatesttutorial #playwrightautomation #playwright #microsoftplaywright #playwrightautomationtutorial #playwrightframework #playwrighttestingtool
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. - วิทยาศาสตร์และเทคโนโลยี
![ลักพาตัว เอาลูกเอิร์นกลับมา...!! [เอิร์นไดเม่]](http://i.ytimg.com/vi/f4NVKlZ5qkk/mqdefault.jpg)
GitHub Repo: github.com/ortoniKC/playwright-ts-lambdatest
Quality content, thanks 🤩
Thanks Mansi
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.
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.
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: th-cam.com/video/EtpASWgbWPg/w-d-xo.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 TH-cam channel for more 👋🏻