Playwright Beginner Tutorial 2 | How to install
Vložit
- čas přidán 19. 05. 2024
- ▬ ALL FREE COURSES ► automationstepbystep.com/
▬ ASK RAGHAV ► bit.ly/2CoJGWf
QUIZ - forms.gle/UMhid4JwJDB1fmVUA
00:00 Introduction
00:50 Prerequisites
04:33 How to install Playwright
05:02 Option 1 - using node commands
12:35 Playwright project structure
18:34 Option 1 - using vs code extension
25:20 Outro
Visual Studio Code ► bit.ly/2V15yvt
Prerequisites
Node JS
node -v npm -v
IDE ( VS Code )
Install using command as npm package
Step 1 - Create a new folder and open in VS Code
Step 2 - Goto Terminal and run command - npm init playwright@latest
Step 3 - Following will be added
- package.json - node project management file
- playwright.config.js - Configuration file
- tests folder - basic example test
- tests-examples folder - detailed example tests
- .gitignore - to be used during git commit and push
- playwright.yml - to be used during ci cd pipeline (github workflows)
Step 4 - Check playwright added - npm playwright -v
Step 5 - Check playwright command options - npx playwright -h
Using VS Code extension
Step 1 - Create a new folder and open in VS Code
Step 2 - Goto Extensions section and install Playwright extension from Microsoft
Step 3 - Goto View - Command Palette and type playwright - select install playwright
Step 4 - Select the browsers and click ok
Step 5 - It will install the libraries and create the project folders
#playwright #automation #testing
CI CD DEVOPS
JENKINS BEGINNER ► bit.ly/2MIn8EC
JENKINS TIPS & TRICKS ►bit.ly/2LRt6xC
JENKINSFILE ► bit.ly/3JSMSZ7
DOCKER ► bit.ly/2MInnzx
KUBERNETES ► bit.ly/2MJIlMK
UI TESTING
SELENIUM BEGINNERS ► bit.ly/2MGRS8K
SELENIUM JAVA FRAMEWORK ► bit.ly/2N9xvR6
SELENIUM PYTHON ► bit.ly/2oyMp5x
SELENIUM TIPS ► bit.ly/2owxc50
SELENIUM BUILDER ► bit.ly/2MKNtlq
SELENIUM 4 ► bit.ly/3AiJOlP
KATALON STUDIO ► bit.ly/2wARFdi
ROBOT FRAMEWORK with RIDE ► bit.ly/2Px6Ue9
ROBOT FRAMEWORK with Eclipse► bit.ly/2N8DZxb
PROTRACTOR ► bit.ly/2KtqVkU
ACCELQ ► bit.ly/3PlsAsh
TEST PROJECT ► bit.ly/2DRNJYE
CUCUMBER BDD ► bit.ly/3Cnno4z
CYPRESS ► bit.ly/3PpEukM
XPATH & WEB LOCATORS ► bit.ly/3PpEvoQ
API TESTING
WEB SERVICES (API) ► bit.ly/2MGafL7
SOAPUI ► bit.ly/2MGahmd
POSTMAN ► bit.ly/2wz8LrW
POSTMAN 2022 ► bit.ly/3JWm4qX
JMETER API TESTING ► bit.ly/3AgVPar
KATALON STUDIO API ► bit.ly/2BwuCTN
REST ASSURED ► bit.ly/3zUdhRD
KARATE API ► bit.ly/3w3H5Ku
API MOCKING ► bit.ly/3bYPsjS
MOBILE TESTING
APPIUM ► bit.ly/2ZHFSGX
MOBILE TESTING ►bit.ly/2PxpeUv
PERFORMANCE TESTING
JMETER BEGINNER ► bit.ly/2oBbtIU
JMETER INTERMEDIATE ► bit.ly/2oziNVB
JMETER ADVANCED ► bit.ly/2Q22Y6a
JMETER TIPS & TRICKS ► bit.ly/2NOfWD2
GATLING ► bit.ly/3QrWfkV
IDE
ECLIPSE ► bit.ly/3AnRhQP
INTELLIJ IDEA ► bit.ly/3AnyDZ8
PROGRAMMING
JAVA BEGINNERS ► bit.ly/2PVUcXs
JAVA TIPS & TRICKS ► bit.ly/2CdcDnJ
GROOVY ► bit.ly/2FvWV5C
JAVASCRIPT ► bit.ly/2KJDZ8o
TYPESCRIPT ► bit.ly/3dvJBmz
PYTHON ► bit.ly/2Z4iRye
BUILD TOOLS
MAVEN ► bit.ly/2NJdDRS
GRADLE ► bit.ly/30l3h1B
SOURCE CODE MANAGEMENT
GIT & GITHUB ►bit.ly/2Q1pagY
GITLAB ► bit.ly/2kQPGyQ
CLOUD SERVICES
BROWSERSTACK ► bit.ly/3w7kxZn
SAUCELABS ► bit.ly/3w7kAo1
LAMBDATEST ► bit.ly/3C6TBwM
JSON ► bit.ly/3w450tq
XML ► bit.ly/3PqRneH
VIRTUALIZATION ► bit.ly/2SItIL9
MOCK INTERVIEWS ► bit.ly/3QGwwVJ
SUNDAY SPECIAL ► bit.ly/2wB23BO
GITHUB PROJECTS ► github.com/Raghav-Pal/
STORIES BY RAGHAV ► automationstepbystep.com/stor...
Every LIKE & SUBSCRIPTION gives me great motivation to keep working for you
You can support my mission for education by sharing this knowledge and helping as many people as you can
If my work has helped you, consider helping any animal near you, in any way you can
NEVER STOP LEARNING
Raghav Pal
Well explained. This series will be very helpful whoever wants to learn Playwright. I am expecting all videos run time will be like.
That's the plan!
Wow, the information you give is great. In the first video, usually tutorials will label a few generic benefits to using it, but you really went into detail on things. This second video is really starting to impress me with your teaching.
Are you a licensed teacher? You talk like an experienced programmer and teacher. You explain everything that would be a possible question, before anyone even asks the question! Very informative, very good. You are the most impressive teacher online, doing this all on a 50GB hard drive with 3FPS ahahaha.
Thanks a lot for the kind words and feedback. Humbled.
Once again Raghav nails this introduction.. best on the web by far
Thanks a lot
That very first mouse click was all I needed. I'm using the Python version. Thank you!!!! (Didn't see that first dropdown...)
Glad it helped James
Hi you have helped me understand alot since i started learning playwright testing thank you so much
Most welcome
Very clear and simple ! thank you
Most welcome
@@RaghavPal can you sir give me a roadmap to master automation testing ? Thank you
I will do a session
I have been a follower of this channel from the day, I shifted into IT. I have learnt a lot from here. highly respect your concern on developing from the base. Pls proceed with these kind of tutorials.
Much appreciated Dushan
Awesome explanation. Very useful for the beginners who wants to get into automation. Can you also please do a series with C#?
Thanks a lot..I will plan
Thank you so much! You are the best tutor!
Thanks a lot Irina
Wow Excellent Tutorial for Me. thanks for this.
Most welcome
Awesome explanation. Very helpful for the beginners who wants to learn automation. Can you please also do the series with C#?
Sure, will plan on this.. thanks for watching
Very informative.Thank you
I don't see any quiz questions on playwright in your website .other topics it's present
I just started with the course..Can you add more Project examples for playwright using bdd framework.That helps in practical for beginners in automation with playwright
Interview questions and answers on playwright
Sandhya
For playwright you can find QUIZ link in the description of the videos
Great tutorial! Keep up the good work.
Thanks a lot
very good session, mate. Thank you. And may I know which software you are using for your presentation like to share you desktop and showing camera at the same time in a single screen?
Thanks Ravi, I use mac annotation tools
This is a great video . Thanks! Raghav.
Most welcome Chandanprasad
Very effective Thanks a lot sir 🙏
Most welcome Manoj
Really appreciated for sharing.
Glad you enjoyed it
Thanks Raghav. Scored 4/5
Well done Mohan
Hi sir. firstly your way of explaining and teaching is really the best among all.
I got an issue with WebKit sometimes the execution gets failed either in headed or nonheaded mode.
Hi Sai, thanks. you will need to check the logs. Can also increase timeout in config file
@@RaghavPal Thank you sir
Thanks,
Got 5 in the Quiz
Good, all the best for next Anil
I scored 4/5, I failed the first question. The answer was both.
Thank you so much for this, it's been really helpful.
Most welcome
super, well explained
Glad you liked it Vanaja
Thank you Raghav 👍
My pleasure Akif
Good initiative and explanation. Thanks for your teaching. Can you upload playwright playlist with python also?
I will do Parthi, thanks for watching
@@RaghavPal this is helpful , please upload the playwright playlist with python series
Thank you, Quiz score 4/5
Great score
Hi Raghav,
I am getting the below 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
+ ~~~~
+ CategoryInfo : ObjectNotFound: (-npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Please suggest.
Sagar
The error message `'npm' is not recognized as an internal or external command, operable program or batch file.` means that your computer cannot find the `npm` command. This can happen for a few reasons:
* `npm` is not installed on your computer.
* The `npm` installation directory is not in your PATH environment variable.
* You are using the wrong command to run `npm` commands.
To fix this error, you can try the following:
1. **Make sure that `npm` is installed on your computer.** You can download `npm` from the official website.
2. **Add the `npm` installation directory to your PATH environment variable.** This will tell your computer where to find the `npm` command. To do this, follow these steps:
* Open the Control Panel.
* Click on System and Security.
* Click on System.
* Click on Advanced system settings.
* Click on Environment Variables.
* Under System variables, find the Path variable and double-click on it.
* At the end of the Path variable value, add a semicolon (;) followed by the full path to the `npm` installation directory. For example, if you installed `npm` to the directory `C:\Program Files
odejs`, you would add `;C:\Program Files
odejs` to the Path variable value.
* Click OK to save your changes.
3. **Restart your computer.**
Now, you should be able to run `npm` commands in a terminal. To initialize a Playwright project, you can run the following command:
```
npm init playwright@latest
```
If you are still getting the error message after following these steps, you can try the following:
* Make sure that you are using the correct command to run `npm` commands. The `npm` command is simply `npm`.
* Try restarting your computer.
* Try reinstalling `npm`.
If you are still having trouble, please post a question on Stack Overflow or the Playwright community forum.
Additionally, you can try running the following command to install Playwright:
```
npx playwright install
```
This does not require `npm` to be installed on your computer.
Hi Raghav, Nice session on playwright , Can you pls suggest which framework is better playwright or Cypress, as both are gaining a lot of traction. We have to create an automation framework from scratch for testing MERN based app.
Hi Sumit, you will need to understand the key differences between Playwright and Cypress, and then evaluate against your needs
Here are a few things that you should know that will help you in your selection:
*Browser support* : Both Playwright and Cypress support multiple web browsers (Chrome, Firefox, Safari and Edge), but Playwright also supports mobile browsers (iOS and Android)
*Programming Language* : Both Playwright and Cypress are built on JavaScript. Playwright allows you to write tests in JavaScript, TypeScript and Python, Java, C#
Cypress, supports JavaScript & TypeScript for now
*Concurrency* : Playwright allows you to run tests concurrently in multiple browsers, while Cypress only allows you to run tests in a single browser at a time
*API* : Both Playwright and Cypress have similar APIs for interacting with web pages and automating tasks. However, Playwright has more powerful and expressive APIs, it also supports modern web standards such as WebAssembly and WebRTC
*Test running* : Cypress uses a specialized Test Runner that runs in the browser, Playwright does not need a specialized Test Runner
*Debuggability* : Cypress has a built-in dashboard and a powerful debugging tool that allows you to easily debug test failures. Playwright, on the other hand, does not have a built-in dashboard, but it provides the ability to attach a browser's dev tools to debug the tests
*Time-travel* : Cypress has a unique feature called "Time-travel" that allows you to see the state of your application at any point in time during a test. Playwright does not have this feature
When choosing between Playwright and Cypress, you should consider the specific requirements of your project and the features you need.
If you need to test multiple browsers simultaneously, or mobile browsers, Playwright may be a better choice. If you need to debug your tests easily or need the "Time-travel" feature, Cypress may be a better choice
It's worth noting that both frameworks are actively developed and have a large community, so you can always get support and find solutions for any issues you may encounter
It's also a good idea to consult with a developer experienced with end-to-end testing and familiar with both frameworks, to help you choose the best tool for your needs
@@RaghavPal Thank you so much for your response. Sure , will work on your suggestions.
Hey when doing "testing: focus on playwright view" Visual studio is telling me "no test cases have been found in this workspace yet" i just updated to the latest version of node but that isnt working do you know what this could be due to ?
Michael
there are a few possible reasons why you might be getting the "No test cases have been found in this workspace yet" message in Visual Studio when you run the "testing: focus on playwright view" command.
* You may not have any Playwright tests in your workspace. To create a Playwright test, you need to create a new file with the .spec.ts extension and import the `@playwright/test` module
* The Playwright extension may not be installed or enabled in Visual Studio. To install the Playwright extension, open the Extensions view (Ctrl+Shift+X) and search for "Playwright Test for VSCode". Click the Install button to install the extension
* The Playwright configuration file may not be set up correctly. The Playwright configuration file is called playwright.config.js and it is located in the root of your workspace. The configuration file tells Playwright how to find and run your tests.
Here are some things you can check to troubleshoot the issue:
* Make sure you have at least one Playwright test in your workspace.
* Check if the Playwright extension is installed and enabled in Visual Studio.
* Open the playwright.config.js file and make sure it is set up correctly.
If you are still having trouble, you can try the following:
* Restart Visual Studio.
* Clear the Playwright cache. To do this, open the Command Palette (Ctrl+Shift+P) and type "Playwright: Clear Cache".
* Reinstall the Playwright extension.
I hope this helps
thank you for the series 🙏 I want to use playwright with python, do you have any content or suggestion?
Hi E K,
Not for now, You can still watch the 1st few tutorials and then can follow the Python steps from the official documentation. I will plan to do a session on this
Thankyou for starting this series on Playwright sir. Can you please answer below queries:
1. Which programming language will you be using in this series ?
2. Will you be covering Framework part as well in this series ?
3. How long will it take for all the videos of this series to be on your CZcams channel ? Just asking so that we can plan our learning accordingly.
Thankyou in advance. 😊
Hi Hitesh,
1. Which programming language will you be using in this series ?
I will start with JavaScript, but will also do other languages in future. In any case the playwright concepts and actions will remain same
2. Will you be covering Framework part as well in this series ? Yes
3. How long will it take for all the videos of this series to be on your CZcams channel ? Just asking so that we can plan our learning accordingly.
I am planning to add all videos within 2-3 weeks
Thankyou sir, this helps. 😊
@@RaghavPal Only with javascript or Typescript also?
I will do session with TypeScript too, in any case you can follow the current sessions too
Can you also talk about limitations of Playwright? And can we integrate BrowserStack with PlayWright ?
Sure, will have a session
sir can u guide which language should I learn to start career in QA ? PYTHON , JAVA OR ANY OTHER ? it will be very helpful
Can start with Java, Python
Hi, I want to know scope of playwright, is it important/ famous same as selenium.
Playwright has some awesome features and it will gain momentum soon, Not as popular as Selenium for now, as it is very new compared to Selenium
Hi, Raghav. Could you make a tutoring about playwright automation testing for the Electron application, please? Thank you! 🙂
I will plan Elena
Thanks!
Thanks a lot Deepthi
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. After writing the npm --version this message displays ok? or not?
Yes, it is okay if you see the message "npm WARN config global --global, --local are deprecated. Use --location=global instead." after you run npm --version
This message is simply informing you that the --global and --local options for npm are deprecated, and that you should use the --location=global option instead.
Hello, Raghav, When I try to type, the sentence "require('@playwright/test')", It shows this message, "File is a CommonJS module; it may be converted to an ES module.ts(80001)"
var require: NodeRequire
(id: string) => any (+3 overloads)".
What I should to do ?. Thank you!!!
Susel
For the issue with the "File is a CommonJS module; it may be converted to an ES module" error you're encountering when using `require('@playwright/test')`. This error arises because you're trying to import a CommonJS module (`@playwright/test`) using the `require` syntax, which is typically used for CommonJS modules, in an ES module (likely a TypeScript file).
Solutions:
There are two primary approaches to resolve this issue:
1. Import Syntax for ES Modules:
- Since you're likely working with an ES module (indicated by the `.ts` extension and the TypeScript error code `ts(80001)`), use the `import` syntax to import ES modules:
```typescript
import { test } from '@playwright/test';
```
This approach is the recommended way to import modules in modern JavaScript environments that support ES modules.
2. `require` with Interop Compatibility (Less Common):
- If you have a specific reason to use `require` (e.g., working with a mixed codebase of CommonJS and ES modules), you can leverage TypeScript's interop capability. However, this approach is generally not preferred as it can lead to compatibility issues:
```typescript
const { test } = require('@playwright/test').default; // Accessing the default export
```
Important Note: This approach might require additional configuration or type definitions depending on your project setup.
Additional Considerations:
- TypeScript Project Setup: Ensure your TypeScript project is configured to handle ES modules correctly. You might need to adjust your `tsconfig.json` file to set the `module` option to `esnext` or `commonjs`.
- Package Manager: Verify that you've installed `@playwright/test` using a package manager that supports ES modules, such as npm or yarn.
Sir Please create video on installation using Java and test cases run using java language
I will plan
At minute 23:40 there is an option to run the test (Testing: Focus on Playwright View) but if I type "playwright" or "testing" I can't see that option, did I forget to do something else? Thanks
Jorge
Check after getting this extension playwright.dev/docs/getting-started-vscode#installation
Hi, I want to learn automation for Salesforce, can you recommend what should I learn like playwright, provar or something else?
Pranali
here are some recommended tools for learning automation for Salesforce:
*1. Selenium with Salesforce Lightning Web Components (LWC):*
Selenium is a widely used open-source automation framework that supports various web browsers and programming languages. It's a popular choice for automating Salesforce, especially for legacy UI elements. To automate LWC components, you'll need to use Salesforce's Lightning Web Components Jest driver alongside Selenium.
*2. Cypress:*
Cypress is another popular automation framework that offers a modern and user-friendly approach. It provides a visual test builder, automatic DOM manipulation, and time travel debugging, making it easier to test complex UIs. Cypress is well-suited for automating Salesforce Lightning Experience and Aura applications.
*3. Playwright:*
Playwright is a newer automation framework developed by Microsoft. It offers cross-browser support, parallel execution, and advanced features like network interception and geolocation spoofing. Playwright is a powerful tool for automating Salesforce applications, especially when dealing with complex interactions and multiple browsers.
*4. Provar:*
Provar is a Salesforce-specific automation framework developed by Salesforce itself. It provides a declarative testing language tailored for Salesforce objects and processes. Provar is a good choice for automating Salesforce business processes and data-driven testing.
*5. Salesforce UI Test Automation Framework (UAT):*
UAT is a Salesforce-provided framework that offers a visual test builder, record-and-replay functionality, and integrations with Salesforce development tools. UAT is a good choice for beginners and those who prefer a visual test creation approach.
In addition to these tools, consider using Salesforce-specific features like Salesforce's Testing Service and Salesforce's Data Loader for data-driven testing.
Here's a summary of each tool's strengths:
*Selenium:* Mature and widely supported, good for legacy UI elements.
*Cypress:* Modern and user-friendly, good for Lightning Experience and Aura applications.
*Playwright:* Powerful and versatile, good for complex interactions and multiple browsers.
*Provar:* Salesforce-specific, good for business processes and data-driven testing.
*UAT:* Visual and easy to use, good for beginners and Salesforce development integrations.
The best tool for you will depend on your specific needs, experience level, and project requirements. Consider factors like:
* **Your programming language proficiency:** If you're familiar with JavaScript, Cypress or Playwright might be a good choice. If you prefer a declarative approach, Provar could be suitable.
* **Your project scope:** If you're automating legacy UI elements, Selenium might be a good fit. If you're mainly dealing with Lightning Experience or Aura applications, Cypress could be a better choice.
* **Your team's experience:** If you have beginners on your team, UAT could be a good starting point. If you have experienced automation engineers, Playwright could provide more flexibility and power.
Remember, learning automation takes practice and experimentation. Try out different tools, explore tutorials and documentation, and seek help from the community when needed.
Do you have Provar training videos? It would be really very very helpful if you can guide me to learn Provar@@RaghavPal
I will check and plan
Thank you so much, Requesting you to plan this asap as I have gone through your Playwright training sessions and they are very helpful for me, As a beginner you make it very easy to understand.
sir while installing using VS code extension why it as taken typescript directly not asked for js or ts? also we have not selected options for github actions also
You can still continue, the extension will work even if you are using JS as shown in the video and it's okay for not having github actions for now, It creates a github yaml file, that you can add separately only when you have to do github workflow ci cd, else not needed
@@RaghavPal thanks a lot sir.
Hi Raghav, I have installed Ruby and Node JS for my purposes but after successfully installing playwright I do not seem to have the playwright.config.js file in root folder, or anywhere else. Should it be created automatically on install? Any idea where it could be or how to find it? Thanks in advance.
Here's how you can create the config file:
1. Manual Creation:
- If the `playwright.config.js` file is not automatically generated during installation, you can create it manually in your project's root folder.
- Open your text editor or IDE and create a new file named `playwright.config.js`.
- Inside this file, you'll define your test configuration, including options like test directories, browsers, reporters, and more.
2. Basic Configuration Example:
- Below is a basic example of a `playwright.config.js` file. You can customize it according to your project's needs:
```javascript
const { devices } = require('@playwright/test');
module.exports = {
// Look for test files in the "tests" directory, relative to this configuration file.
testDir: 'tests',
fullyParallel: true, // Enable parallel execution of tests
forbidOnly: !!process.env.CI, // Fail CI builds if test.only is accidentally left in the code
retries: process.env.CI ? 2 : 0, // Retry failed tests (useful for CI)
reporter: 'html', // Choose a test reporter (e.g., 'html', 'dot', 'list')
use: {
baseURL: '127.0.0.1:3000', // Set your base URL
trace: 'on-first-retry', // Collect traces when retrying failed tests
},
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'], // Use Chrome as the browser
},
},
// Add other browser configurations as needed
],
webServer: {
command: 'npm run start', // Command to start your web server
url: '127.0.0.1:3000', // URL where your app is hosted
reuseExistingServer: !process.env.CI, // Reuse existing server during local development
},
};
```
- Adjust the settings in this configuration file based on your project's specifics.
3. Folder Structure:
- Ensure that your test files (usually with `.spec.js` or `.spec.ts` extensions) are located in subfolders within the specified `testDir`.
- For example, if your tests are in a folder called `smokeTests`, make sure the structure is like this:
```
├── playwright.config.js
└── tests
└── smokeTests
├── test1.spec.js
├── test2.spec.js
└── ...
```
4. Run Tests:
- Once you've created the configuration file, you can run your tests using the following command:
```
npx playwright test
```
Remember to adjust the configuration according to your project's needs, and you should be all set! If you encounter any issues, feel free to ask for further assistance.
..
@@RaghavPal Hi Raghav, thanks for the reply and the solution. Will follow instructions. Thank you.
is it required to install node.js if i am setting up playwright for python setup ?
which IDE is best recommended ?
For python you can use pip
You can use Pycharm , VS Code
@@RaghavPal thanks for making clear...i could not find anywhere where they have described pre-requisite for playwright setup for different programming languages - it was helpful - so python playwright has no dependency on node.js (but to make clear - the whole playwright tool works based on node.js protocols right ?)
you can find documentation on Playwright with Python here - playwright.dev/python/docs/intro
do u have playwright series with c#?
Not yet Arpita
Hi Raghav I was a manual functional tester with 7 years experience and 6 years of break. I got an opportunity to work in a small sample project s a Part of recruitment process. UI testing using playwright. I am newly starting to learn automation and playwright and hoping to complete the project. I reached at your video. If i can get any one-to-one help from your team as I learn and work that will be great help. Please respond.
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
Legend
Thanks for watching
I am not well versed in programming, can I still do automation or will I have to learn coding first?
Yes, you can, just learn as you go and if you can learn some very basics of the programming language you are using in your project.
@@RaghavPal My company uses Python with Selenium. The problem is, I have no opportunity to learn it on the job. We have 1 or 2 automation testers that do everything. 1 in the US. 1 in India. I have to learn Python and Selenium on my own.
You can take out some time daily and learn with online lectures.. Can find my lectures here - automationstepbystep.com/
Sir can i start learning play write even if don't know node js and js. Is it mandatory?
Yes
@@RaghavPal Thanks a lot sir, I will continue watching playwright videos. Thanks a lot for sharing your knowledge sir
Hii , hope you are doing well .I need a help from you
Right now i have 1.5 years of testing experience in selenium Java and manual testing.
I would like to learn any AI powered automation testing tools
Could you please suggest any
Nishanth
Sure, I can help you with that. Here are some AI-powered automation testing tools that you can learn:
*Testim:* Testim is an AI-powered test automation platform that can automate web, mobile, and API tests. It uses machine learning to identify and automate repetitive tasks, and it can also generate test cases automatically.
*Applitools:* Applitools is an AI-powered visual testing tool that can automate the testing of UI elements. It uses machine learning to identify and compare UI elements, and it can also generate test cases automatically.
*Katalon Studio:* Katalon Studio is an AI-powered automation testing platform that can automate web, mobile, and API tests. It uses machine learning to identify and automate repetitive tasks, and it can also generate test cases automatically.
*Tricentis Tosca:* Tricentis Tosca is an AI-powered test automation platform that can automate web, mobile, and API tests. It uses machine learning to identify and automate repetitive tasks, and it can also generate test cases automatically.
*Testsigma:* Testsigma is an AI-powered test automation platform that can automate web, mobile, and API tests. It uses machine learning to identify and automate repetitive tasks, and it can also generate test cases automatically.
These are just a few of the many AI-powered automation testing tools that are available. The best tool for you will depend on your specific needs and requirements.
If you are new to AI-powered automation testing, I recommend starting with a tool that is easy to learn and use. Testsigma is a good option for beginners because it has a drag-and-drop interface and it does not require any coding experience.
Once you have learned the basics of AI-powered automation testing, you can then move on to more complex tools.
I hope this helps!
@@RaghavPal Thank you so much sir
@@RaghavPal Sir what about test craft ? is it good for future
Can learn it
Hey Raghav "npx playwright test .\tests\example.spec.js" says "No tests found". Can you pls help here?
Santhosh
Try to replace backslashes \ with forward slashes / in the path, Also check the path is correct by writing few letters of the folder/file name and press tab to auto complete
Hi Raghav, I am getting some certificate error for browser while running npm init install in my office laptop. Due to which I am unable to run my script on any browser.
Could you please suggest how to handle this.
Hi Ankit
here are some suggestions on how to handle the certificate error for browser while running npm init install in your office laptop:
1. Check the date and time on your laptop. The certificate error may be caused by the date and time on your laptop being incorrect. To check the date and time, open the Control Panel and go to the "Date and Time" section. Make sure that the date and time are correct.
2. Add the website's certificate to your laptop's trusted certificates store. The certificate error may be caused by the website's certificate not being trusted by your laptop. To add the website's certificate to your trusted certificates store, open the Control Panel and go to the "Internet Options" section. Click on the "Content" tab and then click on the "Certificates" button. In the "Trusted Root Certification Authorities" store, click on the "Import" button and then select the website's certificate file.
3. Use a different browser. The certificate error may be specific to the browser that you are using. To try to resolve the issue, try using a different browser, such as Chrome or Firefox.
4. Contact your IT department. If you are still unable to resolve the issue, you may need to contact your IT department for assistance. They may be able to help you troubleshoot the issue and resolve the certificate error.
Here are some additional things to keep in mind:
* The certificate error may be caused by other factors, such as a problem with your internet connection.
* It is always a good idea to check the documentation for the website that you are trying to access to see if they have any specific instructions on how to resolve certificate errors.
*
I hope this helps
Can we automate web applications integrated with ArcGis maps tool?
Hi Raja, I will need to check on this. Have not worked on it yet
I just installed all the latest software and do not have a playwright.yml file, the timeout code is not in the config file. I'm only at 16:23 into the video. Hope this will not be an issue following more of this playwright series of videos :(
Let's clarify how to set timeouts for your Playwright tests:
1. Test Timeout:
- By default, each test in Playwright has a timeout of 30 seconds.
- This timeout includes the time spent executing the test function, as well as any fixtures, `beforeEach`, and `afterEach` hooks.
- If a test exceeds this timeout, it will produce an error.
- You can adjust the test timeout by modifying the configuration.
2. Global Timeout:
- Playwright Test also supports a global timeout for the entire test run.
- This prevents excessive resource usage when something goes wrong.
- There is no default global timeout, but you can set a reasonable one in the configuration.
- For example, you can set a global timeout of one hour (3600 seconds) in your configuration.
3. Configuration Example:
- To configure timeouts, create or modify your `playwright.config.ts` file (or equivalent if using plain JavaScript).
- Here's an example of setting both test and global timeouts:
```typescript
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
timeout: 5 * 60 * 1000, // Set test timeout to 5 minutes
globalTimeout: 60 * 60 * 1000, // Set global timeout to 1 hour
});
```
4. Usage in Tests:
- You can also adjust timeouts for individual tests, hooks, or fixtures.
- For example:
- To set a longer timeout for a specific test: `test.setTimeout(120000);`
- To extend the timeout for all tests running in a `beforeEach` hook: `testInfo.setTimeout(testInfo.timeout + 30000);`
Remember to customize the timeouts according to your specific needs.
Hi Raghav, I am starting your videos on Playwright. I have Cypress background, I guess it will be easy for me to catch playwright sessions. #raghav
yes, will be easy for you. All the best Atul
Sir, Can you please add video for installation and running tests using python also.
I will plan
@ragav do u have any course playwright with c#
not yet Aswathy
@@RaghavPal waiting 🤩
Hi Sir, need your help to run playwright javascript automation scripts in microsoft edge brower how to run scripts in msedge sir?
Sanjeev
To run Playwright JavaScript automation scripts in Microsoft Edge browser, you can follow these steps:
*1. Install Playwright and Microsoft Edge browser:*
Ensure you have Node.js installed on your system, as Playwright requires Node.js version 12 or above. You can check the Node.js version using the command `node -v` in your terminal.
Next, install Playwright using the following command in your terminal:
```bash
npm install playwright
```
This will install Playwright globally on your system.
To install the Microsoft Edge browser, download the latest version from the official Microsoft Edge website ([www.microsoft.com/en-us/edge/download?form=MA13FJ](www.microsoft.com/en-us/edge/download?form=MA13FJ)). Install the browser according to the instructions provided on the website.
*2. Create a Playwright script:*
Create a JavaScript file (.js) to write your Playwright automation script. This script will contain the code to automate tasks in Microsoft Edge browser.
*3. Configure Playwright to use Microsoft Edge:*
In your Playwright script, you need to configure Playwright to use Microsoft Edge as the browser for automation. Here's an example of how to do this:
```javascript
const playwright = require('playwright');
(async () => {
const browser = await playwright.chromium.launch({ headless: false }); // Set headless to true for headless execution
const page = await browser.newPage();
await page.goto('www.example.com'); // Replace with the target URL
// Add your automation logic here
await browser.close();
})();
```
In this example, Playwright is configured to use the Chromium browser, which is the underlying engine of Microsoft Edge. The `headless` option is set to false, which means the browser will be launched in a visible window.
*4. Run the Playwright script:*
To execute the Playwright script, save it as a JavaScript file and run the following command in your terminal:
```bash
node script.js
```
Replace `script.js` with the actual filename of your Playwright script.
This will launch the Microsoft Edge browser and execute the automation tasks defined in your script.
Hi Raghav,
Could you please make a video of playwright with Java.
I will do Sneha
Hello
I am getting this error , would you like to guide me about this
npm init playwright@latest
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 new-project
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Hi Noor
The error message that you are getting is telling you that the `npm` command is not recognized. This means that the `npm` command is not installed on your system
To install `npm`, you will need to download and install the Node.js package manager. You can download Node.js from the Node.js website: nodejs.org/en/download/.
Once you have installed Node.js, you will be able to use the `npm` command. To do this, you will need to open a command prompt and navigate to the directory where you want to create your project. Then, you can run the following command:
```
npm init playwright@latest new-project
```
This will create a new project with the latest version of Playwright installed.
If you are still getting the error message after installing Node.js, you may need to add the `npm` command to your system path. You can do this by editing your `PATH` environment variable.
To edit your `PATH` environment variable, you will need to open the `Environment Variables` dialog box. You can do this by opening the Control Panel and searching for "Environment Variables".
Once you have opened the `Environment Variables` dialog box, you will need to find the `PATH` variable. Then, you will need to add the path to the `npm` executable to the `PATH` variable.
The path to the `npm` executable is typically `C:\Program Files
odejs
pm.cmd`. However, the path may be different on your system.
Once you have added the path to the `npm` executable to the `PATH` variable, you should be able to run the `npm` command without any errors.
I hope this helps
Wow, thank you!
Most welcome Viktor
I am good in python , so can i use pycharm as IDE for playwrite
Kalpana
While PyCharm's built-in support for Playwright is limited, here are some approaches you can combine to enhance your workflow:
1. Install Required Plugins:
- Maestro:
- This plugin integrates Playwright under the IntelliJ IDEA testing framework, providing features like running and debugging tests, viewing test results, and generating locators.
- Install it from the JetBrains plugin marketplace.
- Playwright for WebStorm:
- While designed for WebStorm, this plugin also works in PyCharm and adds basic Playwright project creation, file type support, and code completion.
- Install it from the JetBrains plugin marketplace.
2. Enable Experimental Web Support:
- Go to File > Settings > Languages & Frameworks > Web Technologies.
- Select "Enable JavaScript and Node.js support".
- This allows basic code completion and syntax highlighting for JavaScript/TypeScript files.
3. Create a Basic Playwright Project (If Needed):
- While PyCharm isn't tailored for Playwright projects, you can use the Maestro plugin's project creation wizard as a starting point.
- This might not provide all the bells and whistles of a dedicated Playwright IDE, but it can create a workable structure.
4. Leverage Other Python Tools:
- PyCharm's debugging capabilities excel in Python. Use `pdb` or print statements for JavaScript debugging when necessary.
- Consider external testing libraries like `pytest` or `unittest` for writing Python-based test suites that interact with Playwright.
5. Explore Alternatives:
- If extensive Playwright support is vital, consider other IDEs like WebStorm (from the same JetBrains family) or VS Code with dedicated Playwright extensions.
Remember:
- PyCharm primarily serves as a Python IDE, and its support for Playwright is not officially documented or actively maintained. You might encounter limitations or need workarounds.
Could you please create a playwright series with c#
I will plan
I cannot find the playwright view option once i search with command + shift + p could you advice please
Asmaa
Playwright doesn't have a view option accessible directly through the Command + Shift + P shortcut since it doesn't have a built-in UI like web browsers. However, depending on how you're using Playwright, there are different ways to view the results of your tests:
1. Browser Debugger:
* If you're running Playwright tests in a browser (like Chromium, Firefox, WebKit), you can use the browser's developer tools to inspect the page, network requests, console logs, and other information. Each browser has its own way to access the developer tools, usually by pressing F12 or similar keys.
2. Trace Viewer:
* Playwright has a built-in Trace Viewer that allows you to visually explore recorded traces of your tests. You can record traces with the `trace: 'on'` option in your configuration and then open the Trace Viewer with `npx playwright view trace.json`. This allows you to step through each action taken by your test and see snapshots of the browser state at different points.
3. Console Output:
* Playwright logs test results and actions to the console by default. You can see this output in your terminal where you ran the playwright test command.
4. Reporting Tools:
* Several third-party reporting tools integrate with Playwright, providing visual dashboards and reports for test results. Popular options include Playwright Report, Allure Report, and QMetry. These tools will provide different ways to view test results depending on their specific features.
5. IDE Extensions:
* Some IDEs have extensions that provide specific integration with Playwright, offering debugging and visualization features within the IDE. For example, the VS Code Playwright extension offers debugging and trace viewing capabilities.
Hi sir 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 path was include, verify that the path again correctly
npm init playwright@latest
Category info : objectnot found (npm:string) []
Fully qualified errorid : commandnot found exception
Here are the steps to troubleshoot and get npm working correctly:
1. Install Node.js:
- npm comes bundled with Node.js, so if you don't have Node.js installed, download and install it from the official website: [nodejs.org/](nodejs.org/)
- Follow the installation instructions for your operating system.
2. Check Environment Variables:
- Windows:
- Open System Properties > Advanced system settings > Environment Variables.
- Under "System variables", find "Path" and click "Edit".
- Ensure the path to your Node.js installation's "bin" directory is included (e.g., `C:\Program Files
odejs\bin`).
- If not, add it and click "OK".
- macOS/Linux:
- Open a terminal and run `echo $PATH` to view your PATH environment variable.
- If the Node.js "bin" directory is missing, add it to your PATH using a text editor like nano or vim.
3. Verify Installation:
- Open a new command prompt or terminal window.
- Type `npm -v` and press Enter.
- If npm is installed correctly, you'll see its version number.
4. Address Conflicts:
- If you have multiple Node.js versions, ensure you're using the correct one that has npm installed.
- Use tools like `nvm` (Node Version Manager) to manage multiple versions effectively.
5. Reinstall npm (if necessary):
- If npm is still not working, reinstall it using:
- `npm install -g npm`
6. Run the Command:
- Once npm is working, try running the command again:
- `npm init playwright@latest`
Additional Tips:
- Check for Typos: Double-check the command for any typos.
- Use Correct Command Prompt: Use the command prompt or terminal associated with the Node.js installation.
- Run as Administrator: If necessary, run the command prompt or terminal as an administrator.
hey any chance you can make a series for dotnet/ C# please
I will plan on this Carole
@@RaghavPal Thanks 😊 Am really looking forward to that.
Hi after giving the comment I am gettingan error i.e. npm is not recognised-as the name of a cmdlet, function, script file or operable program.
May I know the reason for the above error?
Hi Kajal, this can help - www.webdevtutor.net/error-solutions/npm-the-term-npm-is-not-recognized-as-the-name-of-a-cmdlet-function-script-file-or-operable-program
Hi Raghav..I'm facing few difficulties to luanch the browser. Is there any way, we can coonect for sometime (It will be pay) please . It's urgent
Kanchan
I may not be able to do a live call. However I check all my comments and you can expect a reply within 24 hrs. Please let me know your issue here with all steps and details
Hello Raghav. Why Javascript is used for Playwright ?
Vinay
Playwright can use JavaScript, Python and Java too
JavaScript provides following:
**1. Versatility and Accessibility:** JavaScript is a ubiquitous programming language widely used for web development, making it a natural choice for Playwright. This allows developers familiar with JavaScript to quickly adapt to Playwright without learning a new language. Its vast community and readily available resources further enhance its accessibility.
**2. Client-Side Automation:** JavaScript is the dominant language used on the client-side of web applications, enabling Playwright to directly interact with the browser's DOM and manipulate elements. This allows for precise and granular control over the application's behavior during automation.
**3. Scripting and Automation Capabilities:** JavaScript is inherently adept at scripting and automation tasks, making it ideal for writing test scripts and automating complex workflows within Playwright. Its flexibility allows for dynamic and adaptive automation scenarios that can adjust to different conditions.
**4. Integration with Browsers:** JavaScript is natively supported by all major web browsers, ensuring seamless integration between Playwright and the browser environment. This eliminates the need for additional language interpreters or runtime environments, simplifying development and execution.
**5. Performance and Efficiency:** JavaScript engines are highly optimized for performance, allowing Playwright scripts to execute rapidly and efficiently. This is crucial for automation scenarios that require high responsiveness and minimal overhead.
**6. Ecosystem and Community:** JavaScript boasts a vast and vibrant ecosystem of libraries, frameworks, and tools that enhance Playwright functionality. This allows developers to leverage existing tools and libraries to extend Playwright's capabilities and tackle various automation challenges.
**7. Future-Proofing:** JavaScript remains a dominant force in web development, with constant updates and improvements. This ensures that Playwright will continue to be relevant and compatible with future web technologies and advancements.
While other languages like Python and Java can also be used with Playwright, JavaScript's unique combination of versatility, client-side accessibility, automation capabilities, and integration with browsers makes it the preferred choice for most Playwright developers.
@@RaghavPal - Thank you for Update. Now i got to know about selection of JS than other lang.
iam unable to access, run, execute the visual studio by using of playwright node js command.(im unable to install the playwright)
Pavan
I'm ready to assist you with troubleshooting the Playwright installation and Visual Studio integration issues. To provide the most effective guidance, please share the following information:
1. Specific Error Messages:
- When you attempt to install Playwright or run Node.js commands within Visual Studio, what exact error messages do you encounter? Please provide the full text of any errors or warnings.
2. Environment Details:
- Operating System: Which version of Windows are you using?
- Visual Studio Version: Which specific edition of Visual Studio are you using (e.g., Visual Studio 2022 Community, Visual Studio Code)?
- Node.js Version: What version of Node.js is installed on your system? You can check by running `node -v` in a terminal.
3. Installation Steps:
- Describe the exact steps you've taken to install Playwright. Did you use npm or yarn? Did you encounter any errors during the installation process?
4. Integration Methods:
- How are you attempting to use Playwright within Visual Studio? Are you using the Test Explorer, a custom task runner, or another method?
5. Code Snippets:
- If possible, share relevant code snippets from your Node.js scripts or Visual Studio project files that demonstrate how you're trying to integrate Playwright.
Once I have this information, I can provide more tailored troubleshooting steps. However, here are some general potential causes and solutions to consider:
Common Issues:
- Incorrect Node.js Path: Ensure Visual Studio is configured to use the correct Node.js installation where Playwright is installed. Check project settings and environment variables.
- Missing Dependencies: Verify that all required dependencies are installed using `npm install` or `yarn install` within your project directory.
- Test Explorer Configuration: If using Visual Studio's Test Explorer, ensure it's configured to recognize Playwright tests (usually by installing an appropriate extension or adding a configuration file).
- Permissions: Confirm that your user account has permissions to access the necessary files and folders.
- Conflicting Software: Temporarily disable antivirus or firewall software to rule out interference.
I am not able to see the tests folder in test explorer. Please help
I will check, May be some changes in new version
are playwright javascipt and typescript are same ? cos i could not see anywhere the difference
TypeScript is like a wrapper over JavaScript with some more features and functionality for Types, when you run TypeScript it transpiles down to JavaScript
@@RaghavPal Thanks a lot for your reply - but how to start with javascript+playwright - does it includes the same step explained below and save the file extension as filename.js and execute ?
In the sessions, I have used JavaScript
Hello sir.. I want to learn testing and make a carrier in it.. plz guide me where and how to start.. plz reply
What is your background and exp
I done my cs in 2014 but now I completely disconnected with technical terms. I am a homemaker right now n want a new start
ok, so you can plan how much time can you take out daily, if you like to start with automation, start with UI Automation or API automation, create a plan, Can find the sections here - automationstepbystep.com/
Ok sir.. thnku for replying
for ndm i am getting this messege
(npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead)
this can help stackoverflow.com/questions/72401421/message-npm-warn-config-global-global-local-are-deprecated-use-loc
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
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
I am getting this error please help
Hi Mr Seven
The error message suggests that the command 'npm' is not recognized by your system. This issue typically occurs when Node.js and npm (Node Package Manager) are not properly installed or not added to your system's PATH environment variable.
To resolve this issue, you can follow these steps:
1. Install Node.js: Ensure that you have Node.js installed on your system. You can download the latest version of Node.js from the official website (nodejs.org) and follow the installation instructions specific to your operating system.
2. Add Node.js and npm to PATH: During the installation of Node.js, there is an option to add Node.js and npm to your system's PATH environment variable. Make sure this option is selected, as it allows you to access Node.js and npm from any location in the command prompt.
3. Verify Installation: After installing Node.js, open a new command prompt window and run the following commands to verify the installation:
```
node -v
npm -v
```
These commands should display the versions of Node.js and npm installed on your system. If you still encounter an error, make sure to close and reopen any open command prompt windows to apply the changes to the PATH environment variable.
By following these steps, you should be able to resolve the 'npm' command not recognized error and successfully use npm for managing your packages and dependencies.
Hi at this point czcams.com/video/IB2P1FBXjcQ/video.html you show the installation with Javascript. After I have done this and I have created test cases with JavaScript they asked me to switch to TypeScript. So do I need to reinstall Playwright with Typescript? Can I use the Framework with two different languages configs? Is there any tool to migrate my javascript test cases to typescript?
Aggie
not sure why its asking you to switch to TypeScript, I hope there is support for JavaScript in your IDE, Can check by separately creating a javascript file and running a basic Hello world program
Can also follow the official documentation of Playwright and try again
@@RaghavPal Sorry I was not clear. The company I work asked me to switch and use typescript instead. With the installation itself I had no problem.
ok, so what issues are you facing now
hi , i had an error : " Cannot find module 'C:\Users\velyh\AppData\Roaming
pm
ode_modules
pm\bin
pm-cli.js'", reinstall already node js
Dima
The error message you're encountering, "Cannot find module 'C:\Users\velyh\AppData\Roaming
pm
ode_modules
pm\bin
pm-cli.js'," indicates that the system cannot locate the specified module. Let's troubleshoot this issue:
1. Check Node.js Installation:
- Confirm that Node.js is installed correctly on your system.
- Open a command prompt and run:
```
node -v
```
- If it doesn't display the version, reinstall Node.js from the official website.
2. Check npm Installation:
- Verify that npm (Node Package Manager) is installed alongside Node.js.
- Run the following command to check npm's version:
```
npm -v
```
- If npm is missing, reinstall Node.js to ensure npm is included.
3. Update npm:
- Even if npm is installed, it's a good practice to update it to the latest version:
```
npm install -g npm
```
4. Check npm Global Modules Path:
- The error message suggests that npm is looking for the `npm-cli.js` module in the global modules path.
- Ensure that the global npm modules path is correctly set. You can check it using:
```
npm config get prefix
```
- It should point to a valid directory where npm global modules are installed.
5. Reinstall npm:
- If the global modules path is incorrect or npm is still not working, try reinstalling npm:
```
npm install -g npm
```
6. Clear npm Cache:
- Sometimes cached data can cause issues. Clear the npm cache:
```
npm cache clean --force
```
7. Check PATH Environment Variable:
- Confirm that the directory containing npm binaries is included in your system's PATH environment variable.
- If not, add it manually or reinstall Node.js to set it up correctly.
8. Run npm Repair:
- Run the following command to repair npm:
```
npm install -g npm@latest
```
9. Restart Command Prompt:
- After making any changes, close and reopen the command prompt to apply them.
10. Try a Different Terminal:
- If you're using a specific terminal (e.g., Git Bash), try using the default Windows Command Prompt or PowerShell.
Remember to replace `C:\Users\velyh\AppData\Roaming
pm
ode_modules
pm\bin
pm-cli.js` with the actual path where npm is installed.
..
Hi, I am getting this error when trying to installa the playwright.
PS C:\Users\zaidih\Desktop\Playwright> npm init playwright@latest --yes -- --quiet --browser=chromium --browser=firefox --browser=webkit --gha
npm ERR! code ERR_UNESCAPED_CHARACTERS
npm ERR! Request path contains unescaped characters
Can you please help me in resolving this error?
Hi Hasan
The error message you are getting is caused by the fact that there are unescaped characters in the path to the Playwright binary. This can happen if you are using a path that contains spaces or other special characters.
To resolve this error, you need to escape the characters in the path. You can do this by using the `%` character before each special character. For example, if the path to the Playwright binary is `C:\Program Files\Playwright`, you would need to escape the spaces by using the following path:
```
C:%2FProgram%20Files%2FPlaywright
```
Once you have escaped the characters in the path, you should be able to install Playwright without any errors.
Here are some additional details:
* The `ERR_UNESCAPED_CHARACTERS` error is a common error that can occur when you are installing a binary that contains unescaped characters in the path.
* You can use the `%` character to escape special characters in a path. For example, the `%20` character represents a space.
* You can use the `npm install --verbose` command to see the full error message. This will help you to identify the specific characters that are causing the error.
I hope this helps
Hi Raghav, I've installed Playwright for JavaScript. Now, I want to use TypeScript. How can I switch from JavaScript to TypeScript?
Rajat
Can try the following steps:
1. Install TypeScript:
- First, install TypeScript as a development dependency in your project:
```
npm install --save-dev typescript
```
2. Create a tsconfig.json File:
- TypeScript uses a configuration file called `tsconfig.json` to manage project options.
- Create a basic `tsconfig.json` file in your project root (or customize it further as needed):
```json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src//*"]
}
```
- Adjust the options according to your project requirements.
3. Rename Your JavaScript Files to TypeScript (.ts):
- Rename your existing `.js` files to `.ts`.
- TypeScript will infer types based on your code.
4. Type Annotations and Definitions:
- Add type annotations to your variables, function parameters, and return values.
- Use TypeScript's built-in types or create custom ones.
- Install type definitions for external libraries using `@types/package-name`.
5. Compile TypeScript to JavaScript:
- Run the TypeScript compiler to transpile your `.ts` files to `.js`:
```
npx tsc
```
- This will generate the compiled JavaScript files in the specified `outDir`.
6. Update Your Imports:
- Update your import statements to use `.ts` extensions:
```typescript
// Before
const { chromium } = require('playwright');
// After
import { chromium } from 'playwright';
```
7. Run Your Tests:
- Run your Playwright tests as usual:
```
npx playwright test
```
8. Enjoy TypeScript Benefits:
- TypeScript will catch type-related errors during development, improving code quality.
- You'll benefit from better autocompletion and tooling support.
..
@@RaghavPal Thanks
Sir, I am unable to install the playwright in Visual code when I enter the npm init playwright@latest and enter then I get this error The 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. I don't know how to resolve this. Please help me on this.
Hi Rajesh
The error message "The 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program" means that the npm command is not found in your system's PATH environment variable. This means that you need to add the npm directory to your PATH variable.
To do this, open the Environment Variables dialog box by typing `env` in the Windows search bar. Then, click on the **Environment Variables** button.
In the Environment Variables dialog box, select the **Path** variable and click on the **Edit** button.
In the Edit environment variable dialog box, add the directory where the npm binary is located to the **Path** variable. The default location of the npm binary is `C:\Program Files
odejs
pm`.
Once you have added the npm directory to your PATH variable, you should be able to run the `npm init playwright@latest` command without any errors.
Here are the steps in detail:
1. Open the Environment Variables dialog box.
2. Select the **Path** variable and click on the **Edit** button.
3. In the Edit environment variable dialog box, add the directory where the npm binary is located to the **Path** variable.
4. Click on the **OK** button.
5. Try running the `npm init playwright@latest` command again.
If you are still getting the error message, then you may need to restart your computer.
I hope this helps
@@RaghavPal Awesome sir thank you so much for your detailed information. I really appreciate your way of response 🙏. I'll try and reply once I get resolved this issue. Then I need one guide from you that now I am looking to shift my job since I'm working with the current company past 3.7 years in the same project as manual test engineer. Before joining in this company I was working manual cum automation engineer like selenium java and had certified in RPA Uipath developer. And Appium mobile automation.
Additionaly Now I got accelq certified engineer but I'm not interested in accelq automation.
I'm in intrested with selenium java and RPA Uipath. Now I lost my knowledge on selenium java and Appium Uipath tools because in my current company I didn't get chance to work with any automation tools. Due to this I'm in frustrated now and struggling to recall my all automation stuffs I'm 33 years old.
So Sir can you please guide me what to do now how can I gather all my automation stuffs back to jump into good company with high package.
Recently I reasearched about Javascript playwright automation which is becoming trending in current market but here I want suggestions from you like shall I recall my selenium java stuffs to try new job or learn the JS playwright and try the job according to it so which one is better for me sir? I awaiting for your worthful reply.
Rajesh
Here are some things you can do to get back into automation testing:
* **Recall your Selenium Java and Appium skills.** This is the foundation of your automation skills, so it's important to make sure you have a good understanding of them. You can do this by reviewing your old code, taking online courses, or reading books
* **Learn about JavaScript Playwright.** This is a new automation tool that is gaining popularity. It's worth learning about if you want to stay ahead of the curve. You can learn about Playwright by reading the documentation, taking online courses, or watching tutorials
* **Update your resume and start applying for jobs.** Once you have refreshed your skills, it's time to start looking for a new job. Make sure your resume highlights your automation skills and experience
* **Network with people in the automation testing community.** This is a great way to learn about new opportunities and get your foot in the door. You can network by attending conferences, joining online forums, or connecting with people on LinkedIn.
It's hard to say which one is better for you, as it depends on your personal preferences and the specific jobs you are applying for. However, both Selenium Java and Playwright are in high demand, so you should be able to find a job with either one.
Here are some additional tips for getting back into automation testing:
* **Don't be afraid to start small.** If you're feeling rusty, start by automating simple tasks. This will help you get back into the swing of things and build your confidence.
* **Be patient.** It takes time to learn new skills and get back into the swing of things. Don't get discouraged if you don't find a job right away. Keep practicing and networking, and eventually you will find the right opportunity.
I hope this helps
@@RaghavPal wow nice 👍🙂 my heartfully thanks for your reply sir. Definitely I will beging to recall my automation stuffs as your guide. Really your suggestiona will make me to step up 😊
when I enter npm init playwright@latest it only create package.json file, why is that? 😢
can someone help?
Hi Ummu
When you run the command `npm init playwright@latest`, it initializes a new Node.js project with Playwright as a dependency. The command `npm init` is used to create a new `package.json` file, which is a configuration file for your Node.js project.
The `package.json` file contains information about your project, such as its name, version, dependencies, and scripts. It is an essential file in Node.js projects and is used to manage project dependencies, scripts, and other project-specific configurations.
Running `npm init playwright@latest` creates the `package.json` file and adds Playwright as a dependency in the `dependencies` section of the file. The Playwright dependency is automatically added because you specified `playwright@latest` in the command.
After running the command, you can check the contents of the `package.json` file to see that Playwright has been added as a dependency. You can also install the Playwright package by running `npm install`, which will fetch and install the specified dependencies (including Playwright) based on the `package.json` file.
In summary, the `npm init playwright@latest` command is primarily used to initialize a new Node.js project with Playwright as a dependency, and the creation of the `package.json` file is an expected outcome of this command.
Hi Raghav, could you please please please upload playwright with c#
I will plan on this Prashanthi
@@RaghavPal Thank you. Hope you upload soon..
Hi Raghav, Could you share me the link Playwright with Python.?
Vijay
I am yet to create tutorials on Playwright with Python. You can check the official documentation here - playwright.dev/python/docs/intro
its possible with poetry?
Josh
will need to know specific things you want to try and check
@@RaghavPal with python try to install like “poetry add playwright install with-dep “ something like that
not sure on this
why does it show "Happy Hacking" after installation of extension
Sheetal
The message "Happy Hacking!" appearing after installing a Playwright extension is a friendly welcome message displayed by the Playwright team. It's a way to acknowledge your extension installation and encourage you to start using Playwright for your automation needs.
There's no specific reason for the "Happy Hacking!" message beyond being a fun and positive way to welcome users to the Playwright community. It's a small gesture that shows the Playwright team is passionate about their project and wants to create a positive user experience.
While the message itself doesn't have any functional purpose, it can be a nice reminder to start exploring the capabilities of Playwright and unleash your automation potential. So, embrace the "Happy Hacking!" spirit and embark on your journey of automating tasks with Playwright
How to write script for login by using otp?
Here's an example Playwright script for logging in using OTP (One Time Password):
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
// Navigate to login page
const page = await context.newPage();
await page.goto('example.com/login');
// Enter phone number and submit
await page.fill('#phone-input', '1234567890');
await page.click('#submit-button');
// Wait for OTP input field to appear
await page.waitForSelector('#otp-input');
// Get OTP code via SMS or other means
const otpCode = getOTPCodeSomehow();
// Enter OTP and submit
await page.fill('#otp-input', otpCode);
await page.click('#submit-button');
// Wait for login success or failure message
await page.waitForSelector('#login-message');
// Check if login was successful
const loginMessage = await page.innerText('#login-message');
if (loginMessage.includes('Success')) {
console.log('Login successful!');
} else {
console.log('Login failed :(');
}
await browser.close();
})();
This script navigates to a login page, enters a phone number, waits for an OTP input field to appear, retrieves the OTP code, enters the OTP code, and checks for a login success message. You will need to modify the script to fit your specific use case, including selecting the correct HTML elements for inputting the phone number, OTP code, and submitting the form.
@@RaghavPal Thanks sir
Is the playwright open source?
Yes, Playwright is an open source project developed and maintained by Microsoft. It is available under the Apache 2.0 license, which allows users to freely use, modify, and distribute the software
I followed same steps for installing but i am getting some errors
Will need to see the errors and logs
Frustrations showing at 06:27 "go to hell" 😆
ha ha .. not really
Is it C# ?
no
@@RaghavPal I think its a huge need C# + Playwright frontEnd testing represention , r you planing to publish ?
I will plan
I don't think that the question "Command to check Playwright version" in the quiz has correct answer.
Available options:
1. npm playwright -v
2. npx playwright version
3. Both
4. None
The answer "npm playwright -v" marked as correct, but in fact it will show npm version, not playwright version and is equal to "npm -v" command. So the correct answer should be "None".
P.S: "npx playwright --version" this is command that will show playwright version
You're absolutely correct, and I appreciate your keen observation. The command "npm playwright -v" would indeed show the npm version, not the Playwright version.
The correct approach to check the Playwright version would be using the "npx playwright --version" command. Therefore, the correct answer should be "None" in the given options.
Sir while i am installing playwright i am getting error
Satish
Let me know the error
@@RaghavPal it's resolved thanks for your reply ☺
my score is 4/5
Great Anto
thank full. I learn everyday and take quiz too@@RaghavPal
Best wishes...
Getting the below error npm ERR! code 1
npm ERR! path C:\Users\kakanurs\Playwright_RAP
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c create-playwright. Please help
Shilpa
The error message "npm ERR! code 1" indicates that the `create-playwright` command failed. This can happen for a number of reasons, but some common causes include:
* **Insufficient permissions:** The user running the command may not have sufficient permissions to install Playwright.
* **Missing dependencies:** Playwright requires a number of system dependencies to be installed. If these dependencies are missing, the `create-playwright` command will fail.
* **Corrupted Playwright installation:** The Playwright installation may be corrupted. This can happen if the installation was interrupted or if there was a problem with the download.
To troubleshoot the error, you can try the following:
1. Make sure that the user running the command has administrator privileges.
2. Install the missing system dependencies. You can use the following command to install the required dependencies on Windows:
```
npm install --global playwright-chromium playwright-firefox playwright-webkit
```
3. Try reinstalling Playwright. You can use the following command to reinstall Playwright:
```
npm uninstall playwright
npm install playwright@latest
```
If you are still getting the error after trying the above steps, you can try contacting the Playwright team for support.
Here are some additional tips that may help you resolve the error:
* Try running the command from a different directory.
* Try running the command with elevated privileges.
* Try restarting your computer.
* Try clearing the npm cache. You can do this by running the following command:
```
npm cache clean --force
```
If you are still having trouble installing Playwright, you can try using a different version of Node.js. You can find a list of supported Node.js versions on the Playwright website.
I hope this helps
hi raghav
while installing playwright i am getting error :-> npm ERR! code 1
npm ERR! path E:\Playwright
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c create-playwright --quiet --browser=chromium --browser=firefox --browser=webkit --gha
npm ERR! A complete log of this run can be found in: C:\Users\HP USER\AppData\Local
pm-cache\_logs\2023-06-27T01_25_19_138Z-debug-0.log
could you please help in solving this ?
Hi Aishwarya
The error message you are getting indicates that there was a problem running the `create-playwright` command. This command is used to create a new Playwright project. The `code 1` error code indicates that the command failed.
There are a few possible reasons why you might be getting this error. One possibility is that you do not have the `node-gyp` package installed. This package is required to build native modules for Playwright. You can install `node-gyp` by running the following command:
```
npm install -g node-gyp
```
Another possibility is that you are trying to install Playwright on a system that does not have the necessary native libraries installed. You can check if your system has the necessary libraries by running the following command:
```
node-gyp --list
```
If the command output does not list the libraries that are required by Playwright, you will need to install these libraries. The specific libraries that you need to install will depend on your operating system.
Finally, it is also possible that there is a problem with your internet connection. If you are unable to download the necessary files from the Playwright website, you will not be able to install Playwright.
If you have tried all of the above and you are still getting the error, you can try the following:
* Clear the NPM cache.
* Delete the `node_modules` folder.
* Reinstall Playwright.
If you are still having problems, you can try asking for help on the Playwright forum or the Playwright GitHub page.
I hope this helps
@@RaghavPal
i have tried all your suggestion you told me but it is not solving my error so i tried to uninstall nodejs and now i had install in c drive this time when i am trying to install playright then i getting error :->
node:internal/modules/cjs/loader:1080
throw err;
^
Error: Cannot find module 'C:\Program Files
odejs
ode_modules
pm\bin
ode_modules
pm\bin
pm-cli.js'
at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
at Module._load (node:internal/modules/cjs/loader:922:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
Node.js v18.16.1
node:internal/modules/cjs/loader:1080
throw err;
^
Error: Cannot find module 'C:\Program Files
odejs
ode_modules
pm\bin
ode_modules
pm\bin
pm-cli.js'
at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
at Module._load (node:internal/modules/cjs/loader:922:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
Node.js v18.16.1
Could you please help me in removing this error?
Aishwarya
Sure, I can help you with that. The error message you are getting is indicating that Node.js cannot find the npm-cli.js file. This file is needed to run npm commands, such as `npm install`.
There are a few possible reasons why you might be getting this error. One possibility is that the npm-cli.js file is not installed in the correct location. Another possibility is that the file is corrupted.
To fix this error, you can try the following steps:
1. Check the location of the npm-cli.js file. The file should be located in the `node_modules
pm\bin
pm-cli.js` directory.
2. Verify that the file is not corrupted. You can do this by running the following command:
```
file npm-cli.js
```
If the file is corrupted, you will need to reinstall Node.js.
3. If the file is not corrupted, you can try running the following command to fix the path to the file:
```
npm config set prefix "C:\Program Files
odejs"
```
This will set the prefix for Node.js to the `C:\Program Files
odejs` directory.
Once you have done one of these steps, you should be able to run npm commands without getting the error.
If you are still getting the error after following these steps, you can try searching for the error online to see if there are any other solutions.
I have tried installing both way got same error. Also got perfect score on the quiz. Anyone have got this error before.
Downloading browsers (npx playwright install chromium)…
Invalid or unexpected token
(node:14116) ExperimentalWarning: The fs.promises API is experimental
{ Error: Command failed: npx playwright install chromium
at checkExecSyncError (child_process.js:616:11)
at execSync (child_process.js:653:13)
at executeCommands (/Users/rashiax1/.npm/_npx/14078/lib/node_modules/create-playwright/lib/index.js:4519:39)
at Generator.run (/Users/rashiax1/.npm/_npx/14078/lib/node_modules/create-playwright/lib/index.js:4682:5)
at process._tickCallback (internal/process/next_tick.js:68:7)
at Function.Module.runMain (internal/modules/cjs/loader.js:757:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
status: 1,
signal: null,
output: [ null, null, null ],
pid: 14116,
stdout: null,
stderr: null }
Abdullah
For the error "Invalid or unexpected token" error you're encountering with Playwright's `npx playwright install chromium` command. Here are some steps to address the issue:
1. Check Node.js Version:
- Ensure Compatibility: Playwright requires Node.js version 14 or newer. Check your version with `node -v`.
- Upgrade if Needed: If your version is older, download and install a compatible Node.js version.
2. Reinstall Playwright:
- Clean Up: Remove any existing Playwright installations:
```bash
npm uninstall -g playwright
```
- Reinstall: Reinstall Playwright globally:
```bash
npm i -g playwright
```
3. Address fs.promises Warning:
- Update Node.js: If possible, update Node.js to a version where `fs.promises` is stable to avoid the warning.
- Suppress Warning (Temporary): If updating isn't feasible, temporarily suppress the warning using the `--no-warnings` flag:
```bash
npx playwright install chromium --no-warnings
```
4. Retry with Direct Command:
- Run Explicitly: If the above steps don't resolve the issue, try running the installation command directly:
```bash
npx playwright install chromium
```
Additional Tips:
- Review Network Connectivity: Ensure a stable internet connection for downloading browsers.
- Check for Conflicting Software: Temporarily disable antivirus or firewall software that might interfere.
- Utilize Playwright Community: If you're still encountering issues, seek help on the Playwright GitHub repository or community forums.
@@RaghavPal Thank you! After updating my node. All the error are gone.
Hi Raghav Sir,
I am getting the below error when I try to install browsers using the command npx playwright install:
Downloading Chromium 115.0.5790.24 (playwright build v1067) from playwright-verizon.azureedge.net/builds/chromium/1
Error [ERR_SOCKET_CLOSED]: Socket is closed
at new NodeError (node: internal/errors: 399:5)
at Socket. _writeGeneric (node: net: 920:8)
at Socket. _write (node :net :942:8)
at dowrite (node: internal/streams/writable:411:12)
at clearßuffer (node: internal/streams/writable:572:7)
at Writable.uncork (node: internal/streams/writable: 351:7) at ClientRequest._flushOutput (node: _http_outgoing:1140:10)
at ClientRequest._flush (node: _http_outgoing: 1109:22)
at onSocketNT (node: _http_client:906:9)
I
at process-processTicksAndRejections (node: internal/process/task_queues: 83:21) {
code: "ERR_SOCKET_CLOSED*
Failed to install browsers
Error: Failed to download Chromium 115.0.5790.24 (playwright build v1067), caused by Error: Download failure, code-1
at ChildProcess. (C: \Data\Playwright
ode_modules \playwright-core\lib\server
egistry \browserfetcherjs:95:16)
at ChildProcess.emit (node:events:513:28)
at Process.ChildProcess. _handle.onexit (node: internal/child_process: 291:12)
Can you please help in this regard.
Hi Divya
The error message `Error [ERR_SOCKET_CLOSED]: Socket is closed` means that the connection to the Playwright server was closed. This can happen for a few reasons:
* The Playwright server is not running.
* The Playwright server is not accepting connections.
* There is a problem with your network connection.
To resolve the issue, you can try the following:
1. Make sure that the Playwright server is running. You can do this by running the following command:
```
npx playwright install --verbose
```
If the Playwright server is not running, it will print an error message.
2. Make sure that the Playwright server is accepting connections. You can do this by running the following command:
```
curl -I playwright-verizon.azureedge.net/builds/chromium/1
```
If the Playwright server is not accepting connections, it will return a status code of 403.
3. Check your network connection. You can do this by running a ping test to a website. If you are unable to ping the website, then there is a problem with your network connection.
Once you have resolved the issue, you should be able to install browsers using the `npx playwright install` command
@@RaghavPal
Firstly I would like thank you for the response.
I have tried the above mentioned pointers and getting below error:
C: \Data \Playwright> npx playwright install --verbose error: unknown option * --verbose*
C: Data\Playwright› curl -1 htps://playwright-version.azureedge.net/builds/chromium/1
Invoke-WebRequest: A paraneter cannot be found that matches paraneter name '1*
At Line: 1 char:6
+ curl -1 htps://playwright-version.azureedge.net/builds/chromium/1
+ CategoryInfo
: InvalidArgument: (:) [Invoke-WebRequest], Parameter@indingException
+ FullyQualifiedErrorId : NamedParameterNot Found,Microsoft. PowerShe11.Commands. InvokeklebRequestCommand
Is there any way to download the chromium browser manually.
Divya
There is a way to download the Chromium browser manually. You can download the Chromium browser from the Chromium website.
To download the Chromium browser, follow these steps:
1. Go to the Chromium website: www.chromium.org/.
2. Click on the "Download Chromium" button.
3. Select the operating system and the architecture for the Chromium browser that you want to download.
4. Click on the "Download" button.
The Chromium browser will be downloaded to your computer. Once the Chromium browser has been downloaded, you can install it by following the instructions on the screen.
Here are the commands that you can use to download the Chromium browser manually:
```
# Download the Chromium browser for Windows
curl -O chromium.googlesource.com/chromium/src/+/master/chrome-win32/chrome.zip
# Download the Chromium browser for macOS
curl -O chromium.googlesource.com/chromium/src/+/master/chrome-mac/chrome.zip
# Download the Chromium browser for Linux
curl -O chromium.googlesource.com/chromium/src/+/master/chrome-linux/chrome.zip
```
Once the Chromium browser has been downloaded, you can unzip it and install it by following the instructions in the `README.md` file.
I hope this helps
I am getting this error
PS F:\learn-playwrite> npm init playwright@latest
npm ERR! Unexpected token '.'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Local
pm-cache\_logs\2022-11-22T13_19_02_597Z-debug-0.log
Hi Swapnil, can be due to node version, Pls check this - stackoverflow.com/questions/70958371/unexpected-token-when-trying-to-run-npm-install