Complete Playwright Testing Tutorial | An End to End Playwright with TypeScript Course 🎭| LambdaTest
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- This Playwright testing tutorial covers everything you need to get you up and running with the Microsoft Playwright framework with TypeScript.
Start FREE Testing: accounts.lambdatest.com/regis...
In this complete Playwright tutorial, 𝙆𝙤𝙪𝙨𝙝𝙞𝙠 𝘾𝙝𝙖𝙩𝙩𝙚𝙧𝙟𝙚𝙚 (@Koushik_chat), Content Creator at LetCode walks you through the introduction to Playwright and its excellent features, with their in-depth tutorials, for better understanding. This course has multiple chapters and covers the following topics:
🔹 What is the Playwright framework?
🔹 How to install Playwright?
🔹 How to use functions and selectors in Playwright?
🔹 What are some specific Playwright testing features?
🔹 How to handle inputs and buttons in Playwright?
🔹 How to interact with alerts and dropdowns in Playwright?
🔹 How to handle frames and windows in Playwright?
🔹 What is Date Picker in Playwright?
🔹 How to upload and download files in Playwright?
🔹 What is the page object model in Playwright?
🔹 What are Playwright fixtures?
🔹 How to do cross-browser testing on LambdaTest cloud?
Ｖɪᴅᴇᴏ Ｃʜᴀᴘᴛᴇʀꜱ 👀
0:00:00 Introduction
0:00:24 What is Playwright?
0:08:04 How to write a basic script with Playwright using functions & selectors?
0:33:18 Playwright’s futuristic features
1:00:15 How to interact with inputs and buttons?
1:27:00 Alerts and dropdowns in Playwright
2:07:16 Frames and Window handling in Playwright
2:43:32 How to handle date picker/calendar in Playwright?
3:13:48 Uploading and downloading files in Playwright
3:34:23 Page Object Model in Playwright
4:21:57 Playwright fixtures
4:55:02 Cross-browser testing in Playwright and execution on the LambdaTest platform
Conclusion
📌Also, learn 📃
🔸 Is Playwright easy?
🔸 Is Playwright better than Selenium?
🔸 How do you start a Playwright?
🔸 What framework does the Playwright use?
🔸 Is Playwright the future?
*𝑼𝒔𝒆𝒇𝒖𝒍 𝑹𝒆𝒔𝒐𝒖𝒓𝒄𝒆𝒔*
🔹 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...
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 #playwrightautomation #playwright #microsoftplaywright #playwrightautomationtutorial #playwrightframework #playwrighttestingtool #playwrightjstutorial #learnplaywright #playwrightautomationtool
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. - วิทยาศาสตร์และเทคโนโลยี
📍📌 𝑮𝒊𝒕𝑯𝒖𝒃 𝑳𝒊𝒏𝒌: github.com/ortoniKC/playwright-ts-lambdatest
This is not a right project link for this video
That is the Java project...
Here is the correct project link- github.com/ortoniKC/playwright-ts-lambdatest
Thanks Koushik for an awesome playlist for playwright, Very cleanly composed and neatly explained. thanks a ton for creating this video & its very very helpful !
Thanks for watching 💫
Make sure you subscribe to our TH-cam channel for more!👋
@kaushik this is one of the best video tutorials I've come across. The pace and the level of details are perfect. You're amazing. Well done 👍
Glad you liked it! 😊
Make sure you subscribe to our TH-cam Channel for more such tutorials!
It's awesome video and very easily able to understand. Thank you so much!
Hey Deepa, Glad you liked it 😇
Make sure you subscribe to our TH-cam channel for more 👋🏻
Many thanks Koushik. Great tutorial.
Glad you liked it!
Subscribe, and look forward to more such tutorials! ✨
That was really helpful, thank you!
Glad you liked it! 🙌
Thank you Koushik!
Glad you liked it.
Please subscribe to our TH-cam channel for more such videos 🌟
Thank you very much for the great tutorial!
Happy to help!
Excellent ! Best of the best !
We're delighted that you found this valuable! 😊
Don't forget to subscribe to our channel so you won't miss any updates on our upcoming tutorials! ✨
Thanks for this great tutorial. I didn't understand fixtures at all until you explained them so clearly.
Glad to hear the tutorial was helpful for you!
Do subscribe the channel for more such tutorials !🙂
great tutorial 🙂 thank you!
You’re welcome 😊
This is amazing. Thanks a lot.
Happy to help
Very useful video. Thank you so much for sharing the information in detail. Started watching this video today. Very informative.
Glad it was helpful!
Thanks!! You did a great job.
Glad it was helpful!
I'm still in the half way of this Course . Thanks man really needed this.
Glad you liked it,
Subscribe to our channel for more such tutorials! ✨
Awesome!!, Thank you
Glad you liked it!
Subscribe, and look forward to more such tutorials! ✨
Great explanation, thanks 💯
Glad it was helpful!
great stuff, very practical
Glad it was helpful,
Look forward to more such tutorials! ✨
Thank you sir for the detailed tutorial
Glad it was helpful!
Please subscribe the channel for more such videos🙂
Great work.
Thank you! Glad you liked it 😇
thank you for putting this so well together. I am transiting from load and performance testing to automation and you are making it very easy! Awesome!
Glad you found this helpful😊
Subscribe to our channel to never miss an update on the upcoming tutorials! ✨
Bro Your LetXpath tool is amazing . keep the good work
Glad the video was helpful!
Please subscribe the channel for more such videos🙂
Great tutoring.
Glad you like it ✨
Make sure you subscribe to our TH-cam channel for more 👋🏻
great tutorial 🙂
Thank you! Cheers!💖
Hey Kaushik...
I have started watching your series and it's about to finish... i must say the way you are teaching things are super awesome and easy to digest... Thanks a ton brother... Stay blessed ❤️
We're glad you found this tutorial helpful😊
Subscribe, and look forward to more such tutorials! ✨
Great explanation
Glad you found this helpful😊
Subscribe to our channel to never miss an update on the upcoming tutorials! ✨
This is awesome, thank you! Question: At the bottom of the inspect window, when you are on the elements tab you have an input box where you are typing in text and it's telling you how many times that appears on the page--like you type in My Account and it says 3 of 3. How do you get this input field to be part of your inspect tab? I don't have it on mine. Thanks!
Hey Sean,
Glad you liked our video. Can you please try searching for the element in the dev console of your browser. This will help to find the frequency of matches of the particular element you are trying to pick.
Thanks brooooooo
Glad you liked it 💖
Thank you Kaushik for the wonderful tutorial. I think you should become a trainer in any teaching marketplace and offer this course. :). Btw, have one request. Could you please explain how to automate chrome/webkit extensions using Playwright. Thanks in advance !
Hey Raghu,
Thank you for your kind words, We are glad you found the tutorial helpful!
Regarding your question about automating Chrome/Webkit extensions using Playwright, it is definitely possible. You can interact with extensions in the same way you would interact with any other element on a web page.
For example, we can first navigate to a page where the extension is active. Then we wait for the extension button to appear and click it. This opens the extension popup. We wait for the popup to appear and interact with its elements, filling in an input field and clicking a submit button.
Keep in mind that the selectors and interactions with your specific extension may vary, so you'll need to inspect the extension's HTML and determine the appropriate selectors to use.
I hope this helps! Let me know if you have any other questions.
Loved the Video Kaushik! Just a quick query, could you refer me to the video in which you explained the getting xpath concept? I didn't seem to really get that how we copied that. Would really appreciate that! THANK YOU!
Hey @gauravgulati5490 , Glad you enjoyed the video. For understanding the concept of getting XPath, you can check out this video: th-cam.com/users/liveXx9gCdnxHeo
As, we don't have any specific video by Koushik on this. You can also go through this blogs: www.lambdatest.com/blog/complete-guide-for-using-xpath-in-selenium-with-examples/
amazing
Glad you liked it!
Subscribe, and look forward to more such tutorials! ✨
Hi,
Thanks for the mind blowing explanation. Can you please make a video on typescript which I required for playwright.
Hey Raks,
Please have a look at this playlist th-cam.com/video/wawbt1cATsk/w-d-xo.html
@koushik,thanks for the video. How to compare two list using expect. Can you please explain string manipulations in typescript.
Hey there,
To compare two lists in Jest, use expect(array1).toEqual(array2); where array1 and array2 are your lists.
For TypeScript string manipulations:
slice(start, end): Gives a new string from start to end.
replace(old, new): Replaces old with new in the string.
split(separator): Splits the string into an array based on separator.
Hope this helps!
Great video so far! Clear and concise, thank you very much! I wanted to inform you there's an error in the locator under "How to interact with inputs and buttons" section. I was trying to use your locator "//button[text()='Get values']" but the test failed. Unsure if your locator has been updated. Thought i'd put it out but great clear tutorial so far :)
Hey there,
Thank you for your kind words and for pointing out the issue with the locator. It's possible that the web page structure has changed since the video was published, which can often lead to locators becoming outdated. We recommend trying to update the locator by inspecting the element on the current version of the webpage.
For instance, if the button text has changed or if the button is now nested within another element, you may need to adjust the XPath accordingly. We'll make a note to review and update the tutorial to ensure it remains accurate.
Your feedback is invaluable in helping us improve our content. If you continue to face issues, please don't hesitate to reach out for more assistance.
Hello Koushik, and thank you for the great course!
I'm at the Page Object Model chapter, trying to add an item from the "Special Hot" page to my cart, but the "Special Hot" list is empty: "There are no special offer products to list".
I would try a different screen, but I'm very new to all this, so I'm trying to follow the video steps.
Hey George,
Thank you for the kind words, glad you liked our video
Regarding the "Special Hot" page issue, it seems like the demo website's content might have changed or there could be a temporary issue.
If the "Special Hot" list is empty, you might try automating another similar list or page on the website. The idea is to understand and apply the concept of Page Object Model, so the specific content isn't crucial.
Great Video Koushik. How did you get the comments when using the recorder? I tried but I see No comments in the script.
Hey there👋🏻
Glad you liked our video! ❤️
Playwright's built-in recorder should automatically generate comments in the script, indicating actions like clicks or navigations.
If you are not seeing comments, it might be due to using an older version of Playwright. Try updating to the latest version of Playwright using the command:
npm install playwright
After updating Playwright, you can launch the recorder using the command:
npx playwright codegen
When you interact with the webpage in the launched browser, it should generate comments in the output script.
Hi Kaushik,
I started watching your playwright series. Its so so useful for the beginners.
Iam not able to get in built methods in like (goto, click()....). Do I need to install any extension for this to get autosuggestions foe methods
Hey Meera,
We are glad you liked our video.
You can try the following snippets on Visual Studio Code Editor
- Playwright Snippets: Provides code snippets specifically for Playwright methods, making it easier to write code.
- JavaScript (ES6) code snippets: Offers a collection of useful JavaScript code snippets.
Hope it helps 🌟
Great tutorial, how can I open the recorder in my current window instead of Incognito using "npx playwright codegen"
Hey there,
Thanks for your kind words!
To open the recorder in your current window instead of an Incognito window using 'npx playwright codegen,' you can specify the 'channel' option in the command. Use the following command:
npx playwright codegen --channel=chrome
This will launch the recorder in a regular Chrome window. Enjoy testing
Thank you for the the tutorial, it has been really helpful..
At 1:45 you said there was a failure and the screen shot which was captured was only of the last step. So how do we get the screenshot of the step which actually failed instead of last step?? Also can we code in a way that of there is a failure take a screenshot by scrolling into view of the element which had a failure??
Hey @avanigarimella1220 , to take the full page screenshot follow this guide this might be helpful to your query : www.lambdatest.com/blog/playwright-screenshot-comparison/
Hi Kaushik, thank you for the well-explained video. Could you give an example of selecting a radio button? thank you!
Hey there,
Glad you liked our video
Playwright makes it straightforward to interact with web elements, including radio buttons. Here's a simple example on how to select a radio button based on its value or label:
public class RadioExample {
public static void main(String[] args) {
try (Playwright playwright = Playwright.create()) {
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
Page page = browser.newPage();
// Navigate to the page with the radio button
page.navigate("example.com");
// Select a radio button by its value
page.check("input[type='radio'][value='your_radio_button_value']");
// Alternatively, select a radio button by its label
page.check("text=The label of your radio button");
// Do something else after selecting the radio button...
// Close the browser
browser.close();
}
}
}
Thank you!
thank you , that was very good
would you please gave us the repo of this project?
📍𝐆𝐢𝐭𝐇𝐮𝐛 𝐋𝐢𝐧𝐤: github.com/ortoniKC/LambdaTest-Playwright-Java
Hello!
Thanks for the great course!
There is currently no Javascript tab in the Inspector. Is this now the default?
Why is expect(page).toHaveURL no longer showing up? Was it abolished?
Hey there,
We are glad to hear that you're finding the course valuable! Regarding your queries about the JavaScript tab in the Inspector and the expect(page).toHaveURL method:
JavaScript Tab in Inspector:
The availability of a JavaScript tab or similar feature in the Inspector tool can depend on the specific browser or development tools you are using. For example, in Chrome DevTools, you usually work with JavaScript in the Console tab or the Sources tab.
expect(page).toHaveURL Method:
The expect(page).toHaveURL is typically a part of the Playwright testing library. If you're using Playwright and this method is not recognized, it could be due to several reasons:
Version Mismatch: Ensure that you are using a version of Playwright that supports this assertion. Check the Playwright release notes for information on when this feature was introduced or if there have been any changes.
Correct Imports: Verify that you have correctly imported the necessary modules in your test script.
Please let us know if this helps
Thank you so much Kaushik for your reply on my last question. That was really helpful and got a good understanding of the code now.
I do got another question this time, Is it possible in Playwright that we can verify/validate that after a process I am getting an email for that process.
For ex: I have made a transaction in a system and got a email about my transaction, in this scenario I want to test that email receiving for that transaction made.
Please let me know if we can integrate the email with playwright and verify the email and if we can that then what is the process of doing it.
Thanks
Hey there,
Glad you like the videos ❤
While Playwright doesn't directly handle emails, by leveraging external email testing services and their APIs, you can effectively automate email verification as part of your end-to-end testing process.
Mailosaur, Mailtrap, and TestMail are examples of services that provide APIs to programmatically check emails. These services can be integrated into your Playwright tests to verify the receipt and content of emails. Here's a high-level overview of how you might do it with such a service:
Step 1: Sign up for an email testing service and get your API key.
Step 2: Use the service’s SMTP settings to send your application's emails to a sandboxed email server during testing.
Step 3: In your Playwright test, after triggering the action that sends an email (like completing a transaction), use the email service's API to check the inbox for the new email. This typically involves sending a request to the service’s API endpoint and querying for the latest email that matches certain criteria (like subject line, sender, etc.).
Step 4: Assert the presence of the email and optionally inspect its content to verify that the transaction details are correct.
Hello Koushik, can you kindly share the css selectors extension you used for this playwright course.
Hey there 👋🏻
You can try the css selector extension tools from the list ginva.com/2017/03/css-selector/
Thanks a lot.
I have a question:
In section 1:40:55
you've explained how to handle three alert types.
What about smart-card auth alert?
cannot find a solution for this one, it's a very big problem for me, I might have to move to Cypress - and I really really don't want to!!
Hey there,
Handling smart-card authentication alerts can indeed be a challenge in automation testing.
- CDP (Chrome DevTools Protocol): While Playwright has a rich API, sometimes you might need to drop down to using the raw Chrome DevTools Protocol. It's more complex but can provide solutions to certain challenges. You can use browserContext.newCDPSession(page) to establish a session and then issue commands to interact with Chrome directly.
- Use Browser Contexts: Playwright's browser contexts can be used to create isolated sessions. You can set permissions or bypass certain modals in these contexts, which might give you a way around the alert.
- Bypassing Authentication: If you're working in a development or testing environment, see if there's a way to bypass smart-card authentication. This makes your automation easier and you can still test the critical functionalities without the need for handling the alert.
Hello Koushik..any inputs on where/when to use the fixture in real time scenario ? or with in the framework using Page Object Model
Hey Harish 👋🏻
Playwright Test is based on the concept of test fixtures. Test fixtures are used to establish environment for each test, giving the test everything it needs and nothing else. Test fixtures are isolated between tests. With fixtures, you can group tests based on their meaning, instead of their common setup.
Oh my lord, I was hoping to learn this in 6 minutes, but I think I have.
Glad you found this helpful😊
Subscribe to our channel to never miss an update on the upcoming tutorials! ✨
Thanks for this tutorial. This might be a silly question but, that input at the bottom of your developer tools in chrome where you just write xpath or css and get the elements, how do you get it? is that an extension?
It's a search box, you can activate it by pressing Ctrl+F
Thanks, This is very useful for beginners. Can you please suggest how to proceed on testing of video/audio elements using playwright ?
Great suggestion! Please look forward to our upcoming tutorials for more.
Great Tutorial !! Very detailed step by step instructions which makes the beginners life easier and get confidence to learn this tool. Can you please let me know if we have any specific code queries, how to reach out to you? Bcz in my current project we are migrating to Playwright. As I have only Selenium Java exp looking forward for your help.
Thanks
Hey Jyothi,
We are glad you liked our video.
You can reach out to us at support@lambdatest.com for any queries, we will be happy to help.
Do you have any tutorial on installation part where you just use commands rather than vscode extensions?
Hey there,
You can refer to the learning hub article on Playwright Testing Tutorial: www.lambdatest.com/playwright
Happy to help if you face any issues.
Hi Kaushik, ur explanation is awesome, could you do videos on codeceptjs?
Thank you for your suggestion, we will surely take it into account as we plan future video sessions.
Hi Kaushik,
Hope you are doing well!
As always Thank you so much for your videos :)
This time I wanted to ask is - How we can run one test case with multiple different logins parallelly in Playwright with typescript(kind of load testing)
Hi there,
We're glad to hear from you, and it's wonderful that you're finding the videos helpful!
Running a test case with multiple different logins simultaneously in Playwright with TypeScript can indeed simulate a form of load testing and is great for testing how your application handles concurrent sessions. Here’s a basic outline of how you can achieve this:
Use Test Parameterization: Playwright Test allows you to run parameterized tests. You can define multiple test scenarios with different login credentials. Here’s a simple example:
// Define multiple credentials
const credentials = [
{ username: 'user1', password: 'pass1' },
{ username: 'user2', password: 'pass2' },
// Add more credentials as needed
];
// Parameterized test
credentials.forEach(cred => {
test(`Login test for ${cred.username}`, async ({ page }) => {
await page.goto('your-app.com/login');
await page.fill('input#username', cred.username);
await page.fill('input#password', cred.password);
await page.click('text=Login');
// Add assertions and further actions here
});
});
First, it is amazing, and thank you for the easy explanation.
if I want to slowMo the execution how to do that within the test that inherits {page} in the playwright test?
test("Login test demo", async ({ page, browser, context }) => {
// const browser = await chromium.launch({ slowMo: 500 }); => this can't be done if page inherites not created
Hey Mamdoh,
We are glad that you found this video helpful.
If you want to slow down the execution of your test cases in Playwright, you can use the slowMo option when launching the browser. However, since you're using the page object that's passed to your test case, you can't set the slowMo option when launching the browser.
However, since you're using the page object that's passed to your test case, you can't set the slowMo option when launching the browser.
Hi, Can playwright support the automating the desktop applications? Like in selenium, we have Robot and AutoIt similarly is there any way to do these things from the playwright?
Hey there,
Playwright has support for automating Electron applications, which are desktop applications built with web technologies. You can use Playwright to interact with the web content within an Electron app. This requires launching the Electron application in a way that Playwright can connect to it, typically by using Playwright's electron API.
If a desktop application embeds a web view (using frameworks like Chromium Embedded Framework), you might be able to automate the web content part of the application using Playwright, provided you can access the web context. This would be more of a workaround and highly dependent on the specific application and its architecture.
Hi Kaushik,
Videos are awesome.
Can you please help me out in use of data tables using playwright javascript Cucumber BDD framework. How to pass thta table values to page file?
Hey Meera,
Glad you liked our video
To use data tables in Playwright with JavaScript and the Cucumber BDD framework:
- Define the Data Table in the feature file.
- Map the Data Table to step definitions and extract the table values.
- Pass the data table values to your page file or step implementation.
- Utilize the values in your page file for actions or assertions using Playwright.
Let us know if face any issues 🌟
Hi @kaushik could you please help make one video that how to send an email in playwright with latest report, at this point of time i can able to do it by nodemailer but it is not picking the nth report rather it’s picking n-1
Hey there
To send the latest report via email in Playwright, generate and store reports with a timestamp or unique identifier, sort them before sending, and use nodemailer to send the email with the latest report as an attachment. Ensure you select the latest report file correctly by reading and sorting the directory. Explore Node.js resources for help. I appreciate your suggestion for a video on this and will consider it for future content.
Thanks Koushik! When I try to run the test in headed browser (set the headless to false as demonstrated in your video), I got a error message like this: Looks like you launched a headed browser without having a XServer running. Do you have any idea how to fix it?
Hey there
Looks like you are running on linux without any window manager. Probably docker, wsl or you use ssh (that wont have X11 support (at least out of box)).
Setup a window manager, or use a full blown desktop linux.
Hi Kaushik, thanks for the awesome videos. I have a doubt. I recentlty started working in PlayWright and my page consists of lots of butttons and radio buttons. I want to selecte all buttons, save them in an array and do the assert. is it possible to select elements according to the tag name, in PlayWright? the tag name for buttons is
Hey Pratilpi
In Playwright, you can select elements by their tag name using page.$$. To get all buttons, use const buttons = await page.$$('button');. This returns an array of ElementHandle objects. To perform assertions, iterate through the array, extract properties, and compare them to expected values. For example, use Promise.all with map to fetch text content and perform assertions on button text.
How to use that selector letxpath? How to set like that?
Hey there 👋🏻
To select elements using XPath in Playwright, use the page.$x() method.
For Eg.
ElementHandle element = page.$x("//xpath-expression");
The page.$x() method returns an ElementHandle representing the first element that matches the XPath expression.
what is the extension being sed to generate xpath, uniqueId?
To generate XPath and unique IDs in Playwright, you can use the Rayrun Google Chrome Extension. This extension can generate CSS selectors, XPath, and Playwright locators for complex or deeply nested web elements.
Hi Koushik I have a query I have three tests in a file named ty.spec.ts namely
two one
One two one
don2 two one
I need to run only test “two one”
I am getting error if I use pattern match. Please help . I want to run through command line . Using macOS
Given the similar naming of your tests, it's possible the pattern is matching more than one test. Here’s how you can more specifically target the test "two one" in Playwright, especially when using macOS:
Use the Exact Match Flag in Playwright: Playwright's test runner allows you to specify an exact name match or a pattern. Since your tests have similar names, you should use a regex pattern that matches the exact test name to avoid ambiguity.
To run just the "two one" test and not any test that contains "two one", you can modify the command like this:
npx playwright test --grep '^two one$' ty.spec.ts
Here, ^ denotes the start of the string, and $ denotes the end of the string, ensuring that only the test exactly matching "two one" is selected.
Ensure You're in the Correct Directory: Before running the command, make sure you're in the directory that contains your ty.spec.ts file, or provide the correct path to the file.
Check for Typos and Syntax: Errors can also come from typos in your command or in the test name within your file. Verify that everything is spelled correctly and that you're using the right syntax for your test runner configuration.
Review Error Messages: The error message you receive can give clues about what's going wrong. If it’s a syntax error or a configuration issue, adjusting your Playwright setup or command line syntax might be necessa
Great video...but how to launch edge as normal browser instead of launching in incognito mode?
Hey Vasavi,
We are glad you liked the video
If you want to launch Microsoft Edge as a normal browser instead of in incognito mode, you can make a small adjustment to your Selenium WebDriver code.
In JavaScript, when creating an instance of the WebDriver for Edge, you can use the setEdgeOptions() method to customize the options for the Edge browser. To launch Edge in normal mode, you can disable the incognito mode option.
Hi Koushik,
The reports, screenshot and videos are not displaying for me.
I did the same setup inside the config.js.
Can you please help me out.
import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
testMatch: ["tests/UI_Automation/loginTest.spec.ts"],
use: {
headless: false,
screenshot: "on",
video: "on"
},
reporter: [["dot"], ["json", {
outputFile: "jsonReports/jsonReport.json"
}], ["html", {
open: "never"
}]]
};
export default config;
// Additional configuration options can be added here
Hey there,
The configuration you've posted for Playwright seems correct for enabling screenshots and videos during your tests, as well as for setting up reporters. If the reports, screenshots, and videos are not displaying or being generated as expected, there are a few common issues and troubleshooting steps you can take:
1. Check Playwright Version
Ensure you're using a version of Playwright that supports these features. While it's likely you are, if you're using a very outdated version, some features might not work as expected. You can update Playwright using npm or yarn:
npm install @playwright/test@latest
2. Verify Output Directories
By default, Playwright saves screenshots and videos in the test-results directory under the specific test directory. Make sure you have the correct permissions to write to these directories and that there's sufficient space.
3. Check for Errors in Test Execution
Sometimes, if tests fail to execute correctly (e.g., due to errors in the test code or setup issues), screenshots and videos might not be generated. Look for any error messages in the test output that might indicate what went wrong.
4. Inspect Playwright Configuration
While your configuration looks correct, ensure there are no overrides happening elsewhere that might disable screenshots or videos. For instance, if you're using environment variables or command-line arguments to run your tests, these can override your config settings.
Hi Kaushik, You videos are really a big help for me in daily work life :) Thank you so much (again) for making these videos.
As before I came up with one question : this time question is how to verify the popup/alert/dialog display on screen when a downloaded completed for a report(in my project) , this popup is displaying on browser's top right corner below download button (Browser's download button)
The test I am doing here is
- Click on Report button
- Entering a date range
- click on Download button - which download the report and shows a popup on browser's top right side with Download button and with default name like : Statement 00-01
I have tried below options but nothing is giving me anything in Console or output in report after execution
await this.page.waitForLoadState();
this.page.on('download', download => download.path().then(console.log));
this.page.on('dialog', async dialog=> {
console.log(dialog.message());
await dialog.dismiss();
})
OR
// Get all popups when they open
this.page.on('popup', async popup => {
await popup.waitForLoadState();
console.log(await popup.title());
Please let me know how can I get the report name from popup or can check the visibility of the popup after download ?
Thank you so much.
Hey there,
We are glad the videos have been helpful to you!
Regarding your query on handling browser download notifications and popups with Playwright, it seems you're trying to interact with or verify the browser's native download notification, which appears once a file download completes. This kind of notification is part of the browser's UI and not directly part of the webpage's DOM, making it challenging to interact with or verify directly using Playwright or any other web automation tool.
Playwright's primary focus is on interacting with web content within the context of the page's DOM. Since the browser's download UI is outside the DOM, Playwright doesn't provide a direct way to interact with these elements. However, you can work with download events in Playwright to verify that a file has been downloaded and to obtain information about the downloaded file.
Verifying File Download and Obtaining File Information
While you cannot directly access the browser's download notification popup, you can verify a download has occurred and get the file's name through Playwright's download event listener. Here's an approach to handle and verify file downloads:
// Assuming you have a page object already initialized
await page.click('#reportButton'); // Click on Report button
// Assume you set the date range here
await page.click('#downloadButton'); // Click on Download button to start the download
// Wait for the download event and get the download object
const download = await page.waitForEvent('download');
// Get the path to the downloaded file
const path = await download.path();
console.log(`Downloaded file path: ${path}`);
// To get the download's suggested filename (e.g., "Statement 00-01.pdf")
const filename = download.suggestedFilename();
console.log(`Downloaded file name: ${filename}`);
// Your further assertions or checks can go here, for example:
// Verify the filename matches expected pattern
expect(filename).toMatch(/Statement \d{2}-\d{2}\.pdf/);
This code listens for a download event on the page and then uses the download object to get the path and the suggested filename of the downloaded file. You can use this information to verify that the download has completed and that the filename matches your expectations.
Let us know if this resolves your problem.
Hi ,
we have a scenario where -
When we try to Automation our application, we have multiple popup’s coming all over through the application, so we are not sure if the pop up comes up or not, it depends on the different scenarios to the pop up to show or not.
so in this scenario how to Handle these situations where if the popup shows click on ‘close’ or if the pop up doesn’t show continue with the test.
for ex - if popup is visible click close
else - click on menu
Can you please help with the this ‘if & else’ scenario?
Hey there👋🏻
You can utilize Playwright's page.waitForSelector() function. It waits for the selector to appear in the DOM and then performs an action.
Hope that helps!
Hi Koushik. Going through your playwright testing course and having issue with generating video reports. I am able to see screenshots, but not video. Do you know what can be the issue and how to solve it? I am on Windows machine. Using VS Code 1.84.2 + Playwright 1.39.0. I have added to my config. file: screenshot: 'on', video: 'on',. Thanks in advance.
Hey there,
Thank you for reaching out. You can try out the following methods to help resolve your issue.
Correct Configuration: First, ensure your playwright.config.js (or .ts) file is correctly set up. The configuration for video should be inside the use block. Here’s how it should typically look:
use: {
// Other configurations
video: 'on',
},
Video Storage Path: By default, Playwright saves videos in the test-results directory. Verify that this directory is accessible and that your user account has the necessary permissions to write files to this location.
Check for Errors: Look for any error messages in your terminal or command prompt when running tests. Sometimes, issues with video encoding or file permissions might be logged there.
Test Environment: Ensure there are no issues specific to your Windows environment that might be preventing Playwright from capturing videos. This could include checking for any security software that might be blocking the creation of video files.
Dependencies: Playwright requires certain dependencies for video capture to work correctly.
Single Test Check: Try running a single test with video capture to see if the issue is isolated to a particular test or a global configuration issue.
Playwright Version: You are using Playwright 1.39.0, which should support video capture. However, it's always a good idea to check the Playwright release notes for any known issues or updates related to video capture.
Thank you for following the course, and we hope this helps you resolve the video capture issue! If you have any more questions or run into further issues, feel free to ask.
can I give the landing page for playwright test directly from the command line?
Hey Deepthi,
Yes, you can give the landing page for a Playwright test directly from the command line.
To do this, you can use command-line arguments when running your test script. For example, if you have a test script named test_script.js, and you want to specify the landing page URL as a command-line argument, you can use the following command:
npx playwright test test_script.js --params.url=www.lambdatest.com/
I can not find this LetXPath in my DevTools like in 25:10 . Do I need to arrange something in the settings to get this window? Thank you in advance
Hey there,
You can check out the setup of LetXPath using the playlist and customize it according to your needs.
th-cam.com/play/PL699Xf-_ilW7aQ6lBWXjaIheZsduOpcR5.html
Let us know if help is needed.
Hi Koushik, i need your help in reading json and excel file with typescript. an you help?
Hey there,
To read files in TypeScript:
JSON:
Use Node's fs module.
Read the file using fs.readFileSync and parse with JSON.parse().
Excel:
Install and use the xlsx library.
Use XLSX.readFile to get the workbook, and access sheets via sheet names.
what does the const in playwright do?
Hey there 👋🏻
In Playwright, the const keyword is used to declare constant variables that hold fixed values. These variables cannot be reassigned or modified once they are defined.
epíc!
Thanks Lucas!
Subscribe, and look forward to more such tutorials! ✨
In my visual studio node_module is hidden , I am able to see in folder explorer. Any work around .
Hey Sampath👋,
If you wish to unhide node_modules for all projects, open Preferences > Settings, be sure to select the User setting tab rather than the Workspace tab, then go to Text Editor > Files > Exclude and remove the line that contains node_modules.
Let us know if this works.
@kaushik this is one of the best video well done🥰 and also I want learn how added multiple xpath ,can you please share the link😀
Glad you liked it!
Subscribe, and look forward to more such tutorials! ✨
Any real time project ? where I can do real time practise including ci/cd pipelines
@prikshitverma3885 , you can watch the Jenkins video tutorial in this you have everything covered including the real-time workings of automation with CI/CD Pipeline using Jenkins.
Hope this helps :)
Hello Koushik! Great video , great work ! Thanks a lot! Can you share a script from this video?
Hey I D,
Thanks for your kind words. Please do subscribe to our channel for more such videos.
Is it possible to connect to a Database with playwrigtj?If so please looking forward to the video
Hey Sukanya 👋🏻
We currently dont see the connection to b in the scope of Playwright. But we can connect it with installing additional library to connect to DB with NodeJS. Please go through the discussion on the Playwright repo github.com/microsoft/playwright/discussions/15232
How to run playwright typescript tests in SauceLab?
Hey there,
You can try using Playwright on LambdaTest for your projects for free. www.lambdatest.com/playwright-testing
Read the Getting Started With Playwright Testing here: www.lambdatest.com/support/docs/playwright-testing/
Hi, I have added the playwright test extension successfully. But I can't see the green buttons for running independent lines. What am I doing wrong?
You should run command: npx playwright test
then the green buttons will show up.
Hey Anita,
Let us know if you are still facing the issue
Hello Sir, Is JS or Typescript knowledge a pre-requisite for this course?
Hello @AdlBnymn , Would be better if you have basic syntax and understanding in place.
Im trying the assertion in the multi select list around 1:55:11, clicking the button using playwright does not reveal the options selected on the right side so my test fails. Do you know why even if the button is clicked, the options do not show?
try installing Playwright extension(from microsoft).
🙌
Hey Kaushik , Really good video. Can you please send us the gibhub link to the sample code if available
Glad you liked it!😊
GitHub Repo: github.com/ortoniKC/playwright-ts-lambdatest
Hi @kaushik Sir, can you please guide us data driven testing using Playwright. Would request can show in Video. thanks.
Hey Arijit
Thank you for your interest in data-driven testing with Playwright! We appreciate your suggestion and understand the value such a topic could bring to our audience. We will certainly consider creating a video tutorial about this.
Hi, is this Node.js that you have used for scripting?
Hey Praneeth 👋🏻
The test scripts are written in playwright. To learn more www.lambdatest.com/learning-hub/how-to-install-playwright
Hi bro this video useful for me learn web application testing and thank u for this, and You have any post Mobile apllication testing video recording playwright
Hey there,
Glad you liked our video, thank you for your wonderful feedback.
please refer to the following link for Playwright Mobile app testing www.lambdatest.com/support/docs/playwright-android/
Hi, bro Thanks for support. I have another question about playwrights. Does Playwright support iOS mobile applications on actual devices?
and also Lambdatest mobile web application using simulator instead of real device correct?
Why did I ask Playwright to connect just to the browser and Android?
Hello, surely will get to back to you on this shortly
Where to add the proxy in playwright?
Hey there,
In Playwright, you can specify a proxy server configuration when launching a browser instance. This is done by setting the proxy option in the browserType.launch() method. Here’s how you can do it:
For a Single Browser Instance
You can configure the proxy settings directly in the launch options of the browser. Here's an example using Playwright in JavaScript with a Chromium browser:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({
proxy: {
server: 'my-proxy-server:port', // Replace with your proxy server URL and port
// Optionally, you can also specify credentials if your proxy requires authentication:
username: 'my-proxy-username', // Replace with your proxy username
password: 'my-proxy-password' // Replace with your proxy password
}
});
const page = await browser.newPage();
await page.goto('example.com');
// Perform actions with the page
await browser.close();
})();
Global Proxy Configuration
If you want all instances of a browser to use the same proxy settings by default, you might set up the proxy configuration when you're creating the browser context instead of when launching the browser. This is useful if you are using Playwright’s context capabilities to manage different browsing scenarios:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext({
proxy: {
server: 'my-proxy-server:port', // Replace with your proxy server URL and port
username: 'my-proxy-username', // Optional: Replace with your proxy username
password: 'my-proxy-password' // Optional: Replace with your proxy password
}
});
const page = await context.newPage();
await page.goto('example.com');
// Perform actions with the page
await browser.close();
})();
So how did you create that xpath??
Hey Tom,
To create an XPath selector in Playwright, analyze the HTML structure and build a query to uniquely identify the element. For example, with the XPath //p[@class="target"], you can target a paragraph element with the class "target". Use this selector in Playwright with page.$x() to perform actions or extract information from the targeted element.
Hi Koushik
is this not a Page Object Model
?
Hey there,
Can you explain a bit more..
Page Object Model in this video is explained at 3:34:23
Very informative tutorial but it would be better if you've explained the BDD part as well.
Thanks for your feedback,
Look forward to more such tutorials! ✨
Please do video on playwright with JS for interview questions and answers
Hey there,
Your input is invaluable to us, and we're excited to explore this topic further. Stay tuned for more updates, and thanks again for your feedback! 🚀📚
I am getting this error
npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ npm init playwright@latest --yes -- --quiet --browser=chromium --brow ...
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Hey there👋🏻
Can you try reinstalling nodejs/npm modules globally.
Link: nodejs.org/en/download/
Please let us know if the issue persists.
Hi, Mr.Koushik. i need some help regarding headless testing. even i used like headless: false. then also unable to open GUI. pls help me out. thank you
Hey there,
{ headless: false } as an argument to launch() should launch the browser in non-headless mode, which means you should see the GUI.
If this is not working for you, there might be an issue with your setup. Make sure that you have the latest version of Playwright installed.
If the problem persists, it would be helpful to see the exact error messages or behavior you're observing. Could you provide a bit more detail?
@@LambdaTest Hi, koushik. I just need suggestion from you. Upto now i worked with selenium java data driven frame work. But i worked for existing frame work. Upto now in my experience i didn't created fram work from scratch. Now i got a opportunity to create frame work in a new project. After seen your videos i felt playwright is very easy compared to Selenium. Pls suggest me playwright is recommended or not and pls mention problems if any. Thank you so much for your response bro.
Hey there,
Playwright offers native multi-browser support, is tailored for modern web interactions, and can be faster than Selenium. However, Selenium is more mature with a vast community. For a new project, if you felt comfortable with Playwright, it's worth trying. But ensure it aligns with your project's requirements and team's familiarity.
@@LambdaTest thank you so much for your suggestion.
Hi Kaushik, How to modify text in span text using playwright typescript. trying to do since 3-4 days. any help..please
...
0.00
....
want to modify 0.00 in above tag
Hey there 👋
To modify the text in a span tag using Playwright, use page.evaluate().
For eg.
await page.evaluate(() => {
let span = document.querySelector('span');
if (span) span.textContent = "New text";
});
Sir please make video on playwright how to "DEPLOY" playwright code on vercel and other hosting provider please make video on this topic sir please
Hey there,
Thank you for your valuable feedback. We will certainly consider your input in our upcoming videos.
I'm using yarn package manager to install the playwright. I installed it using 'yarn create playwright'.
I'm able to run the tests by testing UI in VS Code but when I'm trying in terminal using "npx playwright test", I'm getting error. It says to uninstall playwright and install playwright/test.
Can you help me with this?
Hey there,
It seems you might have a version conflict. Try the following steps:
- Uninstall the existing playwright: yarn remove playwright
- Install the playwright-test package: yarn add @playwright/test
- Now, run your tests with: npx playwright test
If you still encounter issues, ensure that your playwright.config.js is correctly set up. Hope this helps
@@LambdaTest thanks for your prompt reply. Yes, it did work.
You're welcome! If you have any questions or need further assistance, feel free to reach out. Happy learning!
what happens if you are running on Headless, and want to record video? is that possible?
You can record video in Playwright headlessly by enabling video recording in a browser context, interacting with the page, and closing the context. Video files are saved as WebM in a specified directory, and this feature is only supported in Chromium-based browsers.
Hi @kaushik can you please tell any Typescript course.
Hi, this is my TS course in detail
th-cam.com/play/PL699Xf-_ilW5VXRsJwBJLmDGrsrYxBjQT.html&si=eCULtxgpgdzKKECu
Hello,
sure we will get back to you on this soon!
Hi Kaushik Sir, can you please guide us on data driven testing in playwright.
Hey Arijit,
Thanks for your interest. Meanwhile, you can refer to the detailed learning hub on data-driven testing on www.lambdatest.com/learning-hub/data-driven-testing.
Don't forget to subscribe to our channel for the latest updates on upcoming tutorials! ✨
@@LambdaTest thanks kaushik sir. I will follow this link. And I have already subscribed and join your channel sir.
Thanks Arijit 🙂
Please upload video about javascript in playwright
Hey there,
You can go through this playlist: th-cam.com/play/PLZMWkkQEwOPliOm7TkV0Ndg45cJPDthDC.html
I watched till 32:00 i noticed you are not giving any Typescript Types to any variables.... shouldn't Types be given everywwhere?
Hey there 👋🏻
As a best practise we should add type in all the variables used