Playwright Beginner Tutorial 4 | How to write 1st Test

▬ ALL FREE COURSES ► automationstepbystep.com/
▬ QUIZ - forms.gle/4CSRsrZxre53UGMn7
00:00 Intro
00:46 Step 1 - Create a new file under test folder
02:15 Step 2 - Add module ‘playwright/test’
const { test, expect } = require('@playwright/test');
05:35 Example how to add and import modules
12:48 Playwright Test provides a test function to declare tests and expect function to write assertions
13:10 Step 3 - Create a test block - test(title, testFunction)
test('My First Test', async ({page}) =＞ {
await page.goto('google.com');
await expect(page).toHaveTitle('Google');
})
17:20
The keyword async before a function makes the function return a promise
The keyword await before a function makes the function wait for a promise
24:14 Screenshot moment
▬▬ ASK RAGHAV ► bit.ly/2CoJGWf
#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
GENERAL ► bit.ly/2PYdwmV
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
PERFORMANCE TESTING ► bit.ly/2wEXbLS
GATLING ► bit.ly/3QrWfkV
▬▬ IDE ▬▬
ECLIPSE ► bit.ly/3AnRhQP
INTELLIJ IDEA ► bit.ly/3AnyDZ8
Visual Studio Code ► bit.ly/2V15yvt
▬▬ 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
RUBY ► bit.ly/3JRRmzf
▬▬ 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
▬▬ DATA FORMATS ▬▬
JSON ► bit.ly/3w450tq
XML ► bit.ly/3PqRneH
▬▬ VIRTUALIZATION ► bit.ly/2SItIL9
▬▬ MOCK INTERVIEWS ► bit.ly/3QGwwVJ ▬▬
▬▬ OTHERS ▬▬
TOOLS & TIPS ► bit.ly/2oBfwoR
QnA FRIDAY ► bit.ly/2NgwGpw
SUNDAY SPECIAL ► bit.ly/2wB23BO
▬▬ RAGHAV PAL ▬▬
GITHUB PROJECTS ► github.com/Raghav-Pal/
CORPORATE TRAINING ► automationstepbystep.com/corp...
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

[@ruixue6955]

3:46 browse the *module* with IDE 4:20 how to include a module in a different script/module 5:18 *require* is a node.js built-in function, 5:21 it is not a Javascript function 5:51 a demo directory inside tests, then create hello.js 8:10 *exports* 8:57 use the module inside demo - *require* 11:59 use *import* instead 16:54 error in the demo code 17:07 solution: *async* + *await* 17:28 async before a function makes the function return a *promise*

[@RaghavPal]

Thanks a lot for adding timestamps

[@ruixue6955]

@@RaghavPal I have watched a few others' tutorials about Playwright as almost a greenhand on nodejs, but eventually found your tutorial and decided to focus on yours :) I should thank you

[@RaghavPal]

Most welcome

[@dillydally7327]

This is awesome! Worked like a charm. You explain things so clearly and it's so easy to follow and understand.

[@RaghavPal]

Thanks for watching

[@JAYLATHIA]

Great thumbs-up to you Raghav. You never stop making latest technology videos which will always empower Devs and QA engineers to grow in their organization. Love all your videos. Thanks and keep making such tech videos in future too.

[@RaghavPal]

Most welcome Jay, sure will continue teaching

[@HarishRaoS]

Thanks for these videos. Very thorough intro to Playwright

[@RaghavPal]

You're very welcome!

[@alive4metal731]

Really appreciate the attention to detail, and trying to explain why things works the way they do.

[@RaghavPal]

Glad to know this helped

[@PritiAndhale222]

thanks for such detailed explanation.

[@RaghavPal]

Most welcome Priti

[@revivecoding]

Thanks, sir for such an amazing video... Your videos are very simple and clear to follow along...

[@RaghavPal]

You are most welcome

[@travelspiceskids296]

Best tutor and I am grateful that I started my career under your guidance.

[@RaghavPal]

Thanks, humbled..

[@learning-Neha]

thank u so much for such thorough explanations!

[@RaghavPal]

You're very welcome Neha

[@shivangisrivastava928]

Great learning Raghav sir as I am completely new to it but can implement with a good understanding step by step

[@RaghavPal]

Most welcome Shivangi

[@sinthujaa]

Thank you for the detailed video! I took the quiz and scored 8/10

[@RaghavPal]

Excellent Sinthuja

[@TheMMakif]

Thank you so much 👍

[@RaghavPal]

Most welcome Akif

[@prakashbhande653]

I have went through 3 topics and look like I am on the right path of learning Playwright tool.. hope I don't get disappointed at the end 😊

[@RaghavPal]

I hope so too Prakash.. Let me know if you face any issues

[@Floweenka]

Thanks again, I got those issues with test-cases not found but I have found help in comments (double \\ ). I will definitely check more of yours videos not only about Playwright

[@RaghavPal]

Glad it helped Floweenka

[@vishalsah525]

In pervious I score 100%, thanks for helping and guiding

[@RaghavPal]

Well done Vishal

[@andibm5623]

thanks a lot Raghav!

[@RaghavPal]

Most welcome

[@user-wz7om5un5c]

Great tutorial, thank you for it!! I have an unrelated question, could you share what browser extension you use to highlight something (the red rectangle) and what extension you use for zooming (the zooming circle).

[@RaghavPal]

Nicolae I am using mac annotation tools

[@zwiterrion12]

Thank you. Quiz Score 9/10

[@RaghavPal]

Great Kelly.. keep learning

[@sagarikamandal8977]

Easy to understand and score is 10/10

[@RaghavPal]

Great score Sagarika

[@pradeepb6914]

Hi Raghav Pal, really appreciate your effort in sharing the knowledge! Just wanted to know will this series also covers API along with UI testing.

[@RaghavPal]

Yes Pradeep, will create lecture on API

[@berekettesfamariam7500]

#Ask Raghav u r doing great Sir one of the best automation instructors in youtube by far I have a question. 1.How can we deal with shadow Dom or nested Dom 2. Can we give negative priority in testng priority Hope u will come across my questions and answer it

[@RaghavPal]

I will try to cover these in coming sessions

[@AnTest931]

Hi Raghav , Thanks for detailed explaination., can i access the element with multiple attributes ? if my datatest-id is not unique in my webpage ?

[@RaghavPal]

Yes, you can access elements with multiple attributes in Playwright even if the `data-test-id` is not unique. Here are several methods you can use: 1. Combine multiple attributes using CSS selectors: - Use CSS selectors to target elements with specific combinations of attributes: ```javascript const element = await page.$('button[data-test-id="my-button"][type="submit"]'); ``` 2. Use XPath: - XPath offers more flexibility for complex attribute combinations: ```javascript const element = await page.$x('//*[@data-test-id="my-button" and @type="submit"]'); ``` 3. Employ Playwright's `locator` functions: - Use `page.locator` to build flexible selectors: ```javascript const element = await page.locator('button') .filter({ hasAttribute: 'data-test-id', value: 'my-button' }) .filter({ hasAttribute: 'type', value: 'submit' }) .first(); ``` 4. Leverage JavaScript evaluation: - Use `page.$eval` to execute JavaScript within the page context for advanced filtering: ```javascript const elementHandle = await page.$eval('button', (buttons) => { return Array.from(buttons).find((button) => { return button.dataset.testId === 'my-button' && button.type === 'submit'; }); }); ``` Best Practices: - Prioritize unique attributes: If possible, work with developers to ensure unique `data-test-id` attributes for reliable targeting. - Choose clear and descriptive attribute names: This enhances code readability and maintainability. - Consider using accessibility attributes: Leverage `role` or `aria-label` for better test coverage and user experience. - Apply appropriate waiting mechanisms: Ensure elements are present and interactable before interacting with them. - Handle multiple matching elements: If multiple elements match your criteria, use `page.locatorAll` or refine your selector. By effectively combining these techniques, you can reliably access elements in Playwright even when dealing with non-unique attributes.

[@ecatzkool7027]

Hi Raghav, can I request a video on Playwright with Cucumber and also using different versions of browsers? Thanks for the great content!

[@RaghavPal]

I will plan

[@JAYLATHIA]

Thanks

[@RaghavPal]

Thanks a lot Jay

[@miguelangelpecerosvargas9780]

do you find more convenient working playwright with typescript? or in terms of automation testing framework, it does not have a big impact to decide work wether with ts or js ?

[@RaghavPal]

TS is a wrapper over JS, and TS code ultimately transpiles down to JS, so if you are comfortable with TS, can go for it

[@leelamanjari122]

Hi Raghav. I followed the same steps as you did in the video. When I try to execute I’m getting an error as No tests found. Make sure the arguments are regular expressions matching test files. You may need to escape symbols like “$” or “*” and quote the arguments. I also tried using forward slash but it still doesnt seem to work. What can I do to fix this?

[@leelamanjari122]

I fixed it. It was a PowerShell problem in the terminal. I killed the terminal and ran the tests in a new one. It worked.

[@RaghavPal]

Great to know this Leela.. keep learning..

[@mikemace2860]

Hi Great video for beginners such as myself, thank you. However I cannot replicate your use of require and import. I can use require but get an error when trying to use import. This can be fixed by putting in "type" : "module" in JSON file but that then gives an error with require. Any suggestions please?

[@RaghavPal]

Hi Mike, this can help flexiple.com/javascript/javascript-require-vs-import/ I will read more on this

[@Anto-fz2kw]

score 10/10. thank

[@RaghavPal]

Great going...

[@ramutalari8473]

Hi @Raghav, which automation tool/s are good for Salesforce web application? Playwright can use?

[@RaghavPal]

Can use it, do a POC first

[@ramutalari8473]

@@RaghavPal Okay, thank you Raghav

[@pallavideshpande8303]

Hi Raghav. Thank you for sharing wonderful course. I am facing a problem while displaying report. Show-report is not showing latest report. Please guide

[@RaghavPal]

Hi Pallavi Here are some things that you can check to troubleshoot the issue of the show-report command not showing the latest report in Playwright: * Check the path to the report. Make sure that the path to the report that you are trying to show is correct. You can use the playwright show-report --help command to see the list of available reports. * Check the permissions to the report. Make sure that you have the permissions to access the report. You can use the ls -l command to see the permissions to the report. * Check the status of the report. Make sure that the report has been generated successfully. You can use the playwright generate-report command to generate the report. If you have checked all of these things and you are still having problems, you can try posting a question on the Playwright forum or mailing list. There are a number of experienced Playwright users who can help you troubleshoot the issue. Here are some additional things to keep in mind: * The show-report command will only show the latest report that has been generated. * The show-report command will only show reports that are in the current directory. * The show-report command will only show reports that have been generated using the playwright generate-report command. I hope this helps

[@basurajs]

@raghav Thanks for your effort in making best videos. In playwright-pytest should we use "sync_playwright" module or "async_playwright" module.

[@RaghavPal]

When working with Playwright-Pytest, you have the choice between using the "sync_playwright" module or the "async_playwright" module. Let's explore the differences and decide which one suits your needs: 1. Sync Playwright (sync_api): - The sync_api is a wrapper around the asyncio_api that abstracts away the usage of asyncio. - It provides a synchronous interface, making it easier to work with for developers familiar with synchronous programming. - You can use it for straightforward scenarios where you don't need advanced asynchronous features. - However, keep in mind that it blocks execution until the operation completes. - Use sync_playwright if you prefer simplicity and ease of use¹. 2. Async Playwright (async_api): - The async_api directly exposes Playwright's asynchronous capabilities. - It allows you to work with async/await patterns, making it suitable for more complex scenarios. - If your Python project already uses the asyncio module (which stands for Asynchronous I/O), async_playwright is a natural fit. - With async, you can perform non-blocking I/O operations, allowing better concurrency. - Consider async_playwright if you need flexibility, especially for scenarios involving multiple threads or complex interactions¹². In summary: - Use sync_playwright for simplicity and ease of use. - Choose async_playwright if you need advanced asynchronous capabilities or if your project already utilizes asyncio. Remember to align your choice with your project requirements and familiarity with asynchronous programming. .

[@basurajs]

@@RaghavPal Thanks a lot for your quick reply.

[@basurajs]

@@RaghavPal One more thing if i understand it correctly, playwright async is useful in case you don't want to introduce a delay in the script. because async uses auto wait. In case of async and await, if promise is not returned, what will be the default time out. how actually execution happening with async and await. Thanks

[@RaghavPal]

Let's dive into the world of Playwright, async/await, and how they work together. 1. Async/Await in Playwright: - Async Functions: When you declare a function as `async`, you're telling Node.js that it contains asynchronous code. These functions return a Promise. - Await: The `await` keyword is used within an `async` function to pause execution until a Promise is resolved. It ensures that subsequent lines of code wait for the previous asynchronous operation to complete. - Promises: Playwright methods (like `.fill()`, `.click()`, or `.evaluate()`) return Promises. These methods perform actions asynchronously, and `await` ensures that the next line of code doesn't execute until the Promise is resolved. 2. Execution Flow with Async/Await: - Let's break down your example: ```javascript test.only("Basic Login", async ({ page }) => { await page.goto("/"); page.getByPlaceholder("Email Address").fill("[e-mail]"); await page.getByPlaceholder("Password").fill("bar"); await page.getByRole("button", { name: "Sign In" }).click(); await expect(page).toHaveTitle("The Foobar Page"); }); ``` - Here's what happens step by step: 1. `await page.goto("/")`: The page navigates to the specified URL. The execution waits until this navigation is complete. 2. `page.getByPlaceholder("Email Address").fill("[e-mail]")`: The `getByPlaceholder` method returns a locator (not a Promise). The `.fill()` method is initiated, which is asynchronous. However, since `getByPlaceholder` doesn't return a Promise, execution proceeds immediately. 3. `await page.getByPlaceholder("Password").fill("bar")`: Similar to the previous step, the `.fill()` method is initiated, but there's no waiting for the previous `.fill()` to complete. 4. `await page.getByRole("button", { name: "Sign In" }).click()`: Again, the `.click()` method is asynchronous, but it doesn't wait for the previous `.fill()` to finish. 5. `await expect(page).toHaveTitle("The Foobar Page")`: The `expect` assertion is asynchronous, and it waits for the title check to complete. 3. Chaining Promises: - Playwright methods don't return Promises directly. Instead, they return locators (like constructors) that can be chained. - For example: ```javascript await new Bicycle().ride(); // New Bicycle isn't async, but .ride() is. ``` - In Playwright, locators don't use the `new Locator` syntax. Instead, you can chain methods directly: ```javascript await bicycle().ride(); // Or use an intermediate variable: const bike = bicycle(); await bike.ride(); ``` 4. Timeouts: - Assertions (like `expect(locator).toHaveText()`) have their own timeout (default: 5 seconds) unrelated to the test timeout. - Test timeouts (default: 30 seconds) include time spent in test functions, hooks, and fixtures. - If you need to customize timeouts, you can set them in the test configuration or individually for specific tests using `test.setTimeout()`¹². Remember, async/await simplifies handling asynchronous code, but understanding how Promises work under the hood is crucial for effective debugging and writing robust tests.

[@basurajs]

@@RaghavPal Thanks a lot.

[@SheetalUmesh]

currently I have selenium web drive but with chrome version update I everytime have to update the version manually. With Playwright I am using chromium, will i face same issue. Will playwright automatically update chromium version and run test without issue? please confirm

[@RaghavPal]

Sheetal Here's how Playwright handles Chromium updates, ensuring smooth test execution: 1. Automatic Updates: - Playwright downloads and manages compatible Chromium versions automatically when you install or update it. - This eliminates the manual effort of updating drivers like in Selenium. 2. Compatibility: - Each Playwright version is tied to specific Chromium versions, ensuring compatibility and preventing unexpected issues. - You can check the supported versions in the Playwright documentation for your specific version. 3. Updating Playwright: - To use a newer Chromium version, simply update Playwright itself: ```bash npm install @playwright/test@latest ``` - This will download the latest compatible Chromium version. 4. Managing Browser Binaries: - Review and manage browser binaries using the Playwright CLI: ```bash npx playwright install npx playwright list-browsers ``` 5. Configuration: - Optionally specify a desired Chromium version in your `playwright.config.js` file: ```javascript // playwright.config.js module.exports = { browsers: ['chromium:105'], // Use Chromium 105 }; ``` Advantages over Selenium: - No manual driver management: Playwright handles updates for you. - Stays ahead of browser releases: Playwright often supports newer browser versions before Selenium. - Streamlined testing experience: Focus on tests, not browser compatibility hassles. Key Points: - Automatic updates within Playwright's version control. - Compatibility guaranteed between Playwright and Chromium versions. - Easy update process through Playwright itself. - Flexible configuration for specific browser version control. Stay updated with Playwright, and your tests will seamlessly adapt to Chromium updates without manual intervention!

[@SheetalUmesh]

Can I use Playwright in visual studio using C#. Currently I want to achieve a scenario where I can login and pick bearer token from network tab for further automation testing?

[@RaghavPal]

Sheetal Yes, you can effectively use Playwright with C# in Visual Studio to achieve the scenario of logging in, capturing the bearer token, and using it for further automation testing. Here's a comprehensive guide: Prerequisites: - Install Playwright: Use NuGet Package Manager in Visual Studio to install the `Microsoft.Playwright` package. - Choose a Browser: Select the browser you'll use for testing (Chromium, Firefox, or WebKit). Steps: 1. Create a Playwright Instance: ```csharp using Microsoft.Playwright; var playwright = await Playwright.CreateAsync(); var browser = await playwright.Chromium.LaunchAsync(); // Or other browser ``` 2. Navigate to Login Page: ```csharp var page = await browser.NewPageAsync(); await page.GotoAsync("your-login-page-url"); ``` 3. Interact with Login Elements: - Use `page.FillAsync()` to fill in username and password fields. - Use `page.ClickAsync()` to submit the login form. 4. Capture Bearer Token: ```csharp await page.RouteAsync("/*", async route => { if (route.Request.Url.PathAndQuery.Contains("login-endpoint")) { var response = await route.Response(); var bearerToken = response.Headers["Authorization"]; // Extract token // Store the token securely for later use } }); ``` 5. Perform Additional Actions with Token: - Use the captured token in subsequent requests for authenticated actions. - Set the token in the `Authorization` header of subsequent requests. - Example: ```csharp await page.GotoAsync("authenticated-page"); await page.SetHeaderAsync("Authorization", bearerToken); ``` Additional Tips: - Isolate Authentication State: Store authenticated state to avoid repeated logins. - Secure Token Storage: Avoid storing tokens directly in code for security. - Handle Token Expiration: Implement logic to refresh tokens if needed. - Utilize Playwright's Features: Explore other Playwright features for testing scenarios. Remember to adapt the code snippets to your specific application's login process and token format.

[@SheetalUmesh]

Thanks a lot. This really helps. I was able to achieve the scenario@@RaghavPal

[@sd-kc9qy]

Hello Raghav - I am using playwright and it executes code fine but in Test-Result folder is always empty. Do I have to configure anywhere to store results?

[@RaghavPal]

Can check this medium.com/geekculture/how-to-generate-html-report-in-playwright-f9ec9b82427a

[@kartakartak]

Hey Raghav, I don't have the playwright\test folder in my node_modules folder. I do have the playwright and playwright-core folder. Did I forget to install something?

[@RaghavPal]

To resolve this issue, you can install the `@playwright/test` package by running the following command in your terminal: ``` npm i -D @playwright/test ``` This command installs the `@playwright/test` package as a dev dependency for your project. After installation, you should see the `@playwright/test` folder within `node_modules`, and you'll be able to import and use functionalities from this package in your tests... Additionally, ensure that your `playwright.config.js` file is correctly set up with the `testDir` configuration pointing to the directory where your test files are located. This setup is necessary for Playwright to find and run your tests³. If you continue to face issues, you may want to refer to the official Playwright documentation or seek support from the community forums..

[@SheetalUmesh]

Whenever Playwright version I update, should I manually download or update browsers?

[@RaghavPal]

Sheetal No, you won't need to manually download or update browsers when you update Playwright itself. You can confirm the browser versions being used after updating Playwright using the following commands: ```bash npx playwright list-browsers ``` Here's why: 1. Automatic Browser Management: - Playwright takes care of downloading and managing compatible browser binaries automatically. - It streamlines the process, saving you time and effort. 2. Aligned Versions: - Each Playwright version is specifically designed to work with compatible browser versions. - This ensures smooth test execution and avoids compatibility issues. 3. Update Process: - When you update Playwright, it automatically checks for and downloads any required browser updates. - You don't need to manually intervene in this process. So to sum up: - Playwright handles browser updates automatically, so you can focus on testing rather than managing browser versions. - Upgrading Playwright ensures you're using compatible browser versions, maintaining test reliability. - You have the flexibility to control browser versions if specific needs arise.

[@KrishnaKumar-vp3wg]

Sir I don't have knowledge of node js should I continue further with this tutorial??

[@RaghavPal]

You can continue, we do not need to learn Node JS, we just need to install and setup so that we can create Playwright project, all this is covered in the tutorial

[@nwanegborobertchinonso9240]

Also can we have video on installing playwright with typescript? Also How can I download the version of node js version 8.5 which is the version you used for the tutorial?

[@RaghavPal]

Hi Robert Let me help you with that. Here are the steps on how to install Playwright with TypeScript: 1. Install Node.js. You can download the latest version of Node.js from the official website. 2. Install TypeScript. You can install TypeScript by running the following command: ``` npm install -g typescript ``` 3. Install Playwright. You can install Playwright by running the following command: ``` npm install -g playwright ``` 4. Create a new TypeScript project. You can create a new TypeScript project by running the following command: ``` mkdir my-project cd my-project tsc --init ``` 5. Create a new file called `index.ts`. In this file, you can write your Playwright tests. 6. Run your tests. You can run your tests by running the following command: ``` npx playwright test ``` Here are the steps on how to download Node.js version 8.5: 1. Go to the Node.js download page. 2. Click on the "Download" button for Node.js version 8.5. 3. Save the file to your computer. 4. Run the installer.

[@mitchdeamon696]

I have followed everything step by step but when I go to run my own test file in the tests directory i get 'no tests found' during the google title demo. however, when i run the example test they provide, that one does work. i also have to cd into the tests directory in order to make the example.spec.js for it to work. no clue what could be wrong.

[@RaghavPal]

Hi Mitch If you are facing a "no tests found" error when running your own test file with Playwright, there could be several reasons for this issue: Make sure your test file is located in the correct directory: By default, Playwright looks for test files in the tests directory. If your test file is located in a different directory, you may need to specify the correct path when running the test. Ensure that your test file has the correct naming convention: Playwright looks for files with the .spec.js extension in the tests directory. If your test file has a different extension or does not follow the naming convention, Playwright may not be able to find it. Check if you have the necessary dependencies installed: Make sure that all the required dependencies for running your test file are installed. This includes Playwright itself, as well as any other dependencies your test file may have. Verify that your test file has valid tests: Ensure that your test file contains valid tests that can be executed by Playwright. If there are no tests or if the tests are not written correctly, Playwright may not be able to find them. If you have checked these potential issues and still can't get your test file to run, you may want to reach out to the Playwright community or support team for further assistance.

[@sarayum7934]

@@RaghavPal hi is it resolved? I am getting the same error - "No tests found"

[@gethmipathirana222]

Hi, If you are getting the same issue "No Test Found" or "MOdule_Not_Found", make sure you have the correct content under the helo.js file and this following code under our file created under the tests folder "const {hello, helloworld} = require ('./demo/helo.spec')", in my case I renamd the file to a helo.spec.js, that's why I've used './demo/helo.spec' @@sarayum7934

[@deepnatest5260]

Hi Raghav, Do you have tutorials in this series for type script based tests?

[@RaghavPal]

Not yet on TypeScript Deepna

[@deepnatest5260]

​@@RaghavPal Thank you, but are you planning to do one for TypeScript?

[@RaghavPal]

I will do

[@zairabatool1892]

hey raghaz, i was following your turorial. My playwright is latest when i tried to run my first test got an error ''can not found module' i just saw that i dont have expect module under common folder. is this reason how can i resolve it?

[@RaghavPal]

Hi Zaira If you encounter an error stating "cannot find module" when running your first Playwright test, it typically indicates that a required module is missing or not installed in your project. In your specific case, it seems that the `expect` module is missing from the common folder. The `expect` module is often used for assertions and assertions are commonly placed in the common folder for reusability. To resolve this issue, you can follow these steps: 1. Make sure you have the `expect` module installed in your project. You can install it using npm (Node Package Manager) by running the following command in your project's root folder: ``` npm install expect ``` 2. Once the `expect` module is installed, verify that it appears in your `package.json` file as a dependency. You should see an entry similar to: ``` "dependencies": { "expect": "^x.x.x" } ``` 3. If the `expect` module is successfully installed and listed in `package.json`, try running your test again. The error should be resolved, and the test should execute without any "cannot find module" errors.

[@parthipan872]

Hi Ragav, I know python very well, Is playwright have scope with python compared with javascript? Please clarify playwright python is suitable future or not

[@RaghavPal]

Yes, you can use it with Python, it has future

[@parthipan872]

@@RaghavPal thanks for your valuable feedback and guidance

[@DK-ik3bf]

Hi I have a question, when I did the import--> import {hello, helloworld} from './demo/hello' and console.log one of the hello functions, I got this error message: import {hello, helloworld} from './demo/hello' SyntaxError: Cannot use import statement outside a module Do you happen to know what I missed? Thank you

[@RaghavPal]

D K Understanding the Error: - This error arises when you attempt to use `import` statements in a non-module context, typically within a plain JavaScript file that hasn't been configured as a module. Resolving the Issue: 1. Ensure Module Context: - ESM Modules (Recommended): - Use the `.mjs` file extension for your JavaScript files to explicitly signal ESM format. - Include a `type: "module"` field in your `package.json` if you prefer `.js` extensions. - CommonJS Modules: - If using CommonJS modules (e.g., in Node.js), leverage `require()` instead of `import`. - Consider a transpiler like Babel for compatibility if necessary. 2. Check File Extensions: - Verify that both the importing and imported files have appropriate extensions (`.mjs` or `.js` with `type: "module"`). 3. Inspect IDE/Tooling Configuration: - Ensure your IDE or testing environment supports and recognizes ESM modules. - If using Node.js, use a recent version (v14+) or enable experimental modules flag (`--experimental-modules`). 4. Address Node.js Compatibility: - If working in Node.js, use `node --experimental-modules` or a tool like `esm` to run ESM code directly. - Consider a transpiler like Babel for broader compatibility. 5. Correct Syntax: - Double-check for any typos or syntax errors in your import statements. Example (ESM Modules): ```javascript // test.mjs (or test.js with `type: "module"` in package.json) import { hello, helloworld } from './demo/hello.mjs'; console.log(hello()); ``` Example (CommonJS Modules): ```javascript // test.js const { hello, helloworld } = require('./demo/hello.js'); console.log(hello()); ``` Additional Tips: - Adhere to consistent module syntax throughout your project. - Stay updated with Node.js and Playwright versions for optimal module support. - Seek support from Playwright documentation or communities if issues persist. ..

[@Pallavi-ky4mw]

Hello Raghav, thanks for the tutorial I am getting an error saying "module not found" on my mac. I am not able to post a screenshot here.please help

[@RaghavPal]

Hi Pallavi The error "module not found" can occur in Playwright on Mac for a few reasons. Here are some possible solutions: 1. Make sure that you have installed the latest version of Playwright. You can do this by running the following command in your terminal: ``` npm install -g playwright ``` 2. Make sure that the Playwright module is installed in your project. You can do this by running the following command in your project directory: ``` npm install playwright ``` 3. Make sure that the Playwright module is imported correctly in your code. You can do this by checking that the import statement is correct and that the Playwright module is installed in the same directory as your code. 4. If you are still getting the error, try restarting your Mac. If you are still having trouble, you can try the following: 1. Check the Playwright documentation for more information on troubleshooting errors. 2. Ask for help in the Playwright community forum. 3. Report the error to the Playwright team

[@user-th7ud8rt6q]

I am following this tutorial, when running command node .\tests\my_first_test.spec.js is giving me error "module not found" . However I am getting perfect result if using command node my_first_test.spec.js. Could you please explain why

[@RaghavPal]

1. Relative vs. Absolute Paths: - "node my_first_test.spec.js" works because it uses an absolute path, directly referencing the file from the current working directory. - "node .\tests\my_first_test.spec.js" fails because it uses a relative path, which requires Node.js to locate the file relative to the current working directory. If you're not in the correct directory, it won't find it. 2. Resolving the Issue: - Change Directory: Before running the command, navigate to the `tests` directory using `cd tests`. Then execute the command as `node my_first_test.spec.js`. - Use Absolute Path: Alternatively, provide the full path to the file, like `node C:\path\to\project\tests\my_first_test.spec.js`. 3. Additional Considerations: - Node Version Compatibility: Ensure you're using a Node.js version that supports Playwright (14 or above is recommended). - Project Structure: Verify that your Playwright configuration file (`playwright.config.js` or `playwright.config.ts`) is in the correct directory and has accurate test file patterns. - Module Installation: If using Playwright as a dependency, confirm it's installed correctly in your project's `node_modules` directory. Best Practices: - Consistency: Use consistent paths (either relative or absolute) throughout your project for clarity. - Configuration File: Leverage the `testDir` option in your Playwright configuration file to specify the test directory, simplifying command execution.

[@kanchansharma3899]

Raghav..here you are teaching Playwright with javasript..Do you any vedio's where you have teach playwright with typescript. Please suggest

[@RaghavPal]

Kanchan Not specifically for now... but the initial few videos will help you get started irrespective of the programming language.. and then for TypeScript syntax, scripts, you can refer documenation

[@suselcastrocastro8419]

Hello Raghav, I don't see test.js and expect.js under the folder @playwright/test. I see under other folder. How I fix this?

[@RaghavPal]

Susel It seems like you're encountering an issue with the @playwright/test package. Let's troubleshoot this together! Here are a couple of steps you can take to resolve the problem: 1. Install @playwright/test: Make sure you have the @playwright/test library installed in your project. If not, you can install it using npm: ```bash npm install -D @playwright/test ``` This command will add the @playwright/test package as a development dependency to your project. 2. Remove playwright-expect: You mentioned that you're using the playwright-expect library. However, Playwright already includes web-first assertions, so there's no need to use an additional library to extend `expect`. Remove any unused code related to playwright-expect: ```javascript // Remove this line const { matchers } = require('playwright-expect'); ``` 3. Check Your Test File Naming: Ensure that your test files are named correctly. By default, Playwright Test looks for files matching the pattern `*(test|spec).(js|ts|mjs)`. If your test file doesn't follow this naming convention, you might encounter the "No tests found" issue. - Rename your test file to something like `first.test.js`. - Alternatively, you can specify a custom test match pattern in your Playwright Test configuration. For example: ```javascript // playwright.config.js import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { testMatch: /.*\.js/, // Match any .js file }; export default config; ``` 4. Check Your File Paths: Verify that your file paths are correct. If you've moved your test files to a different folder, make sure the import paths are updated accordingly. 5. Run Your Tests: After making the necessary adjustments, run your tests again: ```bash npx playwright test ``` Hopefully, this should resolve the issue

[@maddulasaikrishna7586]

suppose i have create separate folder out side tests folder, then also i need to give file name as My_First_Test.spec.js ?

[@RaghavPal]

If you have created a separate folder outside of the tests folder to store your test files, you can still use the naming convention of "My_First_Test.spec.js" to indicate that the file contains test specifications. However, you should make sure that the folder you created is included in the test configuration for your testing framework or tool. For example, if you are using Jest, you can specify the folder where your test files are located using the testMatch option in your Jest configuration file (jest.config.js): module.exports = { // other Jest configuration options... testMatch: [ '**/tests/**/*.spec.js', // include test files in the "tests" folder and subfolders '**/mytests/**/*.spec.js' // include test files in the "mytests" folder and subfolders ], }; In the above example, the testMatch option specifies that Jest should include test files with the ".spec.js" suffix located in either the tests folder or the mytests folder, and in any subfolders within those folders. So, as long as your test files follow the naming convention of "My_First_Test.spec.js" and are located in a folder that is included in your testing framework or tool's configuration, they will be detected and run as tests.

[@mateapolic9067]

Hello :) I'm just wondering if we need to manually write when we want to run tests? There are no options like "Run the test" ?

[@mateapolic9067]

Also, I have some issues, in this tests (making)... Are you willing to give me any contact where I can send you screenshots?

[@RaghavPal]

So we have to run the command *npm playwright test* to run the tests, and we can have multiple options with this command like selecting specific test file, browsers etc

[@Akshaykumar-yz3uy]

Hi Raghav, Thank you for this awesome couse. I am a begginer and I tried this but when I am running it in terminal it is showing no test found. I tried it through chat GPT and added jest in the package.json but still its not working

[@RaghavPal]

Akshay It seems you're encountering a common issue where Playwright does not recognize the test files. This can happen for several reasons, such as incorrect configuration or file naming conventions. Here are a few steps you can take to troubleshoot the problem: 1. Check your configuration file: Ensure that your `playwright.config.ts` or `playwright.config.js` is correctly set up and that the `testDir` property points to the directory where your test files are located¹. 2. Verify file naming: Playwright by default looks for files with `.spec.ts` or `.test.ts` extensions. Make sure your test files follow this naming pattern. 3. Update Playwright and Jest: Sometimes, compatibility issues can cause this problem. Update both Playwright and Jest to their latest versions using the following commands: ```bash npm install @playwright/test@latest npm install jest@latest ``` 4. Install the necessary dependencies: If you're using Jest with Playwright, you'll need to install `jest-playwright-preset`. You can do this with the following command: ```bash npm install -D jest jest-playwright-preset playwright ``` 5. Configure Jest to use Playwright: In your Jest configuration file, you should set the preset to `jest-playwright-preset` to integrate Playwright with Jest⁶. 6. Check for syntax errors: Syntax errors in your test files or configuration files can also lead to tests not being found. 7. Run Playwright tests directly: Try running the tests using the Playwright CLI to see if the issue is specific to Jest integration: ```bash npx playwright test ``` 8. Consult the documentation: Both Playwright and Jest have extensive documentation that can help you configure them correctly⁹. If you've tried all these steps and are still facing issues, it might be helpful to look at the error logs for more specific information about what might be going wrong.

[@PK-jx3hp]

Hi, Can you please also explain how to login/connect to SPA which requires Azure Authentication. I did not find any solution anywhere. Thanks

[@RaghavPal]

P K To login/connect to SPA which requires Azure Authentication using Playwright, you can follow these steps: 1. Create a new Playwright context. 2. Navigate to the SPA login page. 3. Fill in the Azure authentication credentials. 4. Click the "Login" button. 5. Wait for the SPA to redirect to the home page. Here is an example of how to do this in Python: ```python import asyncio from playwright.async_api import async_playwright async def main(): playwright = await async_playwright.launch() context = await playwright.chromium.launch(headless=False) page = await context.new_page() await page.goto("example.com/login") # Fill in the Azure authentication credentials. await page.fill("input[name='username']", "username") await page.fill("input[name='password']", "password") # Click the "Login" button. await page.click("button[type='submit']") # Wait for the SPA to redirect to the home page. await page.wait_for_url("example.com/home") await context.close() await playwright.stop() if __name__ == "__main__": asyncio.run(main()) ``` If you are using a different programming language, you can follow the same steps, but you will need to use the Playwright API for that language. Here are some additional tips for logging in to SPAs which require Azure Authentication using Playwright: * If the SPA uses a single sign-on (SSO) flow, you may need to use a different Playwright API to login. For example, if the SPA uses OAuth 2.0 for SSO, you can use the `page.authenticate()` API to login. * If the SPA uses a custom authentication flow, you may need to write your own Playwright script to login. * If you are having trouble logging in, you can try using the Playwright debugger to inspect the SPA's network traffic and HTML code. I hope this helps

[@erikpugh7028]

Both in the previous lecture and this lecture, I am getting "Error: No tests found" when attempting to run a specific test with the 'npx playwright test .\tests\my_first_test.spec.js' It also didn't work when using the 'example.spec.js' that came with the playwright installation. Has this functionality changed? I have seen your answers to others who had similar errors, but I'm not sure how it wouldn't be a proper test file when it is exactly the same as the one you're seemingly using. EDIT: I should mention that all tests run as expected when I use 'npx playwright test' to run all tests - it's only when targeting a specific test in the way that you demonstrate that I'm getting 'Error: No tests found'.... So, again, it doesn't seem to be an issue with the test not being valid.

[@erikpugh7028]

Nevermind. I figured it out. I just have to type: npx playwright test my_first_test.spec.js Putting the ".\tests\" part is what was messing it up. Still not sure why it works for you, but at least I figured it out on my end.

[@RaghavPal]

Glad it worked Erik

[@user-th7ud8rt6q]

@@erikpugh7028 - i am having same issue, can run with giving single file name but not path, could you tell me why

[@mukundkrishna2789]

Hi sir. When i used the import statement and tried to run the code it threw "SyntaxError: Cannot use import statement outside a module" error. Could you kindly help on this?

[@RaghavPal]

Mukund Here are the common causes and solutions: 1. Missing or Incorrect Module Syntax: - Ensure `.js` or `.mjs` extension: Your code file must have a `.js` or `.mjs` extension to be recognized as a module. - Add `type="module"` (if necessary): If using `.js`, explicitly declare it as a module in your HTML file: ```html ``` 2. Node.js Environment: - Use `node --experimental-modules`: If running directly with Node.js, enable experimental modules support: ```bash node --experimental-modules your-playwright-script.js ``` - Consider `package.json` configuration: For long-term compatibility: ```json { "type": "module" } ``` 3. Browser Environment: - Bundle code for browsers: Browsers don't natively support `import` statements. Use a bundler like Webpack or Rollup to package your code and dependencies for browser execution. 4. Incorrect Import Path: - Double-check paths: Verify that the paths in your `import` statements are correct and point to existing modules. - Resolve relative paths: Ensure relative paths are resolved correctly based on file locations. 5. IDE Configuration: - Configure for module support: Some IDEs might require configuration to recognize and run modules correctly. Additional Tips: - Update Node.js: Use a recent Node.js version (>=14.6.0) for better module support. - Consider `require`: If compatibility is crucial, use `require` instead of `import`, but be mindful of potential differences.

[@aartichoudhary1671]

Hello Raghav, I followed the exact same steps but it is showing some error when i am running the code to print hello and helloworld

[@RaghavPal]

Hi Aarti, will need to see the details of code and error message

[@yogeshphadatare104]

Hi @RaghavPal , thank you for playwright series. I am working on npm --version "10.2.4" and node --version "v20.11.0" I have tried writing a test from timestamp 13:10 and tried to run the test. I am getting error "Error: No tests found. Make sure that arguments are regular expressions matching test files. You may need to escape symbols like "$" or "*" and quote the arguments." is there any change in latest version of playwright? what is the reason it is not working? I have also tried the other example where tried to print on console using console.log however even that is also not working for me. Please suggest.

[@RaghavPal]

Yogesh What is the command you executed Just try to add forward slashes / in the path of the test file in the command The error message "Error: No tests found" indicates that Playwright couldn't find any test files to run. This could be due to several reasons: 1. Test file patterns: * Make sure your test file names match the patterns used in your Playwright configuration file (`playwright.config.js`). The default pattern is `*.spec.js`, but you can customize it. Double-check your file names and patterns for typos or inconsistencies. 2. File path: * Ensure you're running the test command from the correct directory. If your test files are in a different location than the Playwright configuration file, you need to specify the relative or absolute path to them in the command. For example, `npx playwright test --testDir="my-tests" `. 3. Escaped characters: * If your test file names or paths contain special characters like "$" or "*", you might need to escape them using backslashes (`\`) or enclose them in quotes (`" "). 4. Latest Playwright version: * There have been no recent changes in Playwright that should cause the "no tests found" error. However, it's always good to ensure you're using the latest version by running `npm install playwright --save-dev`. 5. Console.log issue: * If even console.log isn't working, it could indicate a larger problem with your Playwright setup. Try restarting your terminal or computer and ensure Playwright is installed correctly. Here are some additional suggestions: * Run `npx playwright test --help` to see a list of available options and confirm you're using the correct command format.

[@yogeshphadatare104]

Thank you @@RaghavPal. This information helped me. After reading your comment I tried with below commands and those worked for me. npx playwright test my_first_test.spec.js --headed npx playwright test tests/my_first_test.spec.js --headed However, I was trying command : npx playwright test .\tests\my_first_test.spec.js --headed to run the tests written in my_first_test.spec.js file. This command is giving me error mentioned in my first comment. After writing when I press tab button it is suggesting me folders and I can navigate to file using tab button. But after hitting enter key. it is giving me same error. Same command worked in you video. Is there any setting I am missing?

[@RaghavPal]

Here: npx playwright test .\tests\my_first_test.spec.js --headed try changing backslashes \ with forward slash /

[@moatazelsbay9653]

when i write command ( npx playwright test .\tests\first.spec.js)error appear(Error: No tests found) i do not know the problem exactally can you help me in that?

[@RaghavPal]

Moataz The error message "Error: No tests found" means that Playwright cannot find any tests in the file `.\tests\first.spec.js`. There are a few possible reasons for this error: * The file `.\tests\first.spec.js` does not exist. * The file `.\tests\first.spec.js` is not a valid Playwright test file. * The Playwright test runner is not configured to look for tests in the file `.\tests\first.spec.js`. To troubleshoot the error, you can try the following: 1. Make sure that the file `.\tests\first.spec.js` exists and is a valid Playwright test file. 2. Make sure that the Playwright test runner is configured to look for tests in the directory `.\tests`. To configure the Playwright test runner to look for tests in the directory `.\tests`, you can use the following command: ``` npx playwright test --test-dir .\tests ``` If you are still getting the error after following these steps, then you can contact Playwright support for help. Here are some additional tips for troubleshooting Playwright test errors: * Make sure that you are using the latest version of Playwright. * Make sure that you are using the correct Playwright test runner. * Check the Playwright documentation for more information on troubleshooting test errors. I hope this helps

[@peterphung2314]

Dear Raghav, could you help me check this issue. I follow your step but when I execute "My first test" it responds to me in the terminal: "Running 0 tests using 0 workers"

[@RaghavPal]

Hi Peter, check in your config file the folder where tests should be located and the naming format for test files By default it is .*(test|spec)\.(js|ts|mjs)

[@peterphung2314]

@@RaghavPal Thank Raghav I see the issue like you mention. My config file is "my_first_test_spec.js"

[@snehlatakottawar3434]

Hi Raghav, why m unable to see expect.js under my playwright/test package

[@RaghavPal]

Snehlata The issue you're experiencing is because the `expect` function from Playwright's test library is specifically designed to work in the context of Playwright's test runner. It doesn't quite play well when you try to run it within other contexts (such as Cucumber) because different test runners handle assertions differently. Here are some steps to resolve this: 1. Remove playwright-expect: - You don't need to use the `playwright-expect` library. Playwright already includes web-first assertions, so there's no reason to use an additional library to extend `expect`. - Remove the following line from your code: ```javascript const { matchers } = require('playwright-expect'); ``` 2. Install @playwright/test: - Make sure you have the `@playwright/test` library installed as a development dependency in your `package.json`. - If not, install it using: ``` npm install -D @playwright/test ``` 3. Use Playwright's Built-in Assertions: - Playwright provides its own assertions, which are automatically available when you use `@playwright/test`. - You can directly use assertions like `expect(page).toHaveText('Hello, World!')` without any additional setup. 4. Run Your Tests: - After making these changes, run your tests again using the following command: ``` npx playwright test ``` Remember that Playwright's test library is specifically designed for Playwright, and it provides a seamless experience for testing web applications. Stick to Playwright's built-in assertions, and you'll have a smoother testing process. ..

[@psrinika]

Hi Raghav, I have a question about the very last part, specifically the "expect..." section. Firstly, why did it show as an error? Shouldn't it have shown as "This is expected and this is what really is"? The next question is, why is the error shown at the beginning of ".toHaveTitle"?

[@RaghavPal]

Please add the timestamp of the part, I will refer and check

[@psrinika]

@@RaghavPal timestamp is 21.10

[@RaghavPal]

Yes, so if you see the report.. it shows what was expected and what is actual. And it is pointing to the right function that failed

[@nishasengar3897]

I am getting error :throw new Error([`Playwright Test did not expect ${title} to be called here. Any suggestions please

[@RaghavPal]

Hi Nisha The error message you are getting is caused by the fact that you are calling a function that is not expected to be called in the current context. This can happen if you are using a function that is not part of the Playwright API, or if you are using a function in a way that is not expected. To resolve this error, you need to identify the function that is causing the error and understand why it is not expected to be called in the current context. Once you have identified the problem, you can fix it by changing the way that you are using the function. Here are some suggestions for resolving the error: * Make sure that you are using the correct function. * Make sure that you are using the function in the correct way. * If you are using a function that is not part of the Playwright API, make sure that you are importing it correctly. * If you are still having problems, you can report a bug to the Playwright team. They will be able to help you troubleshoot the problem.

[@user-vn9qm9wl8t]

Can you upload videos for writing tests with Typescript?

[@RaghavPal]

I will check on this

[@aw-or9pl]

Hello, thank you for the video, however I am running into the same issues as others where I receive an error of "No Tests Found". I verified in the testDir: that the file path is correct and I still receive the error. I have followed steps from the video exactly with only minor test name changes. The tests appear in the "Testing" section of VS code but I still receive the no tests found error. I'm unable to run any tests from the terminal.

[@RaghavPal]

Hi, If you are getting a "No Tests Found" error when running your Playwright tests, it's likely that there's an issue with how you've structured your test files or with the configuration of your test runner. Here are some things you can check to resolve this issue: Make sure your test files are in the correct directory: Ensure that your test files are located in the directory specified in the testDir configuration option in your Playwright configuration file. By default, the testDir is set to ./tests, so make sure your test files are located in a folder called tests in the root directory of your project. Check that your test files are named correctly: Make sure your test files have the correct naming convention, which is to start with the word test followed by a descriptive name, and end with the .spec.js extension. For example, testHomePage.spec.js. Verify that your test files have the correct test functions: Ensure that your test files have at least one test function defined with the test keyword. For example: test('should display the correct title', async () => { // test code here }); Check that your test runner is configured correctly: Make sure that your test runner is correctly configured to use Playwright. For example, if you're using Jest as your test runner, you'll need to install the jest-playwright package and add it to your Jest configuration file. Try running your tests from the command line: If you're unable to run your tests from within VS Code, try running them from the command line to see if you get the same error message. You can do this by navigating to the root directory of your project and running the npm test command.

[@aw-or9pl]

@@RaghavPal Hello, thank you very much for the reply. I was able to get fixed. There are two issues/details that were causing this. I'll write it here in case others have the same problem. 1. In order for tests to be found the file name MUST be titled xxx.spec.js (having just xxx.js will not work) 2. If using a device with the Windows OS, the file name in the CLI must have 2 backslashes instead of one. so it should be "npx playwright test .\\tests\\my_first_test.spec.js

[@RaghavPal]

thanks for adding

[@flexunboxing2799]

​@@RaghavPali followed this still no test found

[@flexunboxing2799]

​@@aw-or9plno test found still showing

[@dineshbabuk.a.7127]

Hi Raghav , i followed ur steps but for me test and expect js are missing , how to get it

[@RaghavPal]

Hi Dinesh, If you are using Playwright, you can install and use the jest testing framework along with the expect assertion library to write and run tests 1. Install jest and expect as dev dependencies: npm install --save-dev jest @playwright/test expect 2. Create a test file in your project's tests directory with the following content: const { test, expect } = require('@playwright/test'); test('example test', async ({ page }) => { await page.goto('example.com'); const pageTitle = await page.title(); expect(pageTitle).toBe('Example Domain'); }); 3. Update your package.json file to include a test script that runs jest: { "scripts": { "test": "jest" } } 4. Run your tests using the following command: npm test

[@maddulasaikrishna7586]

hi previous i am using selectors like this Selector('#modal-body').find('table').find('thead').find('tr').nth(1).find('td').nth(0) ,how work like this in playwrite, give me Some example

[@RaghavPal]

Hi Maddula In Playwright, you can use the $() function to select elements using CSS selectors. Here's an example of how you can use CSS selectors to find an element and its child elements: // Find the first td element of the second row in the table inside the modal body const tdElement = await page.$('#modal-body table tbody tr:nth-child(2) td:nth-child(1)'); In this example, we use the page.$() function to select the first td element of the second row in the tbody element of a table inside an element with the id of modal-body. You can also use the $$() function to select multiple elements that match a selector. Here's an example: // Find all the link elements on the page const linkElements = await page.$$('a'); In this example, we use the page.$$() function to select all the a elements on the page. You can also use the waitForSelector() function to wait for an element to appear on the page before interacting with it. Here's an example: // Wait for the modal body element to appear on the page await page.waitForSelector('#modal-body'); // Find the first td element of the second row in the table inside the modal body const tdElement = await page.$('#modal-body table tbody tr:nth-child(2) td:nth-child(1)'); In this example, we use the page.waitForSelector() function to wait for the element with the id of modal-body to appear on the page before selecting the first td element of the second row in the table inside the modal body. I hope this helps!

[@user-tj9ri7zq1d]

Hi sir how can we handle login with otp it would be great help id you can create video for the same

[@RaghavPal]

Hi Kusumdevi, I will check and plan for this

[@wisonwcang8197]

Hi guys,i've follow those step ,but why i get Error: No tests found while running in terminal?

[@RaghavPal]

Check the location of the file in your command, use forward slashes

[@SANVELXRP]

Can you make a video with typescript codegen?

[@RaghavPal]

I will plan.. but will take some time. Let's get you started with Playwright and TypeScript. Here's a step-by-step guide: 1. Install Node.js and npm: Make sure you have Node.js and npm (Node Package Manager) installed on your system. 2. Create a New Project: Open your terminal or command prompt and create a new directory for your Playwright project. Navigate to that directory: ```bash mkdir my-playwright-project cd my-playwright-project ``` 3. Initialize a New Node.js Project: Run the following command to create a `package.json` file: ```bash npm init -y ``` 4. Install Playwright and TypeScript: Install Playwright and TypeScript as development dependencies: ```bash npm install playwright typescript --save-dev ``` 5. Create a TypeScript Configuration File: Create a `tsconfig.json` file in your project directory: ```bash npx tsc --init ``` 6. Write Your First Test: Create a new TypeScript file (e.g., `my-test.ts`) in your project directory. In this file, import Playwright and write your test code. For example: ```typescript import { chromium, Browser, Page } from 'playwright'; describe('My First Playwright Test', () => { let browser: Browser; let page: Page; beforeAll(async () => { browser = await chromium.launch(); page = await browser.newPage(); }); afterAll(async () => { await browser.close(); }); it('should navigate to a website and assert title', async () => { await page.goto('example.com'); const title = await page.title(); expect(title).toBe('Example Domain'); }); }); ``` 7. Run Your Test: Compile your TypeScript code using: ```bash npx tsc ``` Then run your test using: ```bash npx jest my-test.js ``` 8. Generate Tests with Codegen (Optional): Playwright comes with a test generator that can create tests based on your interactions with a website. To use it, follow these steps: - Install the VS Code extension for Playwright. - Record your actions in the browser using the extension. - The extension will generate test code directly in VS Code. - You can also generate assertions for visibility, text, and value. - For more details, refer to the official Playwright documentation That's it! You're all set to write and run Playwright tests with TypeScript. Happy testing --

[@arunkumar-987]

Hi Raghav, I am trying to run the test as shown in the video but I am seeing "Error : No test found" in terminal Can you please guide??

[@RaghavPal]

Arun Try using forward slashes in the path of test file

[@arunkumar-987]

@@RaghavPal Its working, Thanks

[@arvindgidde-patil120]

While running specific test file I am getting an error= No tests found. Please help me to resolve this error

[@RaghavPal]

Arvind The error message "No tests found" means that the Playwright test runner could not find any tests in the file that you are trying to run. There are a few possible reasons why this might be happening: * The file might not contain any tests. * The file might not be a valid Playwright test file. * The file might be in a directory that is not being searched by the Playwright test runner. To troubleshoot this error, you can try the following: * Check the file to make sure that it contains at least one test. * Make sure that the file is a valid Playwright test file. You can do this by checking the file extension. The file extension for Playwright test files is `.spec.ts` or `.spec.js`. * Make sure that the file is in a directory that is being searched by the Playwright test runner. You can do this by setting the `testPath` property in the Playwright configuration file. Here is an example of how to set the `testPath` property in the Playwright configuration file: ``` { "testPath": "./tests" } ``` This will tell the Playwright test runner to search for tests in the `tests` directory. I hope this helps

[@sd-kc9qy]

Hello Raghav. I just followed the exact steps in tutorial 4 but was not able to launch a google page. It gives a report but nothing in there. I ran example test and it seems showing passed. What can cause a problem?

[@sd-kc9qy]

I fixed it. Ignore my message.

[@RaghavPal]

ok

[@ArtbyIra146]

Hi Raghav, Do you have videos on Playwright with TypeScript

[@RaghavPal]

not on playwright, you can follow these tutorials and there will be slight change in syntax that you can get from documentation. In case you need to learn TypeScript can check tutorials here - automationstepbystep.com/

[@ArtbyIra146]

@@RaghavPal Thanks Raghav for replying my query.

[@saadshakil9074]

Total points 9/10

[@RaghavPal]

Great Saad

[@nwanegborobertchinonso9240]

Greetings! I followed your video "Writing Your First Test", I followed all the steps. After writing the creating the test block to run google mine is always running the Playwright page. From the command line when I run -npx playwright test .\my_first_test.spec.js it only returns to running only the the initial test that ran when you run npx playwright test. Why am I experiencing this does it have to do with version?

[@RaghavPal]

Hi Robert There are a few reasons why your Playwright tests might only be running the initial test. * **You are not using the latest version of Playwright.** Playwright is constantly being updated with new features and bug fixes. If you are using an older version of Playwright, it is possible that your tests are not compatible with the latest version. * **You are not using the correct configuration file.** Playwright uses configuration files to control how your tests are run. If you are not using the correct configuration file, it is possible that your tests are not being run correctly. * **You are using the wrong command line argument.** The `npx playwright test` command has a number of command line arguments that can be used to control how your tests are run. If you are using the wrong command line argument, it is possible that your tests are not being run correctly. To resolve this issue, you can try the following: * **Update to the latest version of Playwright.** You can install the latest version of Playwright by running the following command: ``` npm install -g playwright ``` * **Use the correct configuration file.** The default configuration file for Playwright is `playwright.config.js`. If you are using a different configuration file, you need to specify the path to the configuration file when you run the `npx playwright test` command. * **Use the correct command line argument.** The `npx playwright test` command has a number of command line arguments that can be used to control how your tests are run. To run all of your tests, you can use the following command: ``` npx playwright test ``` If you are still having problems, you can try searching for help online or contacting the Playwright support team. Here are some additional tips for troubleshooting Playwright problems: * **Make sure that you are using the latest version of Playwright.** Playwright is constantly being updated with new features and bug fixes. * **Check your system settings.** Make sure that your system has the necessary hardware and software requirements for Playwright. * **Try running your tests in a different environment.** For example, try running them from a command line or from a different operating system. * **Contact the Playwright support team.** If you are still having problems, you can contact the Playwright support team for help I hope this helps

[@user-pi2kd3ld6c]

Hi Sir, y cant i see the test and expect files under @playwright\test under lib..beacuse of which my first tests says not found

[@user-pi2kd3ld6c]

changed to forward slash and it worked

[@RaghavPal]

Great

[@venkatjayakumar1819]

Hi Raghav , request for help . I get no tests found and not able to identify the reason when I click on Enter even though I have done everything as shown by you and there are no typo errors as well in the code and also using the same command as below npx playwright test .\tests\my_first_test.spec.js

[@RaghavPal]

Hi Venkat If you are running Playwright tests using the command npx playwright test, and you are seeing the message "No tests found" even though you have created a test file and the command is correctly pointing to the file, there could be a few possible reasons for this issue. Here are some troubleshooting steps that you can try: Make sure that your test file is located in the correct directory and has the correct file extension. By default, Playwright looks for files with the .spec.js extension in the tests directory. Double-check that your file is named correctly and located in the correct directory. Ensure that your test file contains at least one test case that is exported. A test case is a function that uses the Playwright API to interact with a web page and make assertions. For example: const { test, expect } = require('@playwright/test'); test('My first test', async ({ page }) => { await page.goto('example.com'); const title = await page.title(); expect(title).toBe('Example Domain'); }); Make sure that your test file contains at least one exported test case that is defined using the test() function from the @playwright/test package. Check for any syntax errors or typos in your test file. Even a small typo or syntax error can prevent your tests from running. Use a code editor or an IDE with syntax highlighting to identify any syntax errors or typos in your code. Ensure that you have installed the necessary dependencies. Make sure that you have installed the @playwright/test package and any other dependencies that your test file may require. You can do this by running npm install in your project directory. Try running the test with the --verbose option. Running your test with the --verbose option will give you more detailed output, including any errors that may be preventing your tests from running. Run the following command to run your test with the --verbose option: npx playwright test --verbose .\tests\my_first_test.spec.js If none of these steps resolve the issue, try creating a new, minimal test file and running it with the npx playwright test command to see if the issue persists. This will help you determine whether the issue is with your code or with your environment. I hope these steps help you identify the issue and get your tests running!

[@cg1028]

I also had the same issue, I am using windows PC, then I change the backward slash to forward slash, now it working for me. (npx playwright test ./tests/my_First_test.spec.js).

[@RaghavPal]

Ok, yes on windows you will either need to use double back slash \\ or single forward slash / I will suggest to use single forward slash / as it will work on all OS

[@some5794]

It seems like we can only run tests if we are INSIDE the tests folder. If I am outside it won't run even if I specify the path correctly. Do you know why?

[@RaghavPal]

Hi, It is generally recommended to run Playwright tests from within the tests folder or a subfolder, because Playwright looks for test files in the current working directory However, it is possible to specify the path to the test files when running Playwright, using the *--tests* flag. For example: /*** playwright run --tests path/to/tests ***/ Pls check and let me know if it works

[@some5794]

@@RaghavPal so I’m on the main folder and I am running playwright run -tests ./tests/my-test.spec.js and it doesn’t work it says command not found: a playwright

[@RaghavPal]

Are you running from your project folder? Try command npx playwright test Check options here playwright.dev/docs/running-tests

[@BikerKnight4life]

does this cover cucumber/specflows aswell?

[@RaghavPal]

Not in this session

[@lifechance1]

I have question how to maximize browser while running

[@RaghavPal]

Kishore To maximize the browser window while running tests with Playwright, you can use the `--start-maximized` flag when launching the browser. Here's how you can do it in your Playwright script: For Chromium browsers: ```javascript const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: false, args: ['--start-maximized'] }); const context = await browser.newContext({ viewport: null // Disables the default viewport to allow for maximization }); const page = await context.newPage(); // Your code here })(); ``` For other browsers, you might need to set the window size manually using the `viewport` option or other browser-specific methods[^10^]. Remember to set the `viewport` to `null` to disable the default viewport size and allow the window to maximize. Keep in mind that the `--start-maximized` flag is specific to Chromium-based browsers and may not work with others like Firefox or WebKit. In such cases, you can manually specify the window size using the `viewport` option or use browser-specific methods to maximize the window

[@maddulasaikrishna7586]

i am getting following error : Test timeout of 30000ms exceeded. how to overcome this.

[@RaghavPal]

run the command npx cypress verify if you still see time out error, run it once again, if it still shows same error, goto your project folder and open node_modules folder node_modules\cypress\lib\tasks\verify.js, search for VERIFY_TEST_RUNNER_TIMEOUT_MS and change it from 30000 (default) to 100000. pls check stackoverflow.com/questions/63667880/cypress-verification-timed-out-after-30000-milliseconds

[@user-vq8tv8uz6s]

Hi in playwright\test lib and types are not display. how to add these

[@RaghavPal]

Swati Here are the steps to ensure Playwright types and libraries are displayed correctly in your development environment: 1. Installation: - Using npm: ```bash npm install --save-dev @playwright/test ``` - Using yarn: ```bash yarn add --dev @playwright/test ``` 2. IDE Configuration: - Visual Studio Code: - Install the "TypeScript and JavaScript Language Features" extension (if not already installed). - Restart VS Code to ensure type recognition. - Other IDEs: - Consult their documentation for specific configuration instructions regarding TypeScript support. 3. Import Statements: - Use correct import statements in your test files: ```javascript import { test, expect } from '@playwright/test'; ``` 4. TypeScript Configuration (if applicable): - Create a `tsconfig.json` file at the root of your project with basic settings: ```json { "compilerOptions": { "target": "ES2017", "module": "commonjs", "baseUrl": ".", "types": ["@playwright/test"] } } ``` Additional Troubleshooting: - Check TypeScript Version: Ensure you're using TypeScript version 4.4 or higher for full Playwright support. - Clear Cache and Restart: If issues persist, try clearing your IDE's cache and restarting it. - Manual Type Installation: If type recognition remains problematic, install types manually: ```bash npm install --save-dev @types/playwright ```

[@user-hr6qt3kq6c]

Hi Raghav, I don't see lib under my playwright/tests

[@RaghavPal]

Anjali The `lib` directory is not included in the default installation of Playwright. It is a custom directory that you can create to organize your own Playwright test utilities and code. If you need to use a `lib` directory, you will need to create it yourself. Here are the steps on how to create a `lib` directory and add it to your Playwright test project: 1. Create a new directory named `lib` within your test project directory. 2. Move any test utilities or code that you want to reuse across multiple test files into the `lib` directory. 3. In your test files, import the utilities or code from the `lib` directory using the following syntax: ```javascript const myUtility = require('./lib/myUtility'); ``` This will allow you to use the `myUtility` function from the `lib` directory in your test file. Using a `lib` directory can help you organize your Playwright test code and make it easier to reuse common utilities across multiple tests

[@syedasadhussain1141]

Hi Raghav, I stored my test in the tests directory but when I try to run it always complains of not finding the tests. Any suggestion for it please? Test directory path: C:\auto\tests npx playwright test .\tests\mylogin.spec.js Running 0 tests using 0 workers ================= no tests found. When I am running the example.spec.js from the same folder it runs fine. Running 3 tests using 2 workers 3 passed (9s) Thanks, Syed

[@RaghavPal]

Hi Syed, check the command, in the command try to give full location of the test file

[@ahadjamshed7135]

@@RaghavPal Same issue is coming to my end. I have created a new file name my_first.spec.js under the tests folder and I ab trying to run the below code const {test, expect} = require ('@playwright/test'); test('My first test ' , async ({page})=> { await page.goto('www.google.com/') await expect(page).toHaveTitle("Google"); }); and I am running this command --- npx playwright test .\tests\my_first.spec.js This output is coming Running 0 tests using 0 workers ================= no tests found. ================= Please help to resolve this issue Thank you

[@RaghavPal]

In the configuration file, check the option testDir and see what is mentioned here

[@ahadjamshed7135]

@@RaghavPal This is mentioned in the config file testDir: './tests', But one thing that is my config file extension is ts and my other file extension is js. is it the reason behind this issue?

[@Apw20112010]

I'm having this exact same issue, even when I have copied everything word for word in the video it says zero tests.

[@Ghope138]

Hello, I have followed the instructions, but am encountering an internal error for webkit. "Error: page.goto: WebKit encountered an internal error". What might be my mistake here?

[@RaghavPal]

GH There are a few possible reasons why you might be encountering an internal error for WebKit in Playwright: *A bug in Playwright or WebKit.* It is possible that there is a bug in Playwright or WebKit that is causing the error. If you are using the latest version of Playwright and WebKit and you are still getting the error, you can try reporting it to the Playwright team *A problem with your environment.* It is also possible that there is a problem with your environment that is causing the error. For example, if you are using a proxy server, the proxy server may be blocking the connection to WebKit *A problem with your test code.* It is also possible that there is a problem with your test code that is causing the error. For example, if you are trying to go to a website that does not exist, you will get an error To troubleshoot the error, you can try the following steps: 1. Make sure that you are using the latest version of Playwright and WebKit. 2. Check your environment to make sure that there are no problems with your proxy server or other network settings. 3. Try running your test code on a different browser, such as Chromium or Firefox. If the test code runs successfully on a different browser, then the problem is most likely with WebKit. 4. If you are still getting the error, you can try debugging your test code to see where the error is occurring. If you are unable to resolve the error, you can try searching for help online or contacting the Playwright team. Here are some additional tips for avoiding this error: * Make sure that you are using the correct browser version. Playwright only supports certain versions of each browser. You can check the supported browser versions on the Playwright website. * Make sure that you are using the correct browser binary. Playwright needs to be able to find the browser binary in order to launch the browser. You can set the `PLAYWRIGHT_BROWSER_BINARY` environment variable to specify the location of the browser binary. * Make sure that you are not trying to do anything that is not supported by the browser. For example, if you are trying to use a feature that is only available in Chromium, you will get an error if you use WebKit. I hope this helps

[@Ghope138]

@@RaghavPal thank you very much for such an in depth reply. Sincerely appreciated

[@shylajagovind7411]

Hello sir wat does worker actually mean ..is it a process ..

[@RaghavPal]

Shylaja Yes, in Playwright, a worker is a separate process that runs test scripts in parallel. This parallelism helps improve the overall performance of test execution by distributing the workload across multiple processes. Each worker runs its own instance of the browser and executes test scripts independently. Here's a more detailed explanation of how workers function in Playwright: 1. **Worker Initialization:** When you start a Playwright test run, Playwright creates a pool of worker processes. The number of workers is determined by various factors, including the number of available CPU cores, the complexity of your test scripts, and the specified configuration options. 2. **Script Distribution:** As tests are discovered, Playwright assigns them to available workers. This distribution aims to balance the workload across workers and ensure efficient resource utilization. 3. **Parallel Execution:** Each worker executes the assigned test scripts in parallel. This means that multiple tests can be running simultaneously across different workers, significantly reducing the overall execution time. 4. **Communication and Synchronization:** Workers communicate with the Playwright test runner to report results, handle errors, and synchronize execution. This ensures that the test run proceeds in an organized and controlled manner. 5. **Termination and Cleanup:** Once all tests have completed, Playwright gracefully terminates the workers and cleans up any associated resources. This helps maintain system stability and prevent resource leaks. The use of workers is a crucial aspect of Playwright's performance and scalability. By leveraging parallel execution, Playwright can significantly reduce test execution times, especially for large or complex test suites. This makes Playwright an ideal choice for automating web applications that require rapid feedback and continuous testing. In summary, workers in Playwright are separate processes that execute test scripts in parallel, enabling efficient and scalable test automation for web applications.

[@meghana1229]

Hi Raghav, Can we use Playwright with IntelliJ and Gradle ?

[@RaghavPal]

you can Meghana

[@meghana1229]

@@RaghavPal ok Thanks

[@lavanyakata3061]

Hi Raghav!! Any reference for meghana’s question

[@meghana1229]

@@lavanyakata3061 Yes we can Lavanya, but use Maven instead of Gradle, that is more feasible.

[@monushh]

Surprised by my score but got all 10 correct:)

[@RaghavPal]

Great Mohan

[@user-qn6mq4mc6l]

Hi sir I need to one help how to use in Java from Playwright plz reply me sir i will wait for your reply

[@RaghavPal]

Hi Praveen Here are the steps on how to use Playwright in Java: 1. Install the Playwright Java library. You can do this using the following command: ``` mvn install playwright-java ``` 2. Create a new Java project. 3. Add the Playwright Java library to your project's dependencies. 4. Create a new class that will use Playwright. 5. In your class, create a new instance of the `Playwright` class. 6. Use the `Playwright` class to create a new browser instance. 7. Use the browser instance to navigate to a website. 8. Use the browser instance to interact with the website. 9. Close the browser instance. Here is an example of a Java code that uses Playwright: ```java import com.microsoft.playwright.*; public class PlaywrightExample { public static void main(String[] args) { Playwright playwright = Playwright.create(); Browser browser = playwright.chromium().launch(); Page page = browser.newPage(); page.navigate("www.google.com"); System.out.println(page.title()); browser.close(); } } ``` This code will open a new Chromium browser and navigate to the Google website. The code will then print the title of the Google website to the console. Finally, the code will close the browser. I hope this helps

[@maddulasaikrishna7586]

how to apply wait ,my application need time to load for 5 seconds,so how to apply explicit wait in middle of the code, i applied this await page.waitForTimeout(80000); but i am getting error like Pending operations: - page.waitForTimeout at tests\Example123.spec.js:44:14 how to resolve this

[@RaghavPal]

Hi Maddula The error message you are seeing suggests that there are some pending operations that need to be completed before the page.waitForTimeout() function can be executed. This can happen if there are some previous asynchronous operations that have not yet completed. One way to resolve this issue is to use an async function and await on all the previous asynchronous operations before calling page.waitForTimeout(). Here's an example: async function myTest() { // Navigate to the page await page.goto('www.example.com'); // Do some other asynchronous operations await page.click('button#myButton'); await page.waitForSelector('div#myDiv'); // Wait for 5 seconds using page.waitForTimeout() await page.waitForTimeout(5000); // Do some more operations await page.type('input#myInput', 'Hello World'); await page.click('button#submit'); } // Call the function to run the test myTest(); In this example, we use an async function myTest() to perform our test. Within the function, we navigate to a page, perform some asynchronous operations, and then wait for 5 seconds using page.waitForTimeout(). Finally, we perform some more asynchronous operations. By using await on all asynchronous operations before calling page.waitForTimeout(), we ensure that any pending operations are completed before waiting for the specified time. This should help resolve the error you are seeing.

[@poornimaa2246]

Hi sir ... npx playwright test command is running But npx playwright test .\tests\demo.spec.js command is showing "no tests found" ... Specific file is not running????

[@RaghavPal]

Hi Poornima If the command npx playwright test .\tests\demo.spec.js is showing "no tests found," it typically indicates that there are no test cases defined in the specified file or the file is not recognized as a valid test file. Here are a few things you can check to resolve the issue: Verify the test file path: Make sure the file path .tests\demo.spec.js is correct and matches the actual location of your test file. Double-check for any typos or incorrect directory structures. Check the test file content: Ensure that the test file (demo.spec.js) contains valid test cases written using the Playwright test API. Each test case should be defined using the test function provided by Playwright. For example: const { test, expect } = require('@playwright/test'); test('Test case name', async ({ page }) => { // Test steps and assertions }); Confirm the correct test runner: Ensure that you are using the Playwright test runner to execute the tests. The npx playwright test command is specifically designed to run Playwright tests. If you're using a different test runner, such as Mocha or Jest, the command and syntax might differ. Check the test file extension: Playwright test files typically use the .spec.js or .test.js file extension. Verify that the test file you're trying to run has the correct extension and is recognized by the test runner. Validate the Playwright installation: Make sure you have installed Playwright and its dependencies correctly. Run npx playwright install to ensure all necessary components are set up properly. By checking these points, you should be able to identify and resolve any issues preventing the specific test file from running successfully using the npx playwright test command.

[@poornimaa2246]

@@RaghavPal I'm not able to run sir

[@RaghavPal]

will need more details. Also try getting online help

[@poornimaa2246]

@@RaghavPal ok sir .. thank you for your response

[@abdoubouji3138]

i dont know why when i try to run npx playwright test .\tests\example.spec.js it shows no tests found always

[@RaghavPal]

Hi Abdou There are a few reasons why you might be getting the "No tests found" error when you run `npx playwright test .\tests\example.spec.js`. * The file `example.spec.js` might not be a valid Playwright test file. Playwright test files must have a `.spec.js` or `.spec.ts` extension, and they must contain a `describe()` block with one or more `it()` blocks. * The file `example.spec.js` might not be in the `tests` directory. Playwright will only look for tests in the `tests` directory by default. * The file `example.spec.js` might not be executable. Playwright will only run tests that are executable. To troubleshoot the "No tests found" error, you can try the following: * Check the file extension of `example.spec.js`. Make sure that it is either `.spec.js` or `.spec.ts`. * Check the directory of `example.spec.js`. Make sure that it is in the `tests` directory. * Check the permissions of `example.spec.js`. Make sure that it is executable. If you have checked all of these things and you are still getting the "No tests found" error, then you can try the following: * Use the `-w` flag to specify the directory where Playwright should look for tests. For example, you would run the following command to look for tests in the `tests` directory: ``` npx playwright test -w .\tests ``` * Use the `-t` flag to specify a glob pattern for matching test files. For example, you would run the following command to match all test files that have a `.spec.js` or `.spec.ts` extension: ``` npx playwright test -t *.spec.js *.spec.ts ``` I hope this helps

[@cosminmatic5987]

@@RaghavPalHi Raghav! Thank you for your great effort! I got the same issue. Could you please let me know how to do these: "they must contain a `describe()` block with one or more `it()` blocks." and "Check the permissions of `example.spec.js`. Make sure that it is executable."

[@CURIOSITYcapital]

Light theme maan...this hurts my eyes..good video

[@RaghavPal]

Okay, but i found that light theme has more clarity for watching tutorials and for your personal use you can use dark theme

[@stw1315]

Hi I keep getting Error: No tests found and I am trying to run test the file :(

[@RaghavPal]

In the command give path of your test file with single forward slashes /. Make sure the path is correct. One way of doing it is that you type the first few characters of the folder/file name and press tab and let it auto complete

[@manojkumar-wt2sv]

Hello sir, I am trying to create the same test but in terminal its showing Running 0 tests using 0 workers. Please help

[@RaghavPal]

Hi Manoj, pls check from where you are running the command. Run npx playwright test from tests folder

[@sarvanandachandrashekaraia4322]

@@RaghavPal Even after running from test folder and following all the steps tat you have shared. Still I'm getting 0 tests found issue. Please advice

[@alexischrysaphis5492]

@@sarvanandachandrashekaraia4322 The solution: run from the 'tests' folder and type this command 'npx playwright test example.spec.js', without the directories! that solved it for me

[@madhuraiyengar3517]

I am getting the same error, how did u resolve it?

[@stevehuntley9560]

It took me a while to figure out as a novice... but I gathered that as the config file had testDir set to ./tests you just needed to put the test name.... npx playwright test .\my_first_test.spec.js

[@user-ip5py1ve9o]

Hi Raghav, why we include the spec word in our file name

[@RaghavPal]

Haris The word `spec` in a Playwright test file name is a convention that is used to identify the file as a test file. This convention is not required, but it is recommended because it makes it easier to find and organize test files. There are a few benefits to including the `spec` word in Playwright test file names: * It makes it easier to identify test files at a glance. When you are looking through a directory of files, it is easier to spot files that end in `.spec.js` or `.spec.ts`. * It helps to organize test files into a logical structure. For example, you can group test files by feature or by test type. * It is compatible with other test frameworks and tools. Many other test frameworks, such as Jasmine and Mocha, also use the `spec` convention for test file names. This makes it easier to integrate Playwright tests with other test frameworks and tools.

[@user-ip5py1ve9o]

@@RaghavPal Now I understood. Thank you for your quick response.

[@ahmethalal6926]

Hi Raghav, If I use import in place of const for importing file, it does not wordk, Const does work, What are I'm missing? my_first_test.spect.js: const {test,expect} = require ('@playwright/test') //const {hello,helloworld} = require('./demo/hello')

[@RaghavPal]

Hi Ahmet If you want to use import instead of require in your Playwright test file, you need to use the ESM (ECMAScript modules) format. Here are the steps to follow: Create a package.json file in the root of your project and add the following line: "type": "module" This tells Node.js that you want to use ECMAScript modules. Change the file extension of your test file from .js to .mjs. Update your import statement to include the file extension: import {hello, helloworld} from './demo/hello.mjs' Run your test with the --experimental-modules flag: node --experimental-modules my_first_test.spec.mjs This should allow you to use import statements in your Playwright test file.

[@ngayathri1818]

9 out of 10

[@RaghavPal]

All the best for next

[@maddulasaikrishna7586]

Hi Raghav Pal why we are using file name as My_First_Test.spec.js ,why we won't use directly My_First_Test.js, i mean in testcafe i have used like My_First_Test.js. i have tried My_First_Test.js like this it is giving error in playwright, when i given My_First_Test.spec.js then only it is working.

[@RaghavPal]

Hi Maddula, check the naming convention in config file

[@bhagyalakshmibadiginchala38]

Hi Ragav, I have used this code but I dont know why Iam getting the error as like below when i run. Please correct where I did wrong. Code: const{test,expect}=require('@playwright/test') //const{hello,helloworld}=require('./demo/hello') import {hello,helloworld} from './demo/hello' console.log(hello()); console.log(helloworld()); In the terminal error response: node:45300) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use `node --trace-warnings ...` to show where the warning was created) C:\Users\003S6M744\Desktop\Automation_stepBystep_playwright\video4_firsttest\tests\myfirstspectest.js:3 import {hello,helloworld} from './demo/hello' ^^^^^^ SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:73:18) at wrapSafe (node:internal/modules/cjs/loader:1178:20) at Module._compile (node:internal/modules/cjs/loader:1220:27) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) at node:internal/main/run_main_module:23:47 Node.js v18.16.1

[@RaghavPal]

Hi Bhagyalakshmi The error message "SyntaxError: Cannot use import statement outside a module" means that you are trying to use the `import` statement outside of a module. This is not allowed in JavaScript, because the `import` statement is used to load modules. To fix this error, you need to make sure that your code is inside of a module. You can do this by adding the `module` keyword to the top of your file. For example: ``` module.exports = { hello: function() { return "Hello, world!"; }, helloworld: function() { return "Hello, world again!"; }, }; ``` Once you have added the `module` keyword, you will be able to use the `import` statement to load your module. For example: ``` import {hello, helloworld} from './demo/hello'; console.log(hello()); console.log(helloworld()); ``` This code will now work without any errors. The warning message "To load an ES module, set "type": "module" in the package.json or use the .mjs extension" is just a warning, and it will not prevent your code from running. However, if you want to be able to use the `import` statement in your code, then you will need to set the `type` property in your package.json file to "module". You can also use the .mjs extension for your files, which will automatically set the `type` property to "module". I hope this helps

[@bhagyalakshmibadiginchala38]

@@RaghavPal Still I could not get the output. Please find my code below. tests>demo>moduleexports.mjs file module.exports = { hello: function() { return "Hello, world! module.exports"; }, helloworld: function() { return "Hello, world again! module exports"; } }; tests>mimport.js file import {hello, helloworld} from './demo/moduleexports'; console.log(hello()); console.log(helloworld()); package.json { "name": "video4_firsttest", "version": "1.0.0", "description": "", "main": "index.js", "type": "module", "scripts": {}, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@playwright/test": "^1.36.2" } } error in the output node:internal/errors:490 ErrorCaptureStackTrace(err); ^ Error [ERR_MODULE_NOT_FOUND]: Cannot find module '\Automation_stepBystep_playwright\video4_firsttest\tests\demo\moduleexports' imported from \Desktop\Automation_stepBystep_playwright\video4_firsttest\tests\mimport.js at new NodeError (node:internal/errors:399:5) at finalizeResolution (node:internal/modules/esm/resolve:326:11) at moduleResolve (node:internal/modules/esm/resolve:945:10) at defaultResolve (node:internal/modules/esm/resolve:1153:11) at nextResolve (node:internal/modules/esm/loader:163:28) at ESMLoader.resolve (node:internal/modules/esm/loader:838:30) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18) at ModuleWrap. (node:internal/modules/esm/module_job:77:40) at link (node:internal/modules/esm/module_job:76:36) { code: 'ERR_MODULE_NOT_FOUND' } Node.js v18.16.1

[@RaghavPal]

will need to take online help on this

[@kmeena1784]

How much JavaScript knowledge and how much javascript should we learn for learning playwright ?

[@RaghavPal]

Playwright is a JavaScript-based automation testing framework, so it is important to have a decent understanding of JavaScript in order to use it effectively. However, you don't need to be an expert in JavaScript to learn Playwright. Here are some of the JavaScript concepts that you should be familiar with before learning Playwright: * Variables * Functions * Objects * Arrays * Control flow statements (if/else, for, while) * Classes * Regular expressions In addition to these concepts, you should also be familiar with the following JavaScript libraries and APIs: * DOM API: The DOM API allows you to interact with web pages. * Fetch API: The Fetch API allows you to make HTTP requests. * Promises: Promises are a way to handle asynchronous code. If you have a basic understanding of JavaScript, then you should be able to learn Playwright fairly quickly. There are many resources available online that can teach you how to use Playwright. Here are some specific recommendations for learning JavaScript for Playwright: *Take an online course:* There are a number of online courses available that teach JavaScript for beginners. These courses can be a great way to learn the basics of JavaScript and get up to speed quickly.
 *Read a JavaScript tutorial:* There are also a number of JavaScript tutorials available online. These tutorials can be a great way to learn specific aspects of JavaScript, such as the DOM API or the Fetch API.
 *Work on some JavaScript projects:* The best way to learn JavaScript is by doing. Try to work on some JavaScript projects on your own to solidify your understanding of the language. Once you have a good understanding of JavaScript, you can start learning Playwright. There are many resources available online that can teach you how to use Playwright. Here are some specific recommendations for learning Playwright: *Read the Playwright documentation:* The Playwright documentation is a great resource for learning how to use the framework. It covers all aspects of Playwright, from getting started to writing complex test scripts.
 *Follow Playwright tutorials:* There are a number of Playwright tutorials available online. These tutorials can be a great way to learn specific aspects of Playwright, such as how to write test scripts for different types of web pages or how to use Playwright's advanced features.
 *Contribute to Playwright open source projects:* The Playwright team is always looking for help with open source projects. Contributing to a Playwright open source project is a great way to learn the framework and get involved in the community. With a basic understanding of JavaScript and some experience with Playwright, you will be well on your way to becoming a successful Playwright automation tester.

[@minivlogsofisra5883]

Thanks for this videos, while running test npx playwright test .\tests\my_firsttest.spec.js its showing Error: No tests found. how to clear this issue

[@RaghavPal]

Hi If you are getting an error "No tests found" while running the Playwright test, it may be due to several reasons: Make sure you have defined at least one test case in your test file. For example, in your case, "my_firsttest.spec.js" should contain at least one test case. Check the path of your test file. Make sure the file path is correct and the file is located in the specified directory. Check if the file name and the test function name starts with the word 'test'. For example, your test function should look like this: test('My Test Case', async () => { // Your test code here }); If you have multiple test files, make sure that you have included them correctly in the test command. For example, you can use a wildcard to run all test files in the directory as follows: npx playwright test tests/*.spec.js Check if you have installed Playwright and its dependencies correctly. Finally, try running the test command again after restarting the terminal or IDE. If none of the above solutions work, please share your test file code and the command you are running for more detailed assistance.

[@3VAudioVideo]

Please record in at least 1080P and upload the same. Even with my 27" screen, your code is hard to read. I thought all your newer videos were, but sometimes your older videos are in higher resolution. Thanks.

[@RaghavPal]

I will check on this and take care for future videos

[@3VAudioVideo]

@@RaghavPal Thank you so much!! Your content is amazing! I always go to it for learning automation!