How To Handle Alerts And Dropdowns | Playwright With TypeScript Tutorial ๐ŸŽญ| Part V | LambdaTest

า’ั‹ะปั‹ะผ ะถำ™ะฝะต ั‚ะตั…ะฝะพะปะพะณะธั

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
๐Ÿ› ๏ธ KZread: 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.

ะŸั–ะบั–ั€ะปะตั€: 18

  • @LambdaTest
    @LambdaTest2 ะถั‹ะป ะฑาฑั€ั‹ะฝ

    GitHub Repo: github.com/ortoniKC/playwright-ts-lambdatest

  • @AdmixKraft
    @AdmixKraft2 ะถั‹ะป ะฑาฑั€ั‹ะฝ

    Quality content, thanks ๐Ÿคฉ

  • @LambdaTest

    @LambdaTest

    2 ะถั‹ะป ะฑาฑั€ั‹ะฝ

    Thanks Mansi

  • @Vasavi_J
    @Vasavi_J4 ะฐะน ะฑาฑั€ั‹ะฝ

    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')]")

  • @LambdaTest

    @LambdaTest

    3 ะฐะน ะฑาฑั€ั‹ะฝ

    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.

  • @kinzakhan7698
    @kinzakhan76982 ะถั‹ะป ะฑาฑั€ั‹ะฝ

    Amazing video ๐Ÿ˜ Can you please have a video on the Playwright's assertions?

  • @LambdaTest

    @LambdaTest

    2 ะถั‹ะป ะฑาฑั€ั‹ะฝ

    Thanks Kinza, Sure. Will consider this while creating next set of videos

  • @meenachauhan8824
    @meenachauhan88242 ะถั‹ะป ะฑาฑั€ั‹ะฝ

    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?

  • @LambdaTest

    @LambdaTest

    2 ะถั‹ะป ะฑาฑั€ั‹ะฝ

    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.

  • @kaushikichauhan2362
    @kaushikichauhan23622 ะถั‹ะป ะฑาฑั€ั‹ะฝ

    Great video ๐Ÿ˜ Can you show us how to use this feature to automate the date picker in Playwright?

  • @LambdaTest

    @LambdaTest

    2 ะถั‹ะป ะฑาฑั€ั‹ะฝ

    Hi Kaushiki, You can follow this video to automate the date picker in Playwright: kzread.info/dash/bejne/d6iko7WQl8W9gMo.html

  • @user-ng9od2yl1n
    @user-ng9od2yl1n ะ–ั‹ะป ะฑาฑั€ั‹ะฝ

    I want to handle prompt alert voor username and password? How can I do this? Help you please..

  • @LambdaTest

    @LambdaTest

    11 ะฐะน ะฑาฑั€ั‹ะฝ

    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

  • @StingerSingh21
    @StingerSingh2113 ะบาฏะฝ ะฑาฑั€ั‹ะฝ

    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?

  • @LambdaTest

    @LambdaTest

    12 ะบาฏะฝ ะฑาฑั€ั‹ะฝ

    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.

  • @StingerSingh21

    @StingerSingh21

    12 ะบาฏะฝ ะฑาฑั€ั‹ะฝ

    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.

  • @sonardhananjay
    @sonardhananjay ะ–ั‹ะป ะฑาฑั€ั‹ะฝ

    //button[text()='Save Changes'])[1] is not valid xpath its not working with this , changed to //*[@id='myModal']/div/div/div[3]/button[2]

  • @LambdaTest

    @LambdaTest

    ะ–ั‹ะป ะฑาฑั€ั‹ะฝ

    Hey there, Glad you liked it ๐Ÿ˜‡ Make sure you subscribe to our KZread channel for more ๐Ÿ‘‹๐Ÿป

ะšะตะปะตัั–