Playwright Beginner Tutorial 4 | How to write 1st Test

[@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

[@alive4metal731]

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

[@RaghavPal]

Glad to know this helped

[@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

[@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

[@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

[@HarishRaoS]

Thanks for these videos. Very thorough intro to Playwright

[@RaghavPal]

You're very welcome!

[@travelspiceskids296]

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

[@RaghavPal]

Thanks, humbled..

[@sinthujaa]

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

[@RaghavPal]

Excellent Sinthuja

[@PraveenK-x7j]

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

[@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

[@meghahanda1205]

Hey Raghav! Like you see a detailed report at 21:26, I don't see that. I have just been getting the final passed or failed update in the terminal. What needs to be done? I am new to learning a code-based automation tool

[@RaghavPal]

Megha it's likely because you're missing an assertion. An assertion is a statement that verifies that something is true about your application. To fix the issue and see a detailed report try adding an assertion to your test -

[@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..

[@learning-Neha]

thank u so much for such thorough explanations!

[@RaghavPal]

You're very welcome Neha

[@revivecoding]

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

[@RaghavPal]

You are most welcome

[@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

[@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

[@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

[@vishalsah525]

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

[@RaghavPal]

Well done Vishal

[@ankitanag6753]

Getting this 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. I tried in new terminal as well, Please help.

[@RaghavPal]

Ankita Try to give single forward slashes / in your path in the command e.g. npx playwright test ./tests/first.spec.js If this does not work check other things as follows: 1. Check Test File Path: Ensure that your test files are located in the correct directory. By default, Playwright looks for test files in the `tests` folder. Make sure your test file is in the right place 2. Test File Naming Convention: Your test files should be suffixed with either `.spec.js` or `.test.js`. For example, if your file is named `first.js`, rename it to `first.spec.js` or `first.test.js`. Playwright expects this naming convention for test files 3. Run Tests with Correct Path: When running tests, specify the correct path to your test file. Use the relative path from the root of your project. For example: ```bash npx playwright test ./tests/first.spec.js ``` 4. Escape Characters: If your test file path contains special characters like spaces, make sure to escape them properly. Enclose the path in quotes if needed: ```bash npx playwright test "./tests/my test file.spec.js" ``` 5. Configuration Check: Double-check your Playwright configuration (e.g., `playwright.config.js`). Ensure that the `testDir` property points to the correct folder where your test files reside. -

[@ankitanag6753]

@@RaghavPal thanks it worked.

[@PritiAndhale222]

thanks for such detailed explanation.

[@RaghavPal]

Most welcome Priti

[@zwiterrion12]

Thank you. Quiz Score 9/10

[@RaghavPal]

Great Kelly.. keep learning

[@jonmackie3859]

I have followed all of your steps exactly, I have the latest playwright version, and I do not see the lib list under node_modules\@playwright\test. How do I correct this? I am also getting prompted that several extension are deprecated. The only way I could get the test in the lesson 4 was to run is using: import {test, expect} from '@playwright\test. Is there an update version of this series?'

[@RaghavPal]

Jon Let's break down the issue step by step and find a solution. Issue 1: Missing `lib` list under `node_modules\@playwright\test` This issue is likely due to the fact that the `@playwright/test` package has undergone significant changes in recent versions. Starting from Playwright 1.25, the `test` package has been restructured, and the `lib` folder is no longer present. Solution: You don't need to worry about the missing `lib` folder. The new structure of `@playwright/test` is designed to work without it. You can simply ignore this issue and move on to the next one. Issue 2: Deprecated extensions When you run your tests, you're seeing warnings about deprecated extensions. This is because some of the extensions you're using are no longer supported or have been replaced by newer alternatives. Solution: To resolve this issue, you'll need to update your code to use the latest, non-deprecated extensions. You can do this by: 1. Checking the Playwright documentation for the specific extensions you're using to see if they've been deprecated or replaced. 2. Updating your code to use the recommended alternatives. 3. If you're using a specific plugin or library that's causing the deprecation warnings, check if there's an updated version available that's compatible with the latest Playwright version. Issue 3: Importing `test` and `expect` from `@playwright/test` You've found a workaround by importing `test` and `expect` from `@playwright/test` using the following line: ```javascript import { test, expect } from '@playwright/test'; ``` This is the correct way to import these modules in the latest Playwright version. Solution: You're already doing this correctly.. This import statement is the recommended way to use `test` and `expect` in your Playwright tests Additional Tips: * Make sure you're running the latest version of Playwright by checking your `package.json` file or running `npm install @playwright/test@latest` (or `yarn add @playwright/test@latest` if you're using Yarn). * If you're still experiencing issues, try deleting your `node_modules` folder and running `npm install` (or `yarn install`) again to ensure you have the latest dependencies. * Take a look at the Playwright documentation and examples to ensure you're using the latest best practices and APIs. I hope this helps -

[@jarvisfriday7452]

Hi Raghav am unable to see the execution in GUI, i think it is running headless. Can you please tell me how can i execute in headed?

[@RaghavPal]

Jarvis Just add this when you launch your browser: const browser = await chromium.launch({ headless: false }); Use code with caution. This tells Playwright to open a visible browser window. Easy peasy Remember: Playwright usually runs without showing the browser (it's faster that way) So, only use *headless: false* when you actually need to see what's going on Also, you can swap out chromium for firefox or webkit if you prefer a different browser -

[@jarvisfriday7452]

@@RaghavPal Thanks for the quick response:) am facing this below issue after adding the above code. SyntaxError: await is only valid in async functions and the top level bodies of modules 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. can you please help here?

[@RaghavPal]

Jarvis Okay, looks like adding headless: false is causing a bit of a hiccup. The error "SyntaxError: await is only valid in async functions" means you're trying to use the await keyword outside of an asynchronous function. Here's how you can fix it: Wrap it in an async function: You need to make sure the code that launches the browser and uses await is inside an async function. Here's a quick example: JavaScript import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { // Launch the browser in headed mode (with a visible window) const browser = await chromium.launch({ headless: false }); const context = await browser.newContext(); const page = await context.newPage(); await page.goto('playwright.dev/'); const title = page.locator('.navbar__inner .navbar__title'); await expect(title).toHaveText('Playwright'); // Close the browser when the test is done await browser.close(); }); Use code with caution. Key points: The test function itself is already async, so you can directly use await inside it. We've added await browser.close() at the end to make sure the browser window closes properly after the test finishes Give that a try, and hopefully, you'll be able to see the browser window and your test execution in action -

[@jaswantpadyala]

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

[@RaghavPal]

Jaswant As of now I have not create Playwright with Typescript

[@sagarikamandal8977]

Easy to understand and score is 10/10

[@RaghavPal]

Great score Sagarika

[@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

[@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!

[@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.

[@nidhigupta8960]

After learning Playwright , do I still need to learn mobile testing tool Appium as well?

[@RaghavPal]

Nidhi Great question! Both Playwright and Appium are powerful tools, but they serve different purposes. Playwright is primarily designed for web application testing across different browsers and platforms. It excels in automating web interactions and is known for its speed and reliability in handling modern web applications Appium, on the other hand, is specifically tailored for mobile app testing. It supports testing of native, hybrid, and mobile web applications on both iOS and Android platforms. Appium's cross-platform capabilities and large community support make it a versatile choice for mobile testing If your focus is on web applications, Playwright might be sufficient. However, if you need to test mobile applications, learning Appium would be beneficial. It really depends on your specific testing needs and the platforms you are targeting. -

[@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 --

[@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

[@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

[@NicolaeDaian-x1y]

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

[@AralaThulasi]

Can you upload videos for writing tests with Typescript?

[@RaghavPal]

I will check on this

[@cosminmatic5987]

Hi Raghav! Thank you for your effort! Need to mention that when i run npx playwright test .\tests\my_first_test.spec.js i got 'No tests found' error. When i run npx playwright test ./tests/my_first_test.spec.js instead it worked. So '/' instead of '\' was the solution

[@RaghavPal]

Thanks for sharing

[@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

[@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

[@usharh1893]

Hi Raghav , I am getting this error when trying to run the tests Uncaught Error error: Playwright Test did not expect test() to be called here

[@RaghavPal]

Usha The error "Playwright Test did not expect test() to be called here" usually occurs when you're trying to use the test() function outside of a test file or in a context where Playwright Test doesn't expect it. Here are a few possible reasons for this error: Missing test import: Make sure you've imported the test function from @playwright/test in your test file. import { test, expect } from '@playwright/test'; Incorrect file naming: Playwright Test expects test files to have a specific naming convention. Make sure your test file ends with .spec.js or .spec.ts. Test file not in the correct directory: Playwright Test looks for test files in the tests directory by default. If your test file is not in this directory, you need to specify the correct directory in your playwright.config.js file. module.exports = { // ... testDir: 'path/to/your/tests', }; Using test() in a non-test file: If you're trying to use the test() function in a non-test file (e.g., a utility file), you'll get this error. Move the test() call to a test file or use a different testing framework. Nested test() calls: You can't call test() inside another test() function. If you need to nest tests, use the describe() function instead. test.describe('my test suite', () => { test('my test', async ({ page }) => { // ... }); }); Playwright Test version mismatch: If you're using an older version of Playwright Test, you might encounter this error. Try updating to the latest version. To troubleshoot, try the following: Check your test file naming and directory structure. Verify that you've imported the test function correctly. Make sure you're not using test() in a non-test file. If you're still stuck, try updating Playwright Test to the latest version. -

[@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.

[@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

[@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..

[@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.

[@andibm5623]

thanks a lot Raghav!

[@RaghavPal]

Most welcome

[@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.

[@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.

[@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

[@HoodByHeir]

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

[@AadiShirishShweta]

Hello Mitch and team, this can happen even when Test files are recognized by their name endings, such as .spec.js, .test.js, etc., for TypeScript and other languages. If you have named your test files in the required format, then it is fine; otherwise, they will not be recognized, and an error will be thrown. Example: If your test file has the name myPlayrightTest.js without the .test.js or .spec.js suffix then you will face the same issue. Change your file name to myPlayrightTest.spec.js or myPlayrightTest.test.js

[@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.

[@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.

[@zarinhaque2656]

I'm trying to run the default Playwright example test .\tests\example.spec.js, but I'm encountering the error 'No tests found.' How can I troubleshoot this issue and ensure that Playwright recognizes the test case? @Automation Step by Step

[@RaghavPal]

Zarin Try to give a single forward slash in the test file path in your command, like:" test ./tests/example.spec.js,

[@RaghavPal]

Neetu can check this AWS Cloud Practitioner: A basic course that introduces cloud computing concepts and AWS services Cloud Computing: The Technical Essentials: Covers the technical basics required before learning about Cloud Computing Zero to Hero in Cloud Computing Essentials With Azure: Focuses on cloud computing concepts with a focus on Microsoft Azure A Practical Introduction to Cloud Computing: A practical introduction to cloud computing concepts Can check this: medium.com/javarevisited/10-free-courses-to-learn-cloud-computing-for-beginners-4f3cd984ddb1 onlinedegrees.sandiego.edu/top-online-cloud-computing-courses/

[@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!

[@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

[@ArtificialIntelligence-u3z]

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.

[@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

[@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. ..

[@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. ..

[@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

[@meelai9]

For anyone facing the below error , save the test before running it :) "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."

[@RaghavPal]

Thanks for adding Sumithra

[@AnjaliSingh-h7c]

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

[@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

[@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

[@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

[@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.

[@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

[@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

[@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.

[@jakiullahansari9145]

node .\test\FirstTest.js is not working on my terminal but npx playwright test FirstTest.spec.js this will work can you please explain why?

[@RaghavPal]

Let's troubleshoot this. 1. File Naming Convention: - Playwright Test expects test files to be suffixed with either `.spec.js` or `.test.js`. Make sure your `FirstTest.js` file follows this convention. - If it doesn't, consider renaming it to `FirstTest.spec.js` or `FirstTest.test.js`. 2. Configuration File: - Check if you have a configuration file (usually named `playwright.config.js` or similar) in your project. - Ensure that you're not calling `test.describe()` directly in the configuration file. Test descriptions should be in separate test files. - Also, avoid calling `test.describe()` in files imported by the configuration file. 3. Dependencies: - Verify that you're using the correct version of `@playwright/test`. - Sometimes having different versions of `@playwright/test` can cause issues. Ensure consistency across your dependencies. 4. Test Match Patterns: - If you're using a custom test match pattern, make sure it's correctly configured in your `playwright.config.js`. - By default, Playwright Test runs tests from files matching `(test|spec)`. -

[@KusumdeviVishwakarma-i3g]

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

[@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!

[@PayalKapopara]

why i am getting this error in vs: PS C:\Users\payal\plywright_Automation> node.tests\firstdemotest.spec.js node.tests\firstdemotest.spec.js : The module 'node.tests' could not be loaded. For more information, run 'Import-Module node.tests'. At line:1 char:1 + node.tests\firstdemotest.spec.js + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (node.tests\firstdemotest.spec.js:String) [], CommandNotFoundException + FullyQualifiedErrorId : CouldNotAutoLoadModule

[@RaghavPal]

Payal The error message you're encountering, "The module 'node.tests' could not be loaded," indicates that there's an issue with module resolution in your Playwright test setup. Let's explore some potential solutions: 1. Check Your Test File Path: - Ensure that the path to your test file (`firstdemotest.spec.js`) is correct. - Double-check that the file exists in the specified location (`node.tests` folder). 2. Verify Your Test Configuration: - Open your `playwright.config.js` (or `playwright.config.ts`) file. - Make sure the `testDir` property points to the correct folder where your test files are located. - For example: ```javascript export default { testDir: './path/to/your/tests', // Adjust this path // Other configuration options... }; ``` 3. Transpilation and Module Resolution: - If you're using TypeScript, Playwright may not consider your `tsconfig.json` when transpiling your TypeScript files. This can lead to issues with custom path mappings. - To address this, consider transpiling your TypeScript manually before running the tests. You can do this using the `tsc` command or other build tools. - For further reference, see this [upstream issue](github.com/microsoft/playwright/issues/7121). 4. Check Dependencies and Imports: - Verify that your test file imports Playwright correctly: ```javascript // Example import in your test file import { chromium } from 'playwright'; ``` - Also, ensure that any custom modules (such as `@common/common`) are correctly imported and available. 5. Install Dependencies: - Make sure you have all the required dependencies installed. Run: ```bash npm install ``` - Check your `package.json` to ensure that the necessary packages (Playwright, TypeScript, etc.) are listed. 6. Restart Visual Studio Code (VS Code): - Sometimes VS Code caches information, and a restart can help resolve issues related to module loading.

[@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

[@piyushpranav83]

Hi @Raghav, Thanks for the session, really appreciative. i have one problem, if I am running "npx playwright test --project=chromium" it runs ver well but the moment I include file as "npx playwright test --project="chromium" .\tests\my_first_test.spec.js" it says "Error: No tests found. Make sure that arguments are regular expressions matching test files." Not able to figure out why? Can you please help

[@RaghavPal]

Piyush Try to give the path with single forward slashes.. like : npx playwright test ./tests/my_first_test.spec.js Also make sure the path and names are correct.. one way to check this is while typing the path, type first few characters of the folder/file name and press tab to autocomplete. If this does not work, check the following: 1. Test File Naming Convention: - Playwright Test expects test files to be suffixed with either `.spec.js` or `.test.js`. - Ensure that your test file name follows this convention. If your file is named `my_first_test.spec.js`, it should work correctly. 2. Check Your File Name: - Verify that the file path you're providing is correct. In your case, it's `.\\tests\\my_first_test.spec.js`. - Make sure the file exists at that location and has the correct suffix (`.spec.js`). 3. Configuration: - If you're using a configuration file (such as `playwright.config.js`), ensure that the `testMatch` property is correctly set. - The `testMatch` property specifies glob patterns or regular expressions that match test files. By default, Playwright Test looks for files with `.spec.js` or `.test.js` extensions. - If you don't have a configuration file, Playwright Test will use the default behavior. 4. Quick Fix: - Sometimes, replacing backslashes (`\\`) with forward slashes (`/`) in the file path can resolve issues. Try running: ``` npx playwright test ./tests/my_first_test.spec.js ``` 5. Example: - If your test file is named `my_first_test.spec.js`, make sure it's in the correct location and try running the command again. Remember to double-check the file name, path, and configuration --

[@piyushpranav83]

@@RaghavPal After your suggestion used "/" and it worked, Thank you🙂

[@elenayaryzhko294]

Hi, thanks you so much for the course! Really enjoying it. Could you please help me find what the issue is? When I run the test with the command, it says that there is no test. Thank you If I use the command - npx playwright test - everything is fine PS C:\Playwright examples> npx playwright test .\tests\my_first_test.spec.ts Error: No tests found. and the report shows this: 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.

[@RaghavPal]

Elena Try using the path with single forward slash '/' npx playwright test ./tests/my_first_test.spec.ts Here are a few potential solutions based on the information available: 1. Test Discovery Issue: - The error message "No tests found" suggests that Playwright is unable to discover any test files. - Make sure that your test files are correctly located and named. Ensure that they follow the expected naming conventions (e.g., ending with `.spec.ts`). - Verify that your test files contain valid test cases using the Playwright test framework. 2. Configuration File Issue: - Check if you have a configuration file (usually named `playwright.config.js` or `playwright.config.ts`) in your project. - Ensure that the configuration file specifies the correct test directory and test file patterns. - If you're using a custom configuration, review it to make sure it's correctly set up. 3. Test Execution Syntax: - When running tests with `npx playwright test`, you can specify test files using regular expressions. - Double-check that the path you're providing to `npx playwright test` matches the actual location of your test files. - If your test file path contains special characters (e.g., `$`, `*`), escape them properly. 4. Parallel Execution Issues: - If you're running tests in parallel, ensure that there are no conflicts between test files. - Sometimes parallel execution can cause issues with shared resources (e.g., login sessions). - Consider running tests sequentially (`--workers 1`) to see if the problem persists. 5. Azure DevOps Pipeline Specifics: - In your Azure DevOps Pipeline configuration (`azure-pipelines.yml`), you might need to adjust settings related to Node.js version, browsers, and parallel execution. - Review the pipeline steps and verify that they match your local setup. 6. Unique Tags for Tests: - If you want to exclude specific tests from execution, consider adding unique tags to describe blocks in your test files. - Use the `--grep` and `--grep-invert` CLI parameters to selectively run or exclude tests based on these tags². Remember that debugging issues like this often involves trial and error. Start by checking the basics (file paths, configuration, etc.), and gradually narrow down the problem

[@elenayaryzhko294]

@@RaghavPal oh my. Thank you :) I knew there was something ridiculously simple :)

[@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.

[@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

[@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.

[@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

[@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

[@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

[@MUHAMMADHARIS-e1h]

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.

[@MUHAMMADHARIS-e1h]

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

[@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

[@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"

[@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

[@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

[@SwatiSharma-m8s]

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 ```

[@TheMMakif]

Thank you so much 👍

[@RaghavPal]

Most welcome Akif

[@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

[@shubhangikalane1507]

I am continuously getting no tests found error

[@RaghavPal]

Shubhangi Can try this Quick Fix: - Replace any backslashes (`\`) with forward slashes (`/`) in your test file path. - Earlier: `npx playwright test.testshandleAlert.spec.js` - Now: `npx playwright test./tests/handleAlert.spec.js` 1. Check Test File Path: - Ensure that the path to your test file is correct. Sometimes a small typo can lead to this error. - Verify that the file you're trying to run exists in the specified location. 2. Naming Convention: - Make sure your test file follows the naming convention expected by Playwright. - For example, if your test file is named `handleAlert.spec.js`, ensure that you reference it correctly in your command. 3. Configuration: - Verify your configuration settings. Double-check any configuration files (e.g., `package.json`, `.npmrc`) related to Playwright. - Ensure that the test runner is correctly configured to find your test files. 4. Azure Pipeline: - If you're running tests in Azure Pipeline, ensure that the pipeline configuration points to the correct test file path. - Sometimes, running `npm ci` and then `npx playwright install --with-deps` can resolve issues in the pipeline⁴. Remember to double-check these aspects, and your Playwright tests should run smoothly. -

[@Anto-fz2kw]

score 10/10. thank

[@RaghavPal]

Great going...

[@malithkarunathilake7722]

Hi Raghav thanks to these videos, I had to face an issue while running the code and there was no any output that i could get. I could not find any issue in the code as well. PS D:\projects\Playwright_Automation> node .\tests\myfirst_code.spec.js

[@RaghavPal]

Malith What exactly is the error you are facing. Try replacing backslashes \ in the path with forward slashes / While typing the path press tab for auto-completion to make sure the path is correct

[@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.

[@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

[@karthikmanoharan6794]

Why it is not running in edge browser

[@RaghavPal]

Hi Karthik There are a few reasons why Playwright might not be running in Edge browser: * **Your version of Edge is not supported.** Playwright supports Edge version 86 and later. If you are using an older version of Edge, you will need to update your browser. * **You have not installed the Playwright Edge driver.** The Playwright Edge driver is a separate binary that you need to install in order to use Playwright with Edge. You can download the driver from the Playwright website. * **Your Edge browser is not configured to allow Playwright to run.** By default, Edge blocks third-party cookies and other scripts. You will need to configure Edge to allow Playwright to run. You can do this by going to **Settings > Privacy, search, and services > Cookies and site permissions > Allow specific sites to run scripts** and adding the Playwright domain to the list of allowed sites. If you have checked all of these things and Playwright is still not running in Edge browser, then you can try the following: * **Restart your computer.** Sometimes, a simple restart can fix problems with Playwright. * **Reinstall Playwright.** If you have recently installed Playwright, you can try reinstalling it. This may fix any problems with the installation. * **Report a bug.** 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. I hope this helps

[@saadshakil9074]

Total points 9/10

[@RaghavPal]

Great Saad

[@judismith1421]

Hello Raghav, I've started Tutorial 4 - How to write 1st Test. I followed your instructions exactly but unable to resolve the typeError: hello is not a function. Below is the code snippet from hello.js as well as my test 'myFirstTest.spec.js'. Can you please help me resolve this? I want to learn this desperately. hello.js 1 exports.hello = function f1(){ 2 return 'hello' 3 } 4 5 exports.helloworld = function f2(){ 6 return 'hello world' 7 } myFirstTest.spec.js 1 const {test, expect} = require('@playwright/test') 2 const {hello, helloworld} = require('./demo/hello') 3 4 console.log (hello()); 5 console.log (helloworld()); 6 Cmd: node .\test\myFirstTest.spec.js Output Results TypeError: hello is not a function at Object. (C:\Users\judis\Playwright_Automation\tests\myFirstTest.spec.js:5:14) at Module._compile (node:internal/modules/cjs/loader:1233:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1287:10) at Module.load (node:internal/modules/cjs/loader:1091:32) at Function.Module._load (node:internal/modules/cjs/loader:938:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) at node:internal/main/run_main_module:23:47 Node.js v20.5.0

[@RaghavPal]

Hi Judi The error you are getting is because the `hello` function is not defined in the global scope. In your `myFirstTest.spec.js` file, you are importing the `hello` and `helloworld` functions from the `hello.js` file. However, when you try to call the `hello` function in your test, it is not defined in the global scope. To fix this, you need to declare the `hello` function in the global scope. You can do this by adding the following line to the top of your `myFirstTest.spec.js` file: ``` const hello = require('./demo/hello').hello; ``` This will declare the `hello` function in the global scope, and you will be able to call it without any errors. Here is the updated code for your `myFirstTest.spec.js` file: ``` const {test, expect} = require('@playwright/test'); const hello = require('./demo/hello').hello; test('hello world', async () => { const result = await hello(); expect(result).toBe('hello'); const result2 = await helloworld(); expect(result2).toBe('hello world'); }); ``` This code should now work without any errors.

[@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

[@oguzhanbalc4479]

Hello. My test didn't run. Why? 'Error: No tests found.'

[@RaghavPal]

Oğuzhan Check your command. in your command in the path of test file replace back slashes with forward slash / Try again

[@oguzhanbalc4479]

@@RaghavPal Thanks. When I wrote the path "npx playwright test .\My-first-test.spec.js --headed" the test passed.

[@LeonC0704]

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

[@LeonC0704]

@@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

[@ArtiBhalerao-z1r]

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

[@ArtiBhalerao-z1r]

changed to forward slash and it worked

[@RaghavPal]

Great