Playwright Beginner Tutorial 1 | What is Playwright

[@dillydally7327]

I've been a manual qa tester for a fintech company for a year or so, I want to transition to automation and watching your videos will be a great start, thank you so much. I will binge watch your videos lol.

[@RaghavPal]

Great to hear that, All the best, If you face any issues, pls ask in the comment section

[@satyadurgadeviv503]

You have heard my heart ,we started using this for our application recently and first thing I did is searching ur videos.Good that you started thank you so much

[@RaghavPal]

Glad I could help Satya

[@soumitakar8459]

Your playwright series has been very helpful. Thank you.

[@RaghavPal]

Most welcome Soumita

[@thinkholisticwellness]

Raghav is indeed a great teacher. He goes from zero to hero! Thank you, you have helped the lives of so many people. God Bless every step! you take

[@RaghavPal]

So nice of you

[@Arasuari]

Thank you very much for considering my comment and uploading playwright series🙏❤️

[@RaghavPal]

Most welcome

[@Shwetank0512]

Fan ho gaya mai 🙏.... You covered so many topics and varaiety of tools with indepth skills. After following detailed steps we are able to do practically........ Jai ho Mordern time GURU 🙏

[@RaghavPal]

Thanks for the kind words Shwetank. Humbled

[@ramutalari8473]

Much awaited one. Thank You @Raghav for starting this series!!

[@RaghavPal]

Most welcome Ramu

[@LuciferGamingYtube]

Are thank u sir, itne channels dundh liye, dekha hi nahi aapne bhi upload kia hai ye, I am on day 1 now with your course Sir.

[@RaghavPal]

Great.. all the best

[@SarangHoley]

Really excited for this series, Thanks @Raghav for getting it starts. Much Awaited 😊👍

[@RaghavPal]

Hope you enjoy it Sarang

[@amanmishra4578]

Hi Raghav, do we need to have JavaScript knowledge before starting this tutorial??... As i don't have any knowledge in javascript language so then also i can start this playlist... Could you please help me on this.

[@RaghavPal]

Aman you can start this without any knowledge on JavaScript. I have explained each topic step by step and you will learn along the process. After you start creating test cases, you can get basic JS knowledge from here - automationstepbystep.com/

[@sanithusarvan4570]

Thank you so much Raghav for this initiative! Quite helpful for people who needs transition from manual to automation. Keep going!

[@RaghavPal]

Most welcome Sanithu

[@tranhuudan4550]

I am from Viet Nam and just started learning Playwright. Your all videos are beneficial for me. Thank you so much. Keep going, bro.

[@RaghavPal]

Most welcome Trần

[@aisuluuturganbaeva492]

I just fount your channel , and already loving it ! Thank you Raghav

[@RaghavPal]

Most welcome Aisuluu

[@Happyheart77777]

First search for playwright and I found you I am a manual tester and my company is switching to automation and this is what they are planning to use . I hope this will help me achieve my goals. Thank you

[@RaghavPal]

Welcome aboard.. yes this should help you and let me know if you face any issues

[@Happyheart77777]

@@RaghavPal thank you 🙏🏽

[@MudasirSQA]

Thank for this video sir, I am going to start learning Playwright.

[@RaghavPal]

Great to hear! Let's get started with Playwright Mudasir

[@MudasirSQA]

@@RaghavPal ok sir.

[@sreekalapm2588]

Thank you Raghav, I have started and became professional in sdet career with your guidance.. Many thanks to you for helping the community

[@RaghavPal]

Most welcome Sreekala. All the best for your career. Do share your knowledge and help others

[@tamilulagam9012]

Raghav Pal s the most talented and soft spoke person i have seen i this world. One day i will take selfie with real hero like you ❤❤❤

[@RaghavPal]

Thanks for the kind words Tamil... humbled

[@remya240]

I watched your BDD for Beginners video and it was very helpful and clearly explained-thank you! Could you please create a video on implementing BDD in Playwright including feature files and step definitions?

[@RaghavPal]

Sure Remya.. will plan

[@andre-le-bone-aparte]

Just found your channel. Excellent Content - Another Sub For You Sir!

[@RaghavPal]

Thanks a lot

[@hemangikadam6550]

Thankyou so much sir. Your videos gave me confidence to learn automation. I was scared to begin because of fear of coding but i started learning because of your videos. 🙂

[@RaghavPal]

Hemangi so happy to know this

[@monushh]

Thanks Raghav. Scored 8/10

[@RaghavPal]

Great

[@YogeshNangare9]

Very clear explanation Thank you Raghav

[@RaghavPal]

You're most welcome Yogesh

[@dineshpentakota1514]

Hii Sir,I tried to add to add karate gatling reports to prometheus and grafana through datawriter concept add to gatling.conf but i cant see results if possible plz make a video on that .

[@RaghavPal]

Will plan on it Dinesh

[@sandhyakoduru6856]

Well explained and making easy to understand fir beginners in automation

[@RaghavPal]

Thanks a lot Sandhya

[@surajkamble3538]

Thank you Raghav sir for this Playwrite tutorials 🤝👍💐

[@RaghavPal]

Most welcome Suraj

[@RajJey667]

Thanks Ragav for this video :). A generic query, Is playwright right tool for the web application automation built on REACT software? Please answer

[@RaghavPal]

Hi, Yes, Playwright can be a good option for automating web applications built on React, as it is a modern and flexible tool that supports multiple browsers and operating systems Playwright was specifically designed to handle the challenges of modern web development, such as single-page applications and web components, which are often used in React applications Other options for web application automation built on React include: Cypress: A popular open-source tool for end-to-end testing of web TestCafe: Another open-source testing tool, TestCafe can be used for automated testing of web applications built on React, as well as other frameworks. Selenium: As mentioned earlier, Selenium is a widely-used tool for web automation and can also be used to automate web applications built on React. Puppeteer: Puppeteer is a Node.js library that provides a high-level API for automating Chrome and other Chromium-based browsers. It can be used to automate web applications built on React. Ultimately, the choice of tool depends on your specific requirements, such as the type of application you are testing, the programming language you prefer, and the level of expertise you have with a particular tool. I have created a video on Playwright vs Cypress here - kzbin.info/www/bejne/mZrbnIR-g9CikJY

[@santielaing939]

Clear and to the point. Thank you Raghav!

[@RaghavPal]

Most welcome Santie

[@hasibrahat9609]

Awaited for this one, Thanks!

[@RaghavPal]

most welcome Hasib

[@ayeshakhalid709]

Yrr. This Hello this is raghav is like every where. Whenever I try to learn any new framework. I'm scared if I would get want familiar trainer but now I shouldn't after seeing you on playwright. Good to see you working so hard

[@RaghavPal]

Thanks for watching Ayesha

[@InTheMirrorr]

I came to your channel when I was searching for some issue. But thanks to youtube I found your amazing channel .. I spent some hours watching and exploring it; really amazing content!!! I would like to take your advice on a situation I'm facing .. we have some vendor apps that does not allow Silent installation and we need to automate that process, apps allow only GUI interaction and applying onscreen parameters :( I saw your tutorial about Autoit, but it generates EXE that will be probably rejected by Security team specially in PRD environment. Is there other recommended tools? Many thanks in advance bro!

[@RaghavPal]

Hasan There are a few other tools that you can use to automate the installation of applications that do not allow silent installation. One option is to use a tool like **UiPath**. UiPath is a powerful automation tool that can be used to automate a wide variety of tasks, including the installation of applications. UiPath is a commercial tool, but it offers a free community edition that you can use for personal and non-commercial use. Another option is to use a tool like **Selenium**. Selenium is an open-source tool that can be used to automate the interaction with web applications. You can use Selenium to automate the installation of an application by interacting with the application's installer GUI. Finally, you can also use a tool like **AutoHotkey**. AutoHotkey is a scripting language that can be used to automate a wide variety of tasks. You can use AutoHotkey to automate the installation of an application by creating a script that simulates the user clicking on the installer's GUI elements. Which tool you use will depend on your specific needs and preferences. If you need a powerful automation tool that can be used to automate a wide variety of tasks, then UiPath is a good option. If you are looking for a free tool, then the UiPath community edition is a good option. If you only need to automate the installation of applications, then Selenium or AutoHotkey are good options. Here are some additional things to keep in mind: * When automating the installation of applications, it is important to make sure that the applications are installed correctly. You should test the automation script thoroughly to make sure that it does not cause any problems. * You should also make sure that the automation script is secure. You should avoid using any tools that generate EXE files that are not approved by your security team. I hope this helps!

[@InTheMirrorr]

@@RaghavPal Thanks alot for your reply; actually they are desktop apps so I excluded Selenium .. I will check UiPath. Thanks Pal :)

[@kpopbhavyaa8127]

Thank you Raghav 😊 Got when much needed 🙏

[@RaghavPal]

Most welcome

[@NathanMonroe-y]

Your videos helped so much thank you for taking the time to make them

[@RaghavPal]

You are so welcome Nathan

[@sankaranarayanan5700]

Hi @Raghav I tried Playwright Java installation as per the documentation, However I am facing untrusted local certificate issue when the example code tries to download the browser binaries. Can you please help ?

[@RaghavPal]

Hi Sankara, I will upload the installation steps video tomorrow, can check again with that

[@snehaajay8848]

I got 9/10 in quiz. very clear n good explanation thank you @Raghav

[@RaghavPal]

Well done Sneha

[@me.nilesh]

Thanks for starting this series.

[@RaghavPal]

Most welcome Nilesh

[@me.nilesh]

@@RaghavPal Please start playwright with Java framework. It could be help us.

[@RaghavPal]

I will do Nilesh

[@zwiterrion12]

Thanks for the useful tutorial, and simple to understand. Quiz result 10/10

[@RaghavPal]

Glad it helped Kelly

[@m.detagianfaiz6253]

i think playwright is know well for QA Engineer Struggle while testing. Playwright build in next level in framework👍

[@RaghavPal]

Yes, it is good

[@3aadel]

That's a great tutorial introduction for Playwright ! many thanks Raghav

[@RaghavPal]

Most welcome

[@ashishnaidu2487]

Hi Raghav sir, can you please let me know what are the pre-requisites that I need to learn before starting learning Playwright? I'm preferred to choose C# programming language but want to know what more I need to learn please in order to perform a smooth E2E testing.

[@RaghavPal]

Ashish To get started with Playwright and perform smooth End-to-End (E2E) testing using C#, here are the pre-requisites you should consider: 1. Programming fundamentals: * You should have a good grasp of programming concepts, such as variables, data types, control structures, functions, and object-oriented programming (OOP) principles. 2. C# programming language: * You've mentioned you prefer C#, so you should have a solid understanding of C# syntax, features, and best practices. * Familiarize yourself with C# versions 8.0 or higher, as Playwright supports these versions. 3..NET Core: * Playwright is built on top of.NET Core, so it's essential to understand the basics of.NET Core, including: +.NET Core framework + NuGet packages + Dependency injection + Configuration and settings 4. Web development basics: * Understand how web applications work, including: + HTML (structure and syntax) + CSS (styling and layout) + JavaScript (client-side scripting) + HTTP requests and responses + Web browsers and their rendering engines 5. Selenium WebDriver: * Although Playwright is an alternative to Selenium, understanding Selenium's concepts and architecture will help you appreciate Playwright's design and features. * Familiarize yourself with Selenium's WebDriver API and how it interacts with browsers. 6. Browser automation: * Learn about browser automation concepts, such as: + Browser instances and sessions + Element interaction (e.g., clicking, filling forms) + Waits and timeouts + Handling alerts and pop-ups 7. Testing frameworks and principles: * Understand testing concepts, such as: + Test-driven development (TDD) + Behavior-driven development (BDD) + Unit testing, integration testing, and E2E testing * Familiarize yourself with popular testing frameworks, such as NUnit, xUnit, or MSTest. 8. Playwright-specific knowledge: * Once you have a solid foundation in the above areas, dive into Playwright's documentation and learn about: + Playwright's architecture and design principles + Browser types and launch modes + Frames, contexts, and pages + Element handling and interaction + Waits, timeouts, and retries + Error handling and debugging -

[@ashishnaidu2487]

@@RaghavPal Thank you so much for explaining me in such a detailed manner, now I can confidently start my Playwright journey with C# programming language. Thanks a ton once again for sharing this information with me sir. I'm really sorry to trouble you again with my one more query please, is this the same with the "Python" programming language too or is there is any difference when using Python with Playwright please?

[@RaghavPal]

Ashish Playwright provides a unified API across multiple programming languages, including C#, Python, Java, and Node.js. This means that the core concepts, such as: * Launching browsers * Creating browser contexts * Navigating pages * Interacting with elements * Handling events are similar across all supported languages. Identify the differences While the core concepts are similar, there are some differences in using Playwright with Python compared to C#: * Syntax: The most obvious difference is the syntax of the programming languages themselves. Python's syntax is more concise and flexible, while C#'s syntax is more verbose and strict. * Library usage: In C#, you would use the `Microsoft.Playwright` NuGet package, whereas in Python, you would use the `playwright` library installed via pip. * Async/await: Python's async/await syntax is more concise and expressive than C#'s, which can make the code look slightly different. * Error handling: Python's error handling mechanisms, such as try-except blocks, differ from C#'s try-catch blocks. In summary, while there are some differences in using Playwright with Python compared to C#, the core concepts and API remain the same. If you learn Playwright with C#, you can easily adapt to using it with Python, and vice versa. The main differences lie in the syntax, library usage, async/await, and error handling mechanisms of the respective programming languages. I hope this step-by-step breakdown helps clarify the differences and similarities between using Playwright with C# and Python -

[@ashishnaidu2487]

@@RaghavPal Thank you so much for explaining me in such a detailed manner, now I can confidently start my Playwright journey with any programming language my company offers to choose. Thanks a ton once again for sharing this information with me sir.

[@bloggerpriyanka3488]

I have started from today 9/10 My first attempt Thank you @raghav

[@RaghavPal]

Great score .. keep learning

[@alim241081]

Hi Raghav, what would be the future of this tool.is this overtake selenium

[@RaghavPal]

Hi Alim, Playwright has very good features and is useful in Automation, Selenium is here since a long time and has a huge community, So it may not be right to compare these 2 I will suggest that you learn the skills and then decide what works best for you

[@alim241081]

@@RaghavPal ,Thanks for your reply.just make vedio of comparision for Sel vs Playright that would be useful.

[@ruixue6955]

3:45 headless and headed mode 9:46 flaky tests

[@RaghavPal]

Thanks for adding

[@rajesh.nrajesh.n3215]

@raghav, can you please tell me how I can specify my preferred path for the snapshots folder, as it is default in the root folder. I'm facing a problem here.

[@RaghavPal]

Rajesh By default, Playwright saves the snapshots in the root folder of your project. However, you can specify a custom path for the snapshots folder using the launch method's snapshotDir option. Here's an example of how you can do it const playwright = require('playwright'); // Launch the browser with a custom snapshot directory (async () => { const browser = await playwright.chromium.launch({ snapshotDir: '/path/to/your/preferred/snapshots/folder' }); // ... })(); Replace '/path/to/your/preferred/snapshots/folder' with the desired path where you want to save the snapshots. Alternatively, you can also specify the snapshotDir option when creating a new BrowserContext: const context = await browser.newContext({ snapshotDir: '/path/to/your/preferred/snapshots/folder' }); By doing so, all the snapshots generated within this context will be saved in the specified directory

[@gsreddy4383]

@Raghav Coud you please confirm Is this tutorials all about Playwright+ python or Java?

[@RaghavPal]

in this series, i have shown with JavaScript in the coding part.. if you are using any other language it still will help you..

[@jaithomas5663]

Thanks🥺....much needed one ,, when we expect the next video

[@RaghavPal]

Thanks all the videos are already published can check here AutomationStepByStep.com

[@msdynamics365cecrmknowledg9]

Really great tutorial for Playwright . Many many thanks Raghav ji.

[@RaghavPal]

Always welcome

[@jarver9956]

Thanks for this free tutorial :) appreciate a lot

[@RaghavPal]

You're very welcome Jarver

[@sanjeev8720]

Hi Sir, in playwright JavaScript bdd framework ..I have written feature file and step definitions ..But when I click on feature file step it should navigate implementented step definition s..can you please help to me

[@RaghavPal]

Sanjeev To navigate from a step in your feature file to its corresponding step definition, follow these steps: 1. Configure VSCode Settings: - Open your project in Visual Studio Code (VSCode) - To resolve any issues with displaying undefined steps in the feature file, update the Cucumber settings in the VSCode user settings file - Specify the correct paths to the feature files and step definition files in your settings 2. Install the Cucumber Extension: - Make sure you have the "Cucumber (Gherkin) Full Support" extension installed in VSCode - You can find it in the VSCode Extensions marketplace 3. Create a `.vscode` Folder: - In your project folder, create a `.vscode` folder (at the root level, not in any subfolder) 4. Create a `settings.json` File: - Inside the `.vscode` folder, create a `settings.json` file - Add the following configuration (adjust paths as needed): ```json { "cucumberautocomplete.steps": ["steps/*js"], "cucumberautocomplete.syncfeatures": "features/*feature", "cucumberautocomplete.strictGherkinCompletion": true } ``` Replace `"steps/*js"` with the actual path to your step definition files and `"features/*feature"` with the path to your feature files 5. Reopen the Project Folder in VSCode: - Close and reopen the folder where `.vscode` is located to apply the settings Now, when you right-click on a step in your feature file, it should navigate to the corresponding step definition -

[@sanjeev8720]

@@RaghavPal thanks sir I will try it..

[@sanjeev8720]

​@@RaghavPal Hi sir I have tried same steps but it is not navigating

[@RaghavPal]

Let's break down the problem step by step: Step 1: Verify Feature File and Step Definitions * Can you confirm that you have written a feature file (e.g., `example.feature`) with scenarios and steps? * Have you implemented the corresponding step definitions in a separate file (e.g., `example.steps.js`)? Step 2: Check Feature File Syntax * Make sure the feature file syntax is correct. A typical feature file should start with the `Feature` keyword, followed by a description, and then scenarios with steps. * Verify that each step in the feature file starts with a keyword like `Given`, `When`, `Then`, `And`, or `But`. Step 3: Ensure Step Definitions are Correctly Linked * In your step definitions file (e.g., `example.steps.js`), make sure you have exported the step definitions using the `module.exports` syntax. * Verify that the step definitions are correctly linked to the feature file steps using the `Given`, `When`, `Then`, `And`, or `But` keywords Step 4: Check Playwright Configuration * Ensure that you have correctly configured Playwright to use your feature files and step definitions * Check your `playwright.config.js` file (or equivalent) to ensure that it points to the correct location of your feature files and step definitions Step 5: Verify Clicking on Feature File Step * When you click on a step in the feature file, Playwright should navigate to the corresponding step definition * If this is not happening, try checking the console output for any error messages that might indicate the issue Step 6: Check for Duplicate Step Definitions * If you have multiple step definitions files, ensure that there are no duplicate step definitions that might be causing the issue Step 7: Try Debugging * Try debugging your step definitions by adding console logs or using a debugger to see if the step definitions are being executed correctly * This can help you identify if the issue is with the step definitions themselves or with the linking between the feature file and step definitions If you've checked all of these steps and are still having issues, please provide more details about your project setup, feature file, and step definitions, and I'll do my best to help you troubleshoot the problem -

[@sanjeev8720]

@@RaghavPal thanks alot sir

[@salim3600]

Dear Sir, This is excellent, and your way of explaining is awesome. Do you have a playlist for 'Playwright with C#'? I look forward to your reply!

[@RaghavPal]

Thanks Salim, not as of now, I will plan on it, can check all playlists here - automationstepbystep.com/

[@petergerendeli2891]

Hi' I already writing automaticn tests using IDE = VSCode and robot framework. my question is, can I use the same vscode for trying out playwright opening a new folder or a new workspace in vscode? thanks

[@RaghavPal]

Péter Let's break down the problem step by step: Step 1: Understand the current setup You are currently using VSCode (Visual Studio Code) as your Integrated Development Environment (IDE) to write automatic tests using the Robot Framework. Step 2: Identify the new requirement You want to try out Playwright, a browser automation framework, and you're wondering if you can use the same VSCode instance to do so. Step 3: Consider the options To use Playwright, you have two options: a. Create a new folder within the existing workspace: You can create a new folder within your existing VSCode workspace and start writing Playwright tests there. This approach allows you to keep your Robot Framework tests and Playwright tests separate, but still within the same workspace. b. Create a new workspace in VSCode: You can create a brand new workspace in VSCode, specifically for your Playwright tests. This approach allows you to keep your Robot Framework tests and Playwright tests completely separate, with their own distinct workspaces. Step 4: Evaluate the feasibility Both options are feasible, and VSCode supports multiple folders and workspaces. You can easily create a new folder or workspace in VSCode and start writing Playwright tests. Step 5: Choose the approach The choice between options a and b depends on your personal preference and how you want to organize your projects. If you want to keep your Robot Framework and Playwright tests separate but still accessible from the same VSCode instance, option a might be suitable. If you prefer to keep them completely separate, option b might be a better fit. Conclusion Yes, you can use the same VSCode instance to try out Playwright by creating a new folder or workspace. You can choose the approach that best suits your needs and start writing Playwright tests alongside your Robot Framework tests -

[@petergerendeli2891]

@@RaghavPal thanks, figured it out on my own, already put playwright on my Mac and also run my 1st test in playwright in vscode.

[@attitudeneverwronga8139]

Hi Raghav I was a manual functional tester with 7 years experience and 6 years of career break. Now i have got an opportunity to work on a project as a part of recruitment process. It includes automation testing in playwright. I am just starting to learn automation and hoping to complete the project. If you can provide any one-to-one guidance as i learn that will help me a lot. Please respond. This job will be a great leap in restarting my career.

[@RaghavPal]

Hi You can check all sessions here automationstepbystep.com/ Apart from this there is no live or 1-to-1 sessions. You can always ask your ques in comments All the best

[@attitudeneverwronga8139]

Sure. Thank you.

[@Abhishek-gs8dk]

Hello Sir, First of all I want to Thank you for creating such nice content on every topics. I have one question. I have total 10 years of exp in IT and I am working as automation tester. My skill sets are Java, selenium, POM, Cucumber, Rest Assured. I am looking to change my job. Can you please suggest.What other skills I should learn to grow in my career for that much experience. Thanks in advance.

[@RaghavPal]

Abhishek Most welcome. As an experienced automation tester, you're already equipped with valuable skills. To further enhance your career, consider the following: 1. Programming and Scripting Proficiency: - Strengthen your foundation in programming languages like Python, Java, or JavaScript. These skills are crucial for writing automated test scripts and creating robust testing frameworks - Dive deeper into object-oriented programming concepts, algorithms, and code structures to develop efficient, maintainable, and scalable automation solutions. 2. Understanding of Software Development and QA Processes: - Familiarize yourself with the software development lifecycle (SDLC) and quality assurance (QA) methodologies. - Learn about Agile practices, DevOps, and continuous integration/continuous deployment (CI/CD) pipelines. Integrating automation testing seamlessly into the development process is essential 3. Soft Skills: - Communication: Effective communication is vital. Collaborate with cross-functional teams, articulate test results, and provide actionable feedback. - Analytical Thinking: Sharpen your problem-solving skills. Analyze complex scenarios, identify bottlenecks, and optimize test processes. - Risk Assessment: Understand risk-based testing. Prioritize test cases based on criticality and impact. 4. Stay Updated with Industry Trends: - Technology evolves rapidly. Keep learning about new tools, frameworks, and best practices. - Explore emerging areas like AI/ML testing, mobile automation, and cloud-based testing. Remember, continuous learning and adaptability are key to long-term success in automation testing. Best of luck with your career transition --

[@Abhishek-gs8dk]

@@RaghavPal Thank you so much your guidence.

[@sreereshmap.s1350]

super video. Thank u sir. I want to learn this tool. I started from today.

[@RaghavPal]

Most welcome

[@basurajs]

@raghav, Thanks for your guidance on new automation tools. Could you please make a video on AI Powered Test Automation Tools and how it is different from playwright. Thanks

[@RaghavPal]

Sure

[@basurajs]

@@RaghavPal thank you

[@CristianoistheGOAT-g3b]

@RaghavPal, I have a question for you, which automation tool can I use for developing an automation framework for Microsoft Dynamics SL. It does not have a URL. It is remote access.

[@RaghavPal]

Microsoft Dynamics SL is an enterprise resource planning (ERP) software that is typically accessed via remote access and does not have a URL There are a few automation tools that you can use to develop an automation framework for Microsoft Dynamics SL, like: WinAppDriver WinAutomation Sikuli Microsoft Dynamics GP Automation Library Microsoft UI Automation It will be a good idea to consult with a developer experienced with Microsoft Dynamics SL and automation testing to help you choose the best tool for your needs

[@CristianoistheGOAT-g3b]

@@RaghavPal thank you very much.

[@rajesh.nrajesh.n3215]

Hi, I just wanted to know to change the output folders in playwright, can you please explain how to do this

[@RaghavPal]

Rajesh Changing the Output Folder in Playwright By default, Playwright saves screenshots, videos, and other artifacts in a folder named playwright-report in the current working directory. If you want to change the output folder, you can do so by configuring the outputDir option in your Playwright test. Here are the steps: Method 1: Using the outputDir option in playwright.config.js Create a playwright.config.js file in the root of your project with the following content: javascript module.exports = { // ... other config options ... outputDir: './my-custom-output-folder', }; This will set the output folder to my-custom-output-folder in the current working directory. Method 2: Using the --output-dir command-line option You can also specify the output folder using the --output-dir command-line option when running your Playwright tests: npx playwright test --output-dir ./my-custom-output-folder This will override the default output folder and save the artifacts in my-custom-output-folder. Method 3: Using the browserType.launch options If you're launching the browser programmatically using browserType.launch, you can pass the outputDir option as part of the launch options: javascript const browser = await chromium.launch({ outputDir: './my-custom-output-folder', }); This will set the output folder for the launched browser instance. That's it! By using one of these methods, you can change the output folder in Playwright to a custom location -

[@rajesh.nrajesh.n3215]

@@RaghavPal thanks for your reply raghav, i actually need changing path for snapshots folder not the playwright-report output. Your explanation was great and also helped me, just I need the solution for setting snapshots folder.

[@CH-jz2xz]

I have test cases stored in AzureDevOps. Can I associate that test cases to the Playwright automated test case. Example: Testcase1 associate it to TestCase1(Playwright)?

[@RaghavPal]

Hi C H, Yes, it is possible to associate test cases stored in Azure DevOps with Playwright automated test cases Here are a few ways you can do this: You can use the Azure DevOps REST API to retrieve the test cases and then use the test case IDs or titles to map them to the corresponding Playwright test cases You can use Azure DevOps Test Plans and Test Suites to group and organize your test cases, and then use the Test Suite and Test Plan IDs to map them to the corresponding Playwright test cases You can also use Azure DevOps Test Case Work Items to link the test cases with Playwright automated test cases, by adding a link from Azure DevOps Test Case to the Playwright test case It is important to note that the exact method for associating test cases will depend on how you have structured your test cases in Azure DevOps and how you have implemented your Playwright tests. You may need to customize the integration to fit your specific needs

[@TheMMakif]

Thank you once again for your excelent teaching methods. I beleive I'll learn playwright very well in a couple of days by the help of your videos👍

[@RaghavPal]

Most welcome Akif

[@mohbib360]

Thank you Raghaf for this tutos, i have a question, is playwright compatible with desktop application ?

[@RaghavPal]

Yes, Playwright is compatible with desktop applications. While Playwright is primarily known for its web automation capabilities, it also supports automating desktop applications across different platforms. Playwright provides a unified API that allows you to automate web browsers (Chrome, Firefox, WebKit) as well as desktop applications using the same programming language and codebase. It supports automating desktop applications on Windows, macOS, and Linux. To automate desktop applications using Playwright, you would typically use the appropriate API methods and functions provided by Playwright for interacting with the user interface elements, performing actions, and retrieving information from the application. Here's a high-level example of automating a desktop application with Playwright: ```javascript const { chromium } = require('playwright'); (async () => { const app = await chromium.launch(); const context = await app.newContext(); const page = await context.newPage(); // Navigate to the desktop application await page.goto('your-desktop-app-url'); // Perform actions on the application, e.g., clicking buttons, filling forms, etc. await page.click('#button-id'); await page.fill('#input-field-id', 'Hello, World!'); // Retrieve information from the application, e.g., reading text, getting values, etc. const labelText = await page.innerText('#label-id'); console.log('Label Text:', labelText); await app.close(); })(); ``` This is just a basic example, and the specific methods and APIs you use will depend on the desktop application and its UI framework. Playwright supports popular UI frameworks like Win32, WPF, UWP on Windows, and Cocoa on macOS. By leveraging Playwright's cross-browser and cross-platform capabilities, you can write automation scripts that cover both web and desktop applications, providing a unified testing experience

[@ashishnaidu2487]

Hi Rgahav sir, can you please do a more descriptive video which briefly explains point by point on How to Become a Automation Tester roadmap please? It will help a lot for manual testers like me, freshers and Non-IT background people too.

[@RaghavPal]

Sure Ashish

[@ashishnaidu2487]

@@RaghavPal Thank you so much Sir

[@joeypublik]

Hello, First I would like to thank you for your work because you help people to be more efficient in their work, which is highly commendable. THANK YOU. Second I would like to ask... Does Playwright can fill a web formulary getting data from a csv file or Excel file? I am more interested getting data from Excel or Calc (LibreOffice) files to fill web formularies. Are you going to make a video about this interesting point? This is a good subject for those who want to save time doing a tedious work. Please think about it. I suggest to do it or talk about that point. You will help many people to be more efficient. Many thanks

[@RaghavPal]

Hi Joey, Yes, Playwright can fill a web formulary by getting data from a CSV file, Excel file, or other data sources. You can use the Playwright API to read data from CSV or Excel files and then populate the web form fields with the data. Here's an example of how you can read data from an Excel file using the xlsx package and then use it to fill in a web form using Playwright: const xlsx = require('xlsx'); const { chromium } = require('playwright'); (async () => { // Load data from Excel file const workbook = xlsx.readFile('data.xlsx'); const worksheet = workbook.Sheets['Sheet1']; const data = xlsx.utils.sheet_to_json(worksheet); // Launch a browser const browser = await chromium.launch(); const context = await browser.newContext(); // Navigate to a web page with a form const page = await context.newPage(); await page.goto('www.example.com/form'); // Fill in the form with data from the Excel file for (let i = 0; i < data.length; i++) { const row = data[i]; await page.fill('#input1', row['Field1']); await page.fill('#input2', row['Field2']); await page.fill('#input3', row['Field3']); await page.click('#submit-button'); await page.waitForNavigation(); } // Close the browser await browser.close(); })(); In this example, the xlsx package is used to read data from an Excel file named data.xlsx. The worksheet variable contains the data from the Sheet1 worksheet in the Excel file. The sheet_to_json method is used to convert the worksheet data into a JSON object. The Playwright API is then used to launch a Chromium browser, navigate to a web page with a form, and fill in the form fields with data from the Excel file. The fill method is used to populate the form fields, and the click method is used to submit the form. The waitForNavigation method is used to wait for the page to reload after the form is submitted. Finally, the browser is closed using the close method. You can modify this code to read data from a CSV file or other data sources as needed.

[@nishanthN4B2]

Hi Raghav, what if I have like 2-4 day process as a test scenario. For example, we load orders, and wait until the next day for the status to change, and then third day it finally settles. Would I be able to automate them and can I please know how ?

[@RaghavPal]

Nishanth Yes, you can automate a 2-4 day process as a test scenario using Playwright. Here are some steps you can follow: 1. *Divide the process into smaller steps.* This will make it easier to automate each step and troubleshoot any problems. 2. *Write a test case for each step.* Use Playwright's API to automate the steps in your test case. 3. *Use Playwright's `wait()` function to wait for the desired status change.* For example, you can wait for the order status to change to `shipped` before proceeding to the next step in your test case. 4. *Save your test cases and run them using Playwright.* Here is an example of a Playwright test case for a 2-4 day process: ```python async def test_order_process(): # Load the order. await page.goto("example.com/order/1234567890") # Wait for the order status to change to `shipped`. await page.wait_for_selector(".order-status", state="visible", text="Shipped") # Verify that the order has been shipped. assert page.locator(".order-status").text == "Shipped" # Wait for the order status to change to `settled`. await page.wait_for_selector(".order-status", state="visible", text="Settled") # Verify that the order has been settled. assert page.locator(".order-status").text == "Settled" ``` You can use this test case as a starting point to automate your 2-4 day process. You will need to modify the test case to match the specific steps in your process and to wait for the correct status changes. You can also use Playwright's `record()` function to record a video of your test case as it is running. This can be helpful for troubleshooting problems and for documenting your tests. I hope this helps

[@nishanthN4B2]

@@RaghavPal Thank you, much appreciated, I'll have a try. And you're videos are really helpful for us, Thanks for that 🙂

[@Itsourfamilys]

Hi Raghav , I see lot of changes going on from selenium end which is better and good in market right now ? Do we need to shift from selenium ?

[@RaghavPal]

Selenium is still a very popular automation testing framework, but there are a number of new frameworks that are gaining popularity. Some of the most popular alternatives to Selenium include: * **Cypress:** Cypress is a newer framework that is known for its speed and reliability. It is also very easy to learn and use. * **Playwright:** Playwright is a newer framework that is based on WebDriver. It is known for its flexibility and its ability to automate a wide range of web applications. * **Appium:** Appium is a framework that can be used to automate both web and mobile applications. It is a good choice for automating applications that are developed using different platforms. Whether or not you need to shift from Selenium depends on your specific needs. If you are happy with Selenium and it is meeting your needs, then there is no need to switch. However, if you are looking for a newer framework that is faster, more reliable, or easier to use, then you may want to consider one of the alternatives. Here are some factors to consider when deciding whether or not to switch from Selenium: * The type of applications that you need to automate. * The skills and experience of your team. * Your budget. If you are not sure whether or not to switch from Selenium, I recommend that you do some research and try out some of the alternative frameworks. You can also talk to other automation engineers to get their recommendations. I hope this helps!

[@amarkadam9831]

Hello Raghav sir, Could you please help me in below question, I want to send Playwright test reports to slack channel using typescript?

[@RaghavPal]

Amar Certainly, I can assist you in sending Playwright test reports to a Slack channel using TypeScript. Here's a step-by-step guide to achieve this: 1. **Install Required Packages:** Install the necessary packages for Playwright and Slack interactions using npm: ```bash npm install playwright @slack/web-api ``` 2. **Configure Slack Web API:** Create a Slack app and obtain the OAuth token for your Slack bot. Store this token securely as an environment variable named `SLACK_BOT_USER_OAUTH_TOKEN`. 3. **Create the Playwright Report Sender:** Create a TypeScript file (e.g., `playwrightSlackReporter.ts`) to handle the report generation and sending process: ```typescript import { defineConfig } from '@playwright/test'; import { SlackClient } from '@slack/web-api'; export async function sendPlaywrightReportToSlack(report: string, channels: string[]) { const slackClient = new SlackClient({ token: process.env.SLACK_BOT_USER_OAUTH_TOKEN }); for (const channel of channels) { const message = { channel: channel, text: `Playwright Test Report: ${report}`, }; await slackClient.chat.postMessage(message); } } ``` 4. **Integrate with Playwright Configuration:** In your Playwright test configuration file (e.g., `playwright.config.ts`), import the report sender function and use it to send the report after test execution: ```typescript import { defineConfig } from '@playwright/test'; import { sendPlaywrightReportToSlack } from './playwrightSlackReporter'; export default defineConfig({ reporter: [ ['html', { outputFile: 'test-results.html' }], async ({ config, report }) => { const channels = ['#playwright-tests', '#dev-reports']; await sendPlaywrightReportToSlack(report.toString(), channels); }, ], }); ``` 5. **Run Playwright Tests:** Execute your Playwright tests using the `npx playwright test` command. The generated test reports will be sent to the specified Slack channels upon test completion.

[@RahulSharma-ke7wg]

thanks for this video series, i want to use playwrite add on in my storybook ,can you make a video of any by making a component and use stories to test ,i would be helpfull 🙂

[@RaghavPal]

I will check and plan Rahul

[@sreelaxmim8971]

For learning automation testing , selenium or playwright which is a better option? please advise.

[@RaghavPal]

Hi Sreelaxmi Both Selenium and Playwright are popular and powerful automation testing frameworks, and the choice between them depends on your specific requirements and preferences. Here are some factors to consider: 1. *Browser Support:* Selenium has been around for a longer time and offers support for a wide range of browsers, including Chrome, Firefox, Safari, and Internet Explorer. Playwright, on the other hand, provides cross-browser support for Chrome, Firefox, and WebKit (including Safari). If you need to test on multiple browsers, Selenium might be a better choice. 2. *Programming Language:* Selenium supports multiple programming languages, including Java, C#, Python, Ruby, and more. Playwright, on the other hand, supports JavaScript/TypeScript, Python, and .NET. If you have a preference for a particular programming language, choose the framework that aligns with your expertise. 3. *Ease of Use:* Playwright is known for its simplicity and developer-friendly APIs, making it relatively easier to learn and use. It provides a high-level API that abstracts away many complexities of browser automation. Selenium, while powerful, can have a steeper learning curve due to its more comprehensive feature set and mature ecosystem. 4. *Browser Automation Capabilities:* Both Selenium and Playwright offer robust browser automation capabilities, including page navigation, form filling, element interaction, and more. However, Playwright provides some additional features like native mobile automation (for Android and iOS), file uploads, and better support for modern web technologies. 5. *Community and Support:* Selenium has a larger and more established community, with extensive documentation, tutorials, and online resources. It also has a wide range of integrations and third-party libraries available. Playwright, although relatively newer, has been gaining popularity and has an active community and growing support. Consider your specific needs, the programming language you are comfortable with, and the level of browser support required for your project. Both Selenium and Playwright are excellent choices, and you can't go wrong with either of them. It may be beneficial to try out both frameworks on smaller projects or sample applications to get a better sense of their features, ease of use, and suitability for your testing requirements

[@sreelaxmim8971]

@@RaghavPal thanks Raghav for detailed explanation..

[@aysanaaskarova1676]

Thank uuuuuuuuu❤🎉 U are awesome 💐 Good luck, it’s very helpful and interesting sessions ❤

[@RaghavPal]

Most welcome Aysana

[@adityamishal7085]

@Raghav Playwrite can be used to automate Mobile apps ? Android and iOS ?

[@RaghavPal]

Aditya Playwright is primarily designed for automating web browsers, not mobile apps. However, it does provide some mobile-related features through its browser emulation capabilities. Playwright allows you to emulate mobile devices using its `browserType.launch` method with the `--mobile` flag. This enables you to simulate mobile devices, such as iPhones or Android phones, within a desktop browser. While this is useful for testing mobile-responsive web applications, it's not the same as automating native mobile apps. To automate native mobile apps, you need a framework that can interact with the mobile operating system and the app itself. Some popular alternatives for mobile app automation are: * Appium: An open-source test automation framework that supports both Android and iOS. * Robot Framework: A generic test automation framework that can be used with various libraries, including those for mobile app automation. * Espresso (Android) and XCTest (iOS): Native testing frameworks provided by the respective mobile operating systems. -

[@AD-mn4wy]

Thank you for this, is there any video of playwright with JAVA? Can we use this for rendering pdf headless using html?

[@RaghavPal]

Not yet created Playwright with Java

[@henrynwosu6277]

Wow! Thank you so much sir! Helpful Is an understatement. God bless you.

[@RaghavPal]

You are most welcome

[@nagendranfriends3153]

Requesting you to give video on how to connect gmail with imap lib in js for reading mail otp . Please

[@RaghavPal]

I will check and plan Nagendran

[@himats7195]

Hello Raghav, need your help pls. I am trying to automate other languages emails in playwright typescript. How to know what encoding to use for each language. I am doing trial and errors to find out. Is there any reference related to this. For German, Dutch , converting base64 format to utf-8. For turkish, utf 8 did not work for some words. Can you please guide if any idea on this.

[@RaghavPal]

Hima When dealing with encoding for different languages in email automation, there are a few considerations to keep in mind: 1. Unicode and UTF-8: - UTF-8 is a widely used encoding that can handle characters from various languages, including German, Dutch, Turkish, and more. - It's a good choice for most scenarios because it's efficient and can represent all Unicode characters. - UTF-8 uses variable-length encoding, meaning it uses 1 to 4 bytes per character, depending on the character itself. - For most text, it will use only one byte (ASCII characters), but it can handle multibyte characters (e.g., umlauts, emojis) when needed. 2. Language-Specific Considerations: - For German and Dutch, UTF-8 should work well. These languages use characters within the ASCII range, which UTF-8 handles efficiently. - For Turkish, UTF-8 should also work, but be aware that some specific Turkish characters (like "İ" and "ı") have unique rules in Turkish typography. Make sure your email templates handle them correctly. - If you encounter issues with specific words, consider checking if they contain any special characters or diacritics that might need special handling. 3. Testing and Trial: - Since you're already doing trial and error, continue testing with UTF-8. - If you encounter specific issues, investigate further and adjust your encoding approach accordingly. 4. Reference: - The Unicode Consortium provides detailed information about character sets and encodings. You can explore their documentation for more insights. - Additionally, consider reading Joel Spolsky's article: "[The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets](www.joelonsoftware.com/2003/10/08/the-absolute-minimum-every-software-developer-absolutely-positively-must-know-about-unicode-and-character-sets-no-excuses/)." Remember that consistency across your entire email automation process is crucial. Stick to a single encoding (preferably UTF-8) to avoid unexpected issues. If you encounter specific problems with certain words, investigate further and adapt as needed --

[@himats7195]

@@RaghavPal Thanks a lot for your detailed reply and guidance.

[@himats7195]

@@RaghavPal Thanks for your service in helping and taking out time to answer questions so patiently. Your answer gave direction and confidence in finding the solution.

[@takandalotakaanesh65]

@AskRaghav i have a question it is possible to add cucumber(feature file) on playwright

[@RaghavPal]

Hi Yes, it is possible to add Cucumber (feature file) on Playwright. Cucumber is a behavior-driven development (BDD) framework that allows you to write tests in a natural language format. Playwright is a web automation framework that allows you to automate web applications. To add Cucumber (feature file) on Playwright, you can follow these steps: 1. Create a new feature file. 2. In the feature file, write the tests in a natural language format. 3. Use the Playwright API to interact with the web application. 4. Run the feature file. Here is an example of a Cucumber (feature file) that uses Playwright: ``` Feature: Login to Facebook Scenario: Login with valid credentials Given I am on the Facebook login page When I enter my email address And I enter my password And I click on the login button Then I should be logged in to Facebook ``` To run the feature file, you can use the following command: ``` npx playwright test my-feature-file.feature ``` This will run the feature file and generate a report. I hope this helps

[@srividya76]

Hi raghav, is this playwright automation supports to react application ? I want to use playwright automation

[@RaghavPal]

Playwright is good choice for automating React applications. Here's why: 1. Targeting React Components: - With Playwright, you can easily target React components to test modular UIs - It ensures test reliability and speed, allowing developers to focus on building rather than debugging. 2. Features of Playwright: - Cross-Browser Compatibility: Playwright works with modern rendering engines (Firefox, WebKit, Chromium). - Headless and GUI Modes: Launch browsers in GUI mode for development/debugging or headless mode for faster testing. - Cross-Language Support: Access the Playwright API from JavaScript, TypeScript, Python, .NET, and Java. - Mobile Web Evaluation: Supports Chrome for Android and Mobile Safari native emulation. - CI Integration: Easily integrate with CI environments for continuous testing. - Playback and Codegen Recording: Create test scripts by recording interactions with the browser 3. Unified Testing Strategy: - Playwright helps create a unified testing strategy across different levels, including end-to-end testing for React applications Feel free to explore Playwright for your React projects-it's a powerful tool for automating web interactions Do a POC before finalising the tool -

[@thinkholisticwellness]

Hi Raghav. I see this course is using JavaScript, but wondering if you also have another course using python? Thank you. Superb work!

[@RaghavPal]

Will upload soon

[@RupaKumari-mx9uh]

And how about Java please?😘😘

[@RaghavPal]

I will plan

[@yarahman72]

Hi Raghav, I really appreciate all your efforts in teaching Playwright. Really help and awesome videos to learn and automate using playwright. I am able to successfully write and run end to end test cases using Playwright. I have question in relation to how to use a test data sheet and link it to a test case. For example, I have a bunch of customers details for which I want to use the test case to use and execute the same test cases for various test data in the spreadsheet. Can you please provide some details around how to create a test data and associate the same to the test case.

[@RaghavPal]

Hi Rahman, You can link test data to test cases in Playwright using a spreadsheet or a CSV file. You can store test data in a spreadsheet, with each row representing a set of test data, and then read that data in your test cases. Eg: const fs = require('fs'); const csv = require('csv-parser'); const results = []; fs.createReadStream('testdata.csv') .pipe(csv()) .on('data', (data) => results.push(data)) .on('end', () => { for (const data of results) { describe(`Test for ${data.username}`, () => { it('test case 1', async () => { // Use data in test case }); }); } }); This code uses the fs module to read the CSV file, the csv-parser library to parse the data, and the describe and it functions from Mocha to define test cases. You can modify this code to fit your specific requirements. The describe function allows you to group test cases, while the it function allows you to define individual test cases. In each test case, you can use the data from the data object to perform tests.

[@meenalkuber2247]

Hello , your videos are always useful. I would like to know if you have series of Playwright with .Net please similar to Node project series with Playwright? Thanks

[@RaghavPal]

Not yet Meenal.. will plan

[@CristianoistheGOAT-g3b]

Hi @Raghav, Thank you so much for this tutorial. When are you going to do the video on the page object model for this playlist?

[@RaghavPal]

I will plan in some time

[@CristianoistheGOAT-g3b]

Hi @Raghav, when I ran this command npx playwright test .\tests\AnnotationsAndTags.spec.js --project=chrome --grep "@smoke", I got the attached error " Running 0 tests using 0 workers Error: Requiring @playwright/test second time, First: Error: at Object. (C:\Users\oluse\OneDrive\Desktop\Playwright ode_modules\@playwright\test\lib\index.js:64:33) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Object.t..tu._extensions. [as .js] (C:\Users\oluse\OneDrive\Desktop\Playwright ode_modules\@playwright\test\lib\utilsBundleImpl.js:16:1010) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (C:\Users\oluse\OneDrive\Desktop\Playwright ode_modules\@playwright\test\index.js:17:13) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Object.t..tu._extensions. [as .js] (C:\Users\oluse\OneDrive\Desktop\Playwright ode_modules\@playwright\test\lib\utilsBundleImpl.js:16:1010) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) Second: at Object. (C:\Users\oluse\OneDrive\Desktop\Playwright\tests ode_modules\@playwright\test\lib\index.js:59:11) at Object. (C:\Users\oluse\OneDrive\Desktop\Playwright\tests ode_modules\@playwright\test\index.js:17:13) at Object. (C:\Users\oluse\OneDrive\Desktop\Playwright\tests\AnnotationsAndTags.spec.js:3:13)". Kindly assist

[@mouthecutest]

Hi Raghav, can you please explain how oops concept is applicable in the page object model framework you designed here? Also is it necessary to make the locators private as Javascript do not have any reserved keyword as Private?

[@RaghavPal]

Hi Moumita, In the Page Object Model (POM) framework, the OOPs concept is applicable by treating each page of the application as an object, with its own set of properties and methods. Each page object is designed to represent a specific page or a section of the application. The page objects are designed to encapsulate the details of the page, such as the page structure and the web elements within the page, which allows for a separation of concerns between the test logic and the implementation details. This helps to create more maintainable and scalable automation tests. For example, let's say we have a LoginPage class that represents the login page of our application. This class can have methods to perform actions on the login page such as entering the username and password, and clicking on the login button. The LoginPage class can also have properties to represent the elements on the page, such as the username input field, password input field, and login button. Regarding the use of private locators in JavaScript, while JavaScript doesn't have a reserved keyword for private access, it is still recommended to use encapsulation and make the locators private by convention. In JavaScript, you can use naming conventions such as using a prefix underscore '_' to denote private properties and methods. By doing so, you can control access to the locators and prevent direct modification of the page object's internal state from outside the class, ensuring the integrity of your test suite

[@mouthecutest]

@@RaghavPal Thanks a lot Raghav for such a detailed explanation. I am an ardent follower of your content..We cannot be more thankful for everything you do for the testing community. Much appreciated.

[@kidvikvlogs]

Hi ragav,which combination is suggested? Playwright with javascript or Playwright with Java Kindly choose anyone and why

[@RaghavPal]

Hi Karthic Both combinations are possible and can be used depending on the project requirements and the developer's expertise Using Playwright with JavaScript is suitable for developers and testers who have experience with JavaScript and prefer to work with Node.js. JavaScript is a popular programming language with a large community, so it is easy to find solutions to any issues or problems that may arise during development. On the other hand, using Playwright with Java is suitable for developers and testers who prefer to work with Java, which is also a popular programming language. Java has been in use for a long time and has a vast community, so there are numerous libraries and tools available to help developers in their development work. Ultimately, the choice between using Playwright with JavaScript or Java depends on the specific needs and skills of the dev and testing team

[@ankitashukla4289]

#AskRaghav Please if you can explain about what are test fixtures? and its usage in detail.Thanks

[@RaghavPal]

Ankita Let's dive into the world of test fixtures in Playwright, breaking it down for beginners. ## What Are Test Fixtures? - Test fixtures are like the backstage crew for a theater performance. They set up the stage, props, and lighting before the actors come in. Similarly, in software testing, fixtures prepare the environment for each test. - Think of fixtures as a handy toolkit that provides everything a test needs-no more, no less. They ensure that each test runs in a clean, isolated setup. ## Why Use Test Fixtures? 1. Isolation: Fixtures keep tests separate. Changes made by one test won't affect others. 2. Reusability: You can reuse fixtures across multiple tests. Imagine having a toolbox with tools you can use in different projects. 3. Efficiency: Fixtures set up only what's needed for a specific test. No unnecessary overhead. ## Common Built-in Fixtures in Playwright: 1. `page` (Isolated Page): - Represents a browser page for a single test. - Example: ```javascript test('basic test', async ({ page }) => { await page.goto('playwright.dev/'); await expect(page).toHaveTitle(/Playwright/); }); ``` 2. `context` (Isolated Browser Context): - Provides an isolated context for a test run. - The `page` fixture belongs to this context. - Useful for scenarios like logging in with different users. - Learn how to configure context. 3. `browser` (Shared Browser): - Browsers are shared across tests to optimize resources. - Learn how to configure the browser. 4. `browserName` (Browser Name): - Tells you which browser (chromium, firefox, or webkit) is running the test. 5. `request` (Isolated API Request Context): - Provides an isolated instance for making API requests during testing. ## Example: Traditional vs. Fixture-Based Setup ### Traditional (Without Fixtures): ```javascript const { test } = require('@playwright/test'); const { TodoPage } = require('./todo-page'); test.describe('todo tests', () => { let todoPage; test.beforeEach(async ({ page }) => { todoPage = new TodoPage(page); await todoPage.goto(); await todoPage.addToDo('item1'); await todoPage.addToDo('item2'); }); test.afterEach(async () => { await todoPage.removeAll(); }); test('should add an item', async () => { await todoPage.addToDo('my item'); // ... }); test('should remove an item', async () => { await todoPage.remove('item1'); // ... }); }); ``` ### With Fixtures: - Fixtures encapsulate setup and teardown in one place. - Reusable between test files. - On-demand setup. - Composable and flexible. - Simplifies grouping. ## Conclusion Test fixtures make your testing life easier. They provide a clean, organized way to set up your test environment. Now you're ready to use fixtures like a pro

[@NicolaeDaian-x1y]

Thank you again for this series, very useful and very easy to follow. Currently we use Jest to do component-testing. Is it possible to do component testing with Playwright?

[@RaghavPal]

Nicolae Yes, it is possible to do component testing with Playwright. Playwright has a built-in feature for component testing, which was introduced in version 1.22.0. To use Playwright for component testing, you need to create a test script that imports and tests your components. You can use the `mount()` method to mount the component to the DOM and then interact with the component using Playwright's methods. Here is an example of a Playwright component test script: ``` import { test, expect } from '@playwright/test'; import { MyComponent } from './MyComponent'; test('MyComponent should render correctly', async () => { const component = await test.mount(MyComponent); expect(component).toBeInTheDocument(); expect(component).toHaveTextContent('Hello, world!'); }); ``` To run the component test script, you can use the following command: ``` npx playwright test ``` Playwright will run the test script and generate a report. The report will show you whether the test passed or failed, as well as any errors that occurred. Playwright component testing is still under development, but it is already a powerful tool for testing React components. Playwright provides a number of features that make it a good choice for component testing, such as: *Support for multiple browsers.* Playwright supports a variety of browsers, including Chromium, Firefox, and WebKit. This allows you to test your components in multiple browsers without having to write separate tests for each browser. *Parallel execution.* Playwright can run tests in parallel, which can significantly reduce the time it takes to run your tests. *Reporting.* Playwright generates a report that shows you the results of your tests. The report includes information such as whether the test passed or failed, as well as any errors that occurred. If you are looking for a tool to test your React components, Playwright is a good option to consider. It is a powerful tool that provides a number of features that make it a good choice for component testing. I hope this helps

[@aylinbekem3701]

Thanks, Raghav 🤩

[@RaghavPal]

Most welcome Aylin

[@rosya.traveler4269]

I like the way you teach. thank you for doing it step by step. Making it easy for us to follow and understand.

[@RaghavPal]

You're very welcome Rosy

[@parthipan872]

Thanks for you for your effort on playwright playlist. We are waiting for more videos till framwork and most of the features

[@RaghavPal]

Will upload soon

[@chandrasekharthota943]

HI Raghav , we are looking for PlayWright corporate training . please let me know how I can reach out to you

[@RaghavPal]

Hello Chandra Sekhar As of now I will not be able to take this training

[@pagidivamsikrishna3809]

#AskRaghav Can we use Playwright to test the Analytics Dashboard? Or any other tools to test Dashboards. Pleas suggest.

[@RaghavPal]

Absolutely! Testing dashboards is crucial for ensuring data accuracy and functionality, and several tools, including Playwright, can be effectively used for this purpose. Here's a breakdown of various options: Playwright: - While Playwright excels at testing web applications, it can also handle dashboard testing with some considerations: - Limited visual comparison: Playwright primarily asserts on text content and element interactions, not complex visualizations. - Need for scripting: You might need to write custom logic to analyze charts and graphs effectively. Advantages: - Familiar language (TypeScript, JavaScript, Python, .NET) - Cross-browser testing - Fast and reliable Alternatives: - Cypress: Similar to Playwright, good for basic dashboard testing but limited in visual verification. - Selenium: Widely used, supports advanced visual comparisons but can be more complex to set up. - Specialized tools: - Applitools: Focuses on visual regression testing, ideal for verifying chart layouts and colors. - TestCraft: Designed specifically for BI and data visualization testing, offers pre-built assertions for charts and graphs. Choosing the right tool: - Complexity of dashboard: For simple dashboards, Playwright or Cypress might suffice. For complex visualizations, consider Applitools or TestCraft. - Development team familiarity: Select a tool with languages your team is comfortable with for easier adoption. - Specific needs: Assess your testing requirements (visual verification, performance, data accuracy) and choose a tool that addresses them effectively. Additional tips: - Combine tools for comprehensive testing: Use Playwright for basic functionality and Applitools for visual regression. - Start with manual testing to identify key areas for automation. - Pay attention to performance and usability aspects during testing. I hope this helps

[@sujithsudha2470]

Sir, can u please provide a tutorial on React Component Testing in Playwright

[@RaghavPal]

I will check and try Sujith

[@pandutadavarthy8332]

Hi Raghav what is impact of playwright is going to create change in Test Automation and carrier scope

[@RaghavPal]

Playwright has really good features and will be a good skill set to acquire Pandu

[@vigneshngws6684]

Hello, Raghav we need security testing or penetration testing series.

[@RaghavPal]

I will plan on that Vignesh

[@shubhankarh5132]

Hi Raghav, does playwright supports both desktop based and web based applications? as the application which I work, runs on both desktop based and web based application.

[@RaghavPal]

Hi Shubhankar, Yes, Playwright does support both desktop-based and web-based applications. Playwright is a Node.js library that enables you to automate both web and desktop applications. It supports automating applications built on various desktop platforms, such as Windows, macOS, and Linux, as well as popular web browsers, such as Chromium, Firefox, and Safari. In addition, Playwright provides a simple and concise API for automating desktop applications using the same set of commands that are used for automating web applications. This makes it easy to write tests that cover both desktop and web applications, without having to switch between different tools or APIs.

[@marilagc]

Hi. Thank you for this video. I would like to ask if you have any idea if I can integrate playwright with apache jmeter? My aim is to test the client side performance of the app by executing a playwright script via jmeter. Is it possible? Thank you so much.

[@RaghavPal]

Hi Erika, Yes, it is possible to integrate Playwright with Apache JMeter to test the client-side performance of an application. Here's one way to achieve this integration: Create a Playwright script to perform the desired actions on your application. Use a tool like Playwright Test Runner to run your script and generate a HAR file that captures network traffic data. Convert the HAR file to a JMeter JMX file using a tool like HAR to JMeter Converter. In JMeter, create a new test plan and add an HTTP(S) Test Script Recorder to capture HTTP requests. Start the HTTP(S) Test Script Recorder and configure it to record requests on the desired port. Run your Playwright script while the HTTP(S) Test Script Recorder is running to capture the network traffic. Stop the HTTP(S) Test Script Recorder and the Playwright script. Import the JMX file generated by the HAR to JMeter Converter into JMeter. Run your JMeter test plan to perform load testing and analyze the client-side performance of your application. I hope this helps you integrate Playwright with Apache JMeter for client-side performance testing

[@DR-wp9ol]

Hi sir, I am Associate Software Engineer, I am planning to change my career to QA!! Can you guide me to change my path??

[@RaghavPal]

Take care of these: Understand the QA Role Familiarize yourself with the responsibilities of a QA engineer, including testing methodologies, tools, and processes. Learn about different types of testing (manual, automated, performance, etc.). Leverage Your Current Skills Highlight your programming knowledge, as it can be beneficial for automated testing. Emphasize your understanding of software development life cycles (SDLC) and how QA fits into it. Gain Relevant Knowledge Consider taking courses or certifications in QA methodologies (e.g., ISTQB). Learn about popular testing tools (e.g., Selenium, JUnit, TestNG). Build a Portfolio Work on personal or open-source projects to practice your testing skills. Document your testing processes and results to showcase your abilities. Network and Seek Opportunities Connect with QA professionals through LinkedIn or local meetups. Look for entry-level QA positions or internships to gain practical experience. Prepare for Interviews Be ready to explain your motivation for the career change and how your background in software engineering will benefit your role in QA. Practice common QA interview questions and scenarios. By following these steps, you can effectively transition from an Associate Software Engineer to a QA role Good luck -

[@UsmanMusharafSays]

Hi Sir, this is amazing - one request, when you say you can take screenshot to remember the stuff, can you please hide yourself from the screen for a sec so we can take the screenshot with ease😅and you are awesome tutor, thank you!

[@RaghavPal]

Noted Usman, I will take care in future videos

[@Axx-d9e]

I load playwrights from visual studio code , it says this extensions is enabled globally. What should I do

[@RaghavPal]

When you load the Playwright extension from Visual Studio Code, and it says that the extension is enabled globally, this means that the Playwright extension is installed globally on your computer, and not just in your Visual Studio Code workspace. There are a few reasons why you might want to load the Playwright extension from Visual Studio Code instead of using the global installation: * To be able to use the Playwright extension in multiple Visual Studio Code workspaces. * To be able to use the latest version of the Playwright extension, even if you have an older version of the Playwright extension installed globally. * To be able to use the Playwright extension with a specific version of Node.js, even if you have a different version of Node.js installed globally. To load the Playwright extension from Visual Studio Code, follow these steps: 1. Open Visual Studio Code. 2. Click on the **Extensions** icon in the sidebar. 3. Search for "Playwright" in the extensions marketplace. 4. Click on the **Install** button next to the Playwright extension. 5. Once the extension is installed, click on the **Reload** button to reload Visual Studio Code. Once the Playwright extension is loaded from Visual Studio Code, you can start using it to test your web applications. If you are still getting the error message "This extension is enabled globally" after following these steps, then you can try the following: * Close Visual Studio Code and reopen it. * Try restarting your computer. * Uninstall the Playwright extension from Visual Studio Code and then reinstall it.

[@sanjeev8720]

Hi sir ..can you please tell me What are the playwright bottle necks and how to resolve it

[@RaghavPal]

Sanjeev Playwright bottlenecks refer to situations where the performance of your automation tests is limited by a specific component or resource. In simple terms, it's like a traffic jam where everything slows down because of a single congested point To identify and resolve Playwright bottlenecks, follow these steps: Step 1: Identify the Bottleneck Look for the slowest part of your test. Is it the browser launch, navigation, or some specific action? Use tools like Playwright's built-in test function to measure the execution time of each step. javascript import { test, expect } from '@playwright/test'; test('example', async ({ page }) => { // Measure the execution time of each step const startTime = Date.now(); await page.goto('example.com'); const endTime = Date.now(); console.log(`Navigation took ${endTime - startTime}ms`); }); Step 2: Optimize Browser Launch If the bottleneck is browser launch, consider using a headless browser or a browser in a Docker container. This can significantly reduce the launch time. javascript import { test, expect } from '@playwright/test'; test('example', async ({ page }) => { // Use a headless browser const browser = await playwright.chromium.launch({ headless: true }); const context = await browser.newContext(); const page = await context.newPage(); }); Step 3: Optimize Navigation If the bottleneck is navigation, consider using page.goto with the waitUntil option set to networkidle. This can help reduce the time spent waiting for the page to load. javascript import { test, expect } from '@playwright/test'; test('example', async ({ page }) => { // Use page.goto with waitUntil: networkidle await page.goto('example.com', { waitUntil: 'networkidle' }); }); Step 4: Optimize Actions If the bottleneck is a specific action, consider using page.waitFor to wait for the action to complete before proceeding. javascript import { test, expect } from '@playwright/test'; test('example', async ({ page }) => { // Wait for the action to complete await page.click('button'); await page.waitForNavigation(); }); Step 5: Use Parallel Testing If you have multiple tests that can run independently, consider using parallel testing to run them concurrently. This can significantly reduce the overall test execution time. javascript import { test, expect } from '@playwright/test'; test.describe.parallel('example', () => { test('test 1', async ({ page }) => { // Test 1 }); test('test 2', async ({ page }) => { // Test 2 }); }); By following these steps, you can identify and resolve Playwright bottlenecks, improving the performance of your automation tests -

[@mohammedirfan4308]

#AskRaghav Hi, i already have experience in Java with selenium and Appium. now moving to playwright with javascript how hard will it be to learn javascript from java and will it be helpful in my SDET role in long run

[@RaghavPal]

Irfan Learning JavaScript from a Java background shouldn't be too difficult. Both languages share similarities in object-oriented programming, data structures, and algorithms. However, JavaScript is more flexible and dynamic, with a different syntax and type system -

[@Amitpatil-g8g]

Hi raghav , javascript is mandatory to learning playwright tool. Current I am using selenium- Java. Java is better ya learn separate javascript language? & Then after learn playwright. This is a way ?

[@RaghavPal]

Shiv While JavaScript is the primary language for Playwright, it's not strictly mandatory to learn it extensively before diving in, especially if you have a Java background. Here are your options: *1. Utilize Playwright Java:* - Playwright offers a Java API, allowing you to write tests in Java while leveraging Playwright's features. - This approach aligns with your existing Java experience. - Example: ```java import com.microsoft.playwright.*; public class ExampleTest { public static void main(String[] args) { try (Playwright playwright = Playwright.create()) { Browser browser = playwright.chromium().launch(); Page page = browser.newPage(); page.navigate("playwright.dev"); // ... your test actions } } } ``` *2. Consider Playwright for Java's JUnit 5 Extension:* - This extension streamlines Playwright test integration into JUnit 5 test suites. - It provides annotations for test setup and execution. *3. Explore Playwright for Java's Gradle Plugin:* - If you use Gradle, this plugin simplifies Playwright dependency management and test execution. *4. Learn Basic JavaScript (Recommended):* - Even with Playwright Java, a basic understanding of JavaScript syntax and concepts is beneficial: - Interact with browser APIs more effectively. - Understand Playwright's underlying mechanisms better. - Troubleshoot issues more efficiently. - Potentially contribute to Playwright's open-source development. *Key Considerations:* - *Learning Curve:* Playwright's Java API is relatively new and less mature compared to its JavaScript counterpart. Expect some learning curve and potential limitations. - *Long-Term Benefits:* Investing in JavaScript knowledge can expand your testing capabilities and open doors to other tools and frameworks in the web development ecosystem. *Recommendations:* - *Start with Playwright Java:* Leverage your Java experience to quickly adopt Playwright's core features. - *Gradually Learn JavaScript:* Incrementally introduce JavaScript concepts as needed for deeper understanding and flexibility. - *Explore JavaScript Resources:* Utilize online tutorials, courses, and documentation to learn JavaScript basics.

[@sanjeev8720]

Hi sir..How to highlight text in playwright javascript ..I have taken text locator..I just want to highlight that text..Can you suggest on this sir

[@RaghavPal]

Sanjeev To highlight text in Playwright JavaScript, you can use the following steps: 1. **Get the text locator.** You can use the `querySelector()` method to get the text locator for the text that you want to highlight. 2. **Create a new `Highlight` object.** You can use the `new Highlight()` constructor to create a new `Highlight` object. 3. **Set the text locator for the `Highlight` object.** You can use the `setLocator()` method to set the text locator for the `Highlight` object. 4. **Highlight the text.** You can use the `highlight()` method to highlight the text. The following code snippet shows how to highlight text in Playwright JavaScript: ```javascript // Get the text locator. const textLocator = await page.querySelector('.my-text'); // Create a new Highlight object. const highlight = new Highlight(); // Set the text locator for the Highlight object. highlight.setLocator(textLocator); // Highlight the text. highlight.highlight(); ``` You can also use the `highlight()` method to highlight text for a specific duration. To do this, you can pass a duration in milliseconds to the `highlight()` method. The following code snippet shows how to highlight text for a specific duration in Playwright JavaScript: ```javascript // Get the text locator. const textLocator = await page.querySelector('.my-text'); // Create a new Highlight object. const highlight = new Highlight(); // Set the text locator for the Highlight object. highlight.setLocator(textLocator); // Highlight the text for 5 seconds. highlight.highlight(5000); ``` Once you have highlighted the text, you can use the `unhighlight()` method to unhighlight the text. The following code snippet shows how to unhighlight text in Playwright JavaScript: ```javascript // Get the text locator. const textLocator = await page.querySelector('.my-text'); // Create a new Highlight object. const highlight = new Highlight(); // Set the text locator for the Highlight object. highlight.setLocator(textLocator); // Highlight the text. highlight.highlight(); // Unhighlight the text. highlight.unhighlight(); ```

[@ffgaming-fe3cx]

how to find multiple elements using python? which locator or selector should i need?

[@RaghavPal]

In Playwright for Python, you can find multiple elements using the `locator.all()` method. This allows you to locate and interact with multiple elements that match a specific selector. Let's explore how to use it: 1. Creating a Locator: - First, create a locator using the `page.locator()` method. You can specify a CSS selector, text, or other attributes to identify the elements you want to find. - For example: ```python # Create a locator for all buttons with a specific class button_locator = page.locator('.my-button-class') ``` 2. Finding Multiple Elements: - Once you have the locator, use the `all()` method to get an array of locators pointing to all matching elements. - For example: ```python # Get all buttons with the specified class all_buttons = await button_locator.all() # Iterate over the buttons and perform actions for button in all_buttons: await button.click() ``` 3. Accessing Element Properties: - You can access properties of each element using methods like `innerText()`, `textContent()`, or other relevant methods. - For example: ```python for button in all_buttons: button_text = await button.innerText() print(f"Button text: {button_text}") ``` Remember to replace `.my-button-class` with your actual CSS selector or other attributes relevant to your use case. The `all()` method returns an array of locators, allowing you to interact with multiple elements efficiently. ..

[@ffgaming-fe3cx]

Thank you so much for the detailed answer@@RaghavPal