Awesome video series so far on Playwright. Can you please share insights about upcoming videos on Playwright and by when we can expect the series to be completed ? Just curious, so that can plan my learning accordingly. Thankyou for everything.
Kateryna There are a few reasons why the Playwright configuration file (`playwright.config.js`) might not be recognized by VS Code on a Macbook: * The Playwright VS Code extension is not installed. * The Playwright VS Code extension is not up to date. * The Playwright configuration file is not in the correct location. * The Playwright configuration file is not valid. To troubleshoot the issue, you can try the following: 1. Make sure that the Playwright VS Code extension is installed. You can do this by opening the Extensions tab in VS Code and searching for "Playwright". 2. Make sure that the Playwright VS Code extension is up to date. You can do this by clicking the *Update* button next to the Playwright extension in the Extensions tab. 3. Make sure that the Playwright configuration file is in the correct location. The Playwright configuration file should be in the root directory of your Playwright project. 4. Make sure that the Playwright configuration file is valid. You can validate the Playwright configuration file by running the following command: ``` npx playwright test --config=playwright.config.js ``` If the Playwright configuration file is valid, you should see a message that says "Playwright test runner is ready". If you are still having trouble getting VS Code to recognize the Playwright configuration file, you can post a question on the Playwright forum or Stack Overflow. Here are some additional tips for using Playwright with VS Code on a Macbook: * You can use the Playwright VS Code extension to run Playwright tests from within VS Code. To do this, click the *Run* button next to your test file in the Explorer tab. * You can use the Playwright VS Code extension to generate Playwright code snippets. To do this, right-click in the editor and select *Insert Playwright Code Snippet*. * You can use the Playwright VS Code extension to debug Playwright tests. To do this, set a breakpoint in your test file and click the *Debug* button. I hope this helps
Hi Raghav, could you please help on how to verify URL's (broken links) in Playwright ? We have 200 URL's and need to execute it on daily basis and I have written code in Cypress and its working fine but need it on Playwright too. Kindly help on this through Playwright.
Hi Ramu, if your only goal is to find all broken links you can directly use any online tools like You can also find some plugins on your browser for that
Hi Raghav, excellent video. But 1 thing is not clear to me. You make a chromium.launch, but you also have to give project=chromium in the terminal command. I would expect if you initilize chromium in the browser constant, you wouldn't need to specify it in the terminal command? Can you explain please?
Ferry You are correct that you do not need to specify the `project=chromium` option in the terminal command if you initialize Chromium in the `browser` constant. However, there are a few reasons why you might still want to do so: *To explicitly specify the project:* If you are running tests against multiple browsers or projects, it can be helpful to explicitly specify the project in the terminal command. This can help to avoid any ambiguity about which project the tests should be run against. *To override the default project:* If you have set a default project in your Playwright configuration file, you can use the `project` option in the terminal command to override the default project. *To use a specific Chromium version:* If you need to use a specific version of Chromium, you can use the `project` option in the terminal command to specify the version. Here is an example of how to use the `project` option in the terminal command to run tests against the Chromium project: ``` npx playwright test --project=chromium ``` This will run all of the tests in your project against the Chromium browser. Here is an example of how to use the `project` option in the terminal command to override the default project: ``` npx playwright test --project=chromium --config=my-project.config.js ``` This will run all of the tests in the `my-project.config.js` configuration file against the Chromium browser. Here is an example of how to use the `project` option in the terminal command to use a specific Chromium version: ``` npx playwright test --project=chromium-canary ``` This will run all of the tests in your project against the Chromium Canary browser. Ultimately, whether or not you need to use the `project` option in the terminal command depends on your specific needs. If you are unsure, it is always best to explicitly specify the project.
Elena Step 1: Understand the issue You're using Playwright, and you're trying to configure the timeout setting in your config file. However, you don't see a `const config` or a timeout setting in your config file. Step 2: Check the config file structure Take a closer look at your config file. Is it a JavaScript file (e.g., `playwright.config.js`) or a JSON file (e.g., `playwright.config.json`)? Make sure it's in the correct format. Step 3: Verify the existence of a config file Double-check that you have a config file in the correct location. By default, Playwright looks for a `playwright.config.js` or `playwright.config.json` file in the root of your project. Step 4: Create a config file if it doesn't exist If you don't have a config file, create one. For example, create a new file called `playwright.config.js` in the root of your project with the following content: ```javascript module.exports = { // Your config settings go here }; ``` Or, if you prefer a JSON file, create `playwright.config.json` with: ```json { // Your config settings go here } ``` Step 5: Add the timeout setting In your newly created config file, add the timeout setting. For example, in `playwright.config.js`: ```javascript module.exports = { timeout: 30000, // 30 seconds }; ``` Or, in `playwright.config.json`: ```json { "timeout": 30000 } ``` Step 6: Verify the config file is being loaded Run your Playwright script again. If everything is set up correctly, the timeout setting should be applied. You can verify this by checking the timeout value in your script or by observing the behavior of your tests. -
Hi Raghav. When you configure the video recording and slow motion in the "slowmotion.....spec.js" file and run the test using the terminal, do you think is necessary to mention "--project chromium"? because you already mention in line 5 that you will be using chromium. I hope you get my point. Thanks.
Jorge if you’ve already specified Chromium in your configuration, it is not necessary to mention --project chromium again when running the test from the terminal. The initial configuration should suffice
hello i have seen two different args options , one for the browser object and the second for the context .is there any documentation thats list seperately args options for both of them?
Hi Youssef, Yes, the Playwright documentation lists the args options for both the browser object and the context object separately. The args option for the browser object is used to configure command-line arguments for the browser instance. Here's an example: const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: true, args: ['--disable-infobars', '--disable-extensions'] }); const page = await browser.newPage(); await page.goto('www.example.com'); // ... await browser.close(); })(); In this example, we're launching a headless Chromium browser instance with two command-line arguments: --disable-infobars and --disable-extensions. The args option for the context object is used to configure command-line arguments for the browser context. Here's an example: const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const context = await browser.newContext({ viewport: { width: 1280, height: 720 }, args: ['--lang=en-US'] }); const page = await context.newPage(); await page.goto('www.example.com'); // ... await browser.close(); })(); Yes, the Playwright documentation lists the args options for both the browser object and the context object separately. The args option for the browser object is used to configure command-line arguments for the browser instance. Here's an example: javascript Copy code const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: true, args: ['--disable-infobars', '--disable-extensions'] }); const page = await browser.newPage(); await page.goto('www.example.com'); // ... await browser.close(); })(); In this example, we're launching a headless Chromium browser instance with two command-line arguments: --disable-infobars and --disable-extensions. The args option for the context object is used to configure command-line arguments for the browser context. Here's an example: javascript Copy code const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const context = await browser.newContext({ viewport: { width: 1280, height: 720 }, args: ['--lang=en-US'] }); const page = await context.newPage(); await page.goto('www.example.com'); // ... await browser.close(); })(); In this example, we're creating a new browser context with a custom viewport size and a command-line argument --lang=en-US.
Maradana To record videos of your Playwright tests, you need to set the `video` option in your Playwright config file. ```js // config.js module.exports = { projects: [ { name: 'chromium', use: { headless: false, video: 'on', }, }, ], }; ``` This will record a video of all of your tests, regardless of whether they pass or fail. You can also configure the video recorder to only record videos of failing tests, or to record videos of specific tests. To only record videos of failing tests, set the `video` option to `'retain-on-failure'`. ```js // config.js module.exports = { projects: [ { name: 'chromium', use: { headless: false, video: 'retain-on-failure', }, }, ], }; ``` To record videos of specific tests, set the `video` option to an array of test names. ```js // config.js module.exports = { projects: [ { name: 'chromium', use: { headless: false, video: ['my-test-1', 'my-test-2'], }, }, ], }; ``` Once you have configured the video recorder, you can run your tests by executing the following command: ``` npx playwright test ``` This will run your tests and record videos of the results. The videos will be saved to the `playwright-report` directory. **Troubleshooting** If you are having problems recording videos of your tests, here are a few things you can check: * Make sure that you have set the `video` option in your Playwright config file. * Make sure that you are using a supported browser. Playwright currently supports Chromium, Firefox, and WebKit. * Make sure that you have enough disk space to save the video files. * Try restarting your computer.
Hi Sirisha Playwright uses waits to ensure that your tests are stable and reproducible. There are a few different ways to use waits in Playwright: * The wait() method. This method waits for a certain amount of time before continuing. For example, the following code will wait for 5 seconds before continuing: Code snippet await page.wait(5000); * The until() method. This method waits for a condition to be met before continuing. For example, the following code will wait until the element with the ID "my-element" is visible before continuing: Code snippet await page.until(element => element.isVisible()); * The waitForSelector() method. This method waits for a selector to be visible before continuing. For example, the following code will wait until the selector ".my-class" is visible before continuing: Code snippet await page.waitForSelector(".my-class"); * The waitForXPath() method. This method waits for an XPath expression to be visible before continuing. For example, the following code will wait until the XPath expression //div[@id="my-element"] is visible before continuing: Code snippet await page.waitForXPath("/div[@id='my-element']"); * The waitForTimeout() method. This method waits for a certain amount of time before throwing an error. For example, the following code will wait for 5 seconds before throwing an error: Code snippet await page.waitForTimeout(5000); * The waitForNavigation() method. This method waits for a navigation to complete before continuing. For example, the following code will wait until the current page has loaded before continuing: Code snippet await page.waitForNavigation(); * The waitForResponse() method. This method waits for a response to be received before continuing. For example, the following code will wait until a response with the status code 200 is received before continuing: Code snippet await page.waitForResponse({status: 200}); * The waitForEvents() method. This method waits for a certain number of events to be fired before continuing. For example, the following code will wait for 5 events of type "click" to be fired before continuing: Code snippet await page.waitForEvents({type: "click", count: 5}); You can also use a combination of these methods to create more complex waits. For example, you could use the wait() method to wait for a certain amount of time, and then use the until() method to wait for a condition to be met. Here are some examples of how you can use waits in Playwright: * Wait for an element to be visible. You can use the until() method to wait for an element to be visible before continuing. For example, the following code will wait until the element with the ID "my-element" is visible before continuing: Code snippet await page.until(element => element.isVisible()); * Wait for a selector to be visible. You can use the waitForSelector() method to wait for a selector to be visible before continuing. For example, the following code will wait until the selector ".my-class" is visible before continuing: Code snippet await page.waitForSelector(".my-class"); * Wait for an XPath expression to be visible. You can use the waitForXPath() method to wait for an XPath expression to be visible before continuing. For example, the following code will wait until the XPath expression //div[@id="my-element"] is visible before continuing: Code snippet await page.waitForXPath("/div[@id='my-element']"); * Wait for a certain amount of time. You can use the wait() method to wait for a certain amount of time before continuing. For example, the following code will wait for 5 seconds before continuing: Code snippet await page.wait(5000); * Wait for a navigation to complete. You can use the waitForNavigation() method to wait for a navigation to complete before continuing. For example, the following code will wait until the current page has loaded before continuing: Code snippet await page.waitForNavigation(); * Wait for a response to be received. You can use the waitForResponse() method to wait for a response to be received before continuing. For example, the following code will wait until a response with the status code 200
Raghav - I used screenshot in my script but when I tried in our test I am able to capture only on one step. Is there can capture multiple steps? Also perform image to text and compare a text in a test. I have script with 40steps and I want to capture screenshot for total 4 steps and generate tex on those 4 screenshots. So far I watch few video and it used only in one step. For image to text I used " //convert from image to text async function convertToText(name) { let imgText = await Tesseract.recognize(`./screenshots/${name}`, 'eng'); const storetextdata = imgText.data.text; console.log("Image to Text Data"+storetextdata); expect(storetextdata.includes("Test Passed")).toBeTruthy(); In Test step I have added : //Start capturing screenshot const name = Date.now(); await page.screenshot({ path: `screenshots/${name}.png`, fullpage: true}); await convertToText(`${name}.png`);
Hi SD To capture multiple screenshots in Playwright, you can include the screenshot code in each step of your script where you want a screenshot captured. For example: //Step 1 const name1 = 'step1'; await page.screenshot({ path: `screenshots/${name1}.png`, fullPage: true }); //Step 2 const name2 = 'step2'; await page.click('#element'); await page.screenshot({ path: `screenshots/${name2}.png`, fullPage: true }); //Step 3 const name3 = 'step3'; await page.fill('#input', 'value'); await page.screenshot({ path: `screenshots/${name3}.png`, fullPage: true }); As for performing OCR on the screenshots and comparing text in a test, you can modify your convertToText function to accept a parameter for the expected text and include an assertion to check if the expected text is present in the OCR output. For example: async function convertToText(name, expectedText) { let imgText = await Tesseract.recognize(`./screenshots/${name}`, 'eng'); const storetextdata = imgText.data.text; console.log("Image to Text Data: " + storetextdata); expect(storetextdata.includes(expectedText)).toBeTruthy(); } //Test step const name = Date.now(); await page.screenshot({ path: `screenshots/${name}.png`, fullpage: true}); await convertToText(`${name}.png`, 'Expected Text'); This modified convertToText function takes two parameters: the name of the screenshot file and the expected text to be present in the OCR output. The expect assertion checks if the expected text is present in the OCR output. You can call this function for each of the 4 steps where you want OCR and text comparison to be performed.
Hi Raghav, I have one more question, I used the same code as you have for the slow motion and recording, once the test is completed, I'm having an error related to the timeout: "Test timeout of 10000ms exceeded.". All the steps are pass, just having that error. 10000ms is the time I have set in my config file "timeout: 10 * 1000," What can I do? increase or decrease the time? Thanks again.
In my test file, I decrease the "SlowMo" value from 1000 to 500 and I don't have the error anymore. Then please just confirm, is the timeout set in my config file the maximum time to complete the test? if this timeour is reach and the test has not finished, then I'll get this error about timeout?
Jorge The timeout you've set in your configuration file (`timeout: 10 * 1000`) indeed represents the maximum time allowed for a test to complete. If the test execution exceeds this duration, you'll encounter the "Test timeout exceeded" error. Here are some considerations: 1. Timeout Configuration: - The timeout value is crucial for ensuring that tests don't run indefinitely. It's a safety mechanism to prevent hanging tests. - If your tests consistently complete within the specified time, there's no need to adjust it. 2. SlowMo and Timeout Interaction: - The `slowMo` value affects the execution speed by introducing delays between actions. When you decreased it from 1000 to 500, the overall test duration decreased. - If your tests involve animations or asynchronous actions, a longer `slowMo` might be necessary. - However, keep in mind that `slowMo` doesn't directly impact the timeout. It only affects the pacing of actions. 3. Choosing the Right Timeout: - Consider the complexity of your application, network latency, and the number of steps in your test. - If your tests consistently complete within the current timeout, there's no need to change it. - If you encounter timeouts frequently, consider increasing the timeout to allow more time for slower actions. 4. Debugging Slow Tests: - If a test consistently approaches the timeout, investigate why it's taking longer: - Check for long-running network requests. - Inspect whether any actions are waiting indefinitely (e.g., waiting for an element that never appears). - Review your test logic and ensure efficient waits (using `waitFor`, `waitForSelector`, etc.). 5. Test Stability: - Strive for stable tests that consistently complete within the specified timeout. - If a test occasionally exceeds the timeout due to external factors (e.g., flaky network), consider using retries or adjusting the timeout slightly. Remember that the timeout is a balance between ensuring timely test execution and allowing sufficient time for realistic interactions. Adjust it based on your specific use case and the stability of your tests. ...
Thank you so much for the tutorial. I have a question. After recording, and run a test, it used to show timeline of how long it takes to test each line, not it disappeard. How do I get that time showing back? Thank you in advance.
Hi Jin To get the timeline of how long it takes to test each line back in Playwright, you can follow these steps: 1. Open the Playwright test runner. 2. Click on the "Timeline" tab. 3. The timeline will show you a breakdown of how long each line of code took to execute. If the timeline is not showing, it is likely because you have not enabled it. To enable the timeline, follow these steps: 1. Open the Playwright test runner. 2. Click on the "Settings" icon. 3. In the "Settings" dialog, select the "Timeline" checkbox. 4. Click on the "Save" button. Once you have enabled the timeline, it will be shown by default when you run a test. Here are some additional things to note about the Playwright timeline: * The timeline shows the time it takes for each line of code to execute, including the time it takes to wait for asynchronous operations to complete. * The timeline is divided into two sections: the "Execution" section shows the time it takes for each line of code to execute, and the "Wait" section shows the time it takes for asynchronous operations to complete. * You can hover over a line in the timeline to see more information about that line, such as the name of the function that was executed and the arguments that were passed to the function. * You can click on a line in the timeline to focus on that line in the test runner
Hi Raghav, I am to launch my project application which is designed in Angular but unable to do so. The browser is opening but its just keeps on loading. Any suggestions? Also , by changing the url to some other value is working fine like the one which you mentioned is working fine.
Hi Ankita, If you are able to launch the application with a different URL and it works fine, it's possible that there could be an issue with the URL you are using. Here are a few things you can check: Ensure that the URL you are using is correct and is pointing to the correct location of your application. Check if the URL you are using is accessible from the machine where you are running your REST Assured tests. Sometimes, network restrictions or firewalls can prevent access to certain URLs, so it's worth checking if that's the case. Check if there are any errors or issues in the console of the browser that's launched by REST Assured. If there are any errors, it could indicate an issue with your application, which could be causing the loading issue. Check if your Angular application requires any specific headers or cookies to be set to work properly. REST Assured provides the ability to set headers and cookies in your HTTP requests, so it's worth checking if any such settings are required for your application to work. If none of the above suggestions work, it might be worth checking if there is any issue with the configuration of your REST Assured tests or the environment in which they are running. It's also worth checking if there are any known compatibility issues between REST Assured and Angular, as that could be a factor as well.
Devbrat The reason for this is that Playwright uses a specific configuration format, which is based on the `defineConfig` function from `@playwright/test`. Here's what's happening: The `module.exports` syntax In Node.js, `module.exports` is a way to export a value from a module (in this case, your `config.js` file) so that it can be imported and used by other parts of your application. The `defineConfig` function `defineConfig` is a function provided by `@playwright/test` that helps you define a configuration object for your Playwright tests. It's a way to create a configuration object that's specific to Playwright. When you use `defineConfig`, you pass an object with configuration options as an argument. This object will be used to configure your Playwright tests. Why you're seeing `module.exports = defineConfig({` In your `config.js` file, you're seeing `module.exports = defineConfig({` because this is the recommended way to define a configuration object for Playwright tests. By using `module.exports = defineConfig({`, you're exporting a configuration object that's defined using the `defineConfig` function. This object will be used to configure your Playwright tests. What to do next To define your configuration object, you can add properties to the object passed to `defineConfig`. For example: ```javascript module.exports = defineConfig({ // Your configuration options go here timeout: 30000, retries: 2, //... }); ``` Replace the comments with the actual configuration options you want to use for your Playwright tests. That's it! You should now have a valid `config.js` file that defines a configuration object for your Playwright tests -
Sharon Let me know where exactly and which step you face issue. In General, here are the steps 1. Recording Videos During Test Execution: - By default, video recording is turned off in Playwright. However, you can enable it by configuring the `video` option in your Playwright config. - Here are the available options for video recording: - `'off'`: Do not record video. - `'on'`: Record video for each test. - `'retain-on-failure'`: Record video for each test, but remove videos from successful test runs. - `'on-first-retry'`: Record video only when retrying a test for the first time. - Video files will appear in the test output directory (typically `test-results`). - To enable video recording, modify your Playwright config (e.g., `playwright.config.ts`): ```typescript import { defineConfig } from '@playwright/test'; export default defineConfig({ use: { video: 'on-first-retry', // Choose your desired mode }, }); ``` 2. Specifying Video Size: - By default, the video size matches the viewport size (scaled down to fit 800x800). - You can customize the video size by specifying the width and height in your config: ```typescript import { defineConfig } from '@playwright/test'; export default defineConfig({ use: { video: { mode: 'on-first-retry', size: { width: 640, height: 480 }, // Adjust as needed }, }, }); ``` 3. Accessing Video Files: - For multi-page scenarios, you can access the video file associated with a page using `page.video().path()`. - Note that the video is only available after the page or browser context is closed. Remember to adjust the settings according to your requirements. ..
Hey Raghav, please can you create a tutorial where if one has to click and check multiple links on a page to find if there is a 404 link on a page, how that can be done ? using Playwright without having to click on them. Similar to how it's done in selenium with HTTP method. I haven't come across a resource which can help that using Playwright.
Hi Divyanshu, you can use the below code to get all the links on the page found_elements = page.locator('a') print(f"{found_elements.count()} link/links are found.") Further you can take help from here github.com/microsoft/playwright/issues/2708 stackoverflow.com/questions/70702820/how-can-i-click-on-all-links-matching-a-selector-with-playwright
@@RaghavPal hi raghav I don't want to click on multiple links but want to check if they return 404 or not. How can I achieve that. Please can you help ?
@@RaghavPal okay, if possible can you create a lecture with Playwright on how to check if there are 404 links on a page. Then print those in output. It's a major part of maintenance projects where daily testing is done. I have tried a lot but couldn't come across a single video on Internet or documentation which could help me achieve that with Playwright. It would be mighty helpful.
I am trying to run the test from github actions, for 2 specific tests I am always getting this error " Error: locator.textContent: Page closed" in github actions while locally its working fine as expected Based on the error I can understand that page is getting closed before playwright perform some actions on the UI , my question is how to handle such kind of scenario
Umesh The error message "Error: locator.textContent: Page closed" means that the page has been closed before the playwright could perform the action. This can happen for a few reasons: * The page is being closed by the user or by the browser. * The page is being closed by a timeout. * The page is being closed by an error. To handle this scenario, you can try the following: * Use a wait statement to wait for the page to load before you perform the action. * Use a try/catch block to catch the error and handle it gracefully. * Use a timeout to prevent the test from running for too long. Here is an example of how you can use a wait statement to wait for the page to load before you perform the action: ``` const page = await playwright.chromium.launch(); await page.goto("example.com"); await page.waitForSelector(".my-element"); ``` Here is an example of how you can use a try/catch block to catch the error and handle it gracefully: ``` try { const text = await page.locator(".my-element").textContent; } catch (error) { console.log(error); } ``` Here is an example of how you can use a timeout to prevent the test from running for too long: ``` const page = await playwright.chromium.launch(); await page.goto("example.com"); await page.waitForSelector(".my-element", { timeout: 10000 }); ``` I hope this helps
Hi Raghav, there is a typo in 1 quiz question anwser: Question: Where to set slow motion and video recording configuration at global level has an answer pacakge.json. That should be package.json. Also is should prefer that the first answer is: Playwright config file, instead of config file.
Hello Sir, Could you please create videos for: 1) How to pass data-driven from excel files? 2) How to generate the reports in playwright.? 3) How to create POM?
Umesh The configuration `use: { video: 'on' }` will enable video recording for all tests. However, the configuration `launchOptions:{ slowMo: 1000 }` will slow down the browser by a factor of 1000. This can prevent Playwright from recording the video. To fix this issue, you can try the following: * Remove the configuration `launchOptions:{ slowMo: 1000 }`. * Increase the value of the `slowMo` option. For example, you could set `slowMo: 100`. This will slow down the browser by a factor of 100, which should be enough to record the video without affecting the performance of the tests. * Use a different browser. Some browsers are better at recording videos than others. For example, Chromium is known to be a good browser for recording videos.
@@RaghavPal I have incorporated the feedback and tried the below 2 options , in both the cases it didnt work Also I have noticed while running the script artifacts folder are getting created , after completion of run it gets deleted on its own use: { video: 'on', }, outputDir: 'test-results/', Or use: { video: 'on', },
Nicholas The error message you're encountering, "Cannot find module '@playwrights/test'", indicates that the @playwright/test module is not being found. Let's troubleshoot this issue: 1. Install @playwright/test: - First, ensure that you have installed the @playwright/test package. If not, run the following command in your project directory: ``` npm install -D @playwright/test ``` - This command will add the @playwright/test package as a development dependency to your project. 2. Check Your Imports: - Make sure you are importing the @playwright/test module correctly in your test file. It should look like this: ```javascript import { test, expect } from '@playwright/test'; ``` 3. Remove playwright-expect (if applicable): - You mentioned using playwright-expect. However, @playwright/test already includes web-first assertions, so there's no need for an additional library. - Remove any references to playwright-expect from your code. 4. Transpile TypeScript (if using TypeScript): - If you're using TypeScript, ensure that your TypeScript files are transpiled correctly. - @playwright/test might not consider your tsconfig.json when transpiling TypeScript files. Manually transpile your TypeScript files using the following command: ``` npx tsc ``` - Refer to the [official Playwright documentation](playwright.dev/docs/test-typescript) for more details on using TypeScript with Playwright. 5. Check File Paths: - Verify that the file paths in your project structure are correct. Ensure that the test file path matches the actual location of your test script. 6. Clean Cache and Reinstall: - Sometimes, cached dependencies can cause issues. Try cleaning the npm cache and reinstalling the dependencies: ``` npm cache clean --force npm install ``` 7. Restart Your IDE or Terminal: - Sometimes, IDEs or terminals may not pick up changes immediately. Restart your development environment to ensure everything is up to date. Remember to adapt these steps to your specific project setup. ..
Your videos are really great, I'm learning a lot. I'm having this question since previous video... For your test file login_demo.spec.js, I think you have 3 different test, my question is: is it possible to run a single test without using "test.only"? something like: npx playwright test login_demo.spec.js/Demo Login Test 3 Thanks in advance
Jorge Certainly! You can run a single test in Playwright without using `test.only`. Here are the ways to achieve this: 1. Run a Single Test File: - To run a specific test file, simply provide the name of the test file you want to execute: ``` npx playwright test login_demo.spec.js ``` - This command will run all the tests within the specified file. 2. Run Specific Tests by Title: - If you want to run a specific test within a file, use the `-g` flag followed by the title of the test: ``` npx playwright test -g "Demo Login Test 3" ``` - This will execute only the test with the specified title. 3. Run Tests in Headed Mode: - By default, tests run in headless mode (no visible browser window). - If you want to see the browser window while the test runs, use the `--headed` flag: ``` npx playwright test login_demo.spec.js --headed ``` Remember to adjust the commands based on your specific test file names and titles. Happy testing…
Awesome video series so far on Playwright.
Can you please share insights about upcoming videos on Playwright and by when we can expect the series to be completed ?
Just curious, so that can plan my learning accordingly.
Thankyou for everything.
Hi Hitesh, I will start on the next set of videos soon, all my subscribers will get notified
Thank You Sir
Most welcome Dhruv
hi,
the config at 3:23 wasn't recognized by VS Code. Help me please. I'm using Macbook
Kateryna
There are a few reasons why the Playwright configuration file (`playwright.config.js`) might not be recognized by VS Code on a Macbook:
* The Playwright VS Code extension is not installed.
* The Playwright VS Code extension is not up to date.
* The Playwright configuration file is not in the correct location.
* The Playwright configuration file is not valid.
To troubleshoot the issue, you can try the following:
1. Make sure that the Playwright VS Code extension is installed. You can do this by opening the Extensions tab in VS Code and searching for "Playwright".
2. Make sure that the Playwright VS Code extension is up to date. You can do this by clicking the *Update* button next to the Playwright extension in the Extensions tab.
3. Make sure that the Playwright configuration file is in the correct location. The Playwright configuration file should be in the root directory of your Playwright project.
4. Make sure that the Playwright configuration file is valid. You can validate the Playwright configuration file by running the following command:
```
npx playwright test --config=playwright.config.js
```
If the Playwright configuration file is valid, you should see a message that says "Playwright test runner is ready".
If you are still having trouble getting VS Code to recognize the Playwright configuration file, you can post a question on the Playwright forum or Stack Overflow.
Here are some additional tips for using Playwright with VS Code on a Macbook:
* You can use the Playwright VS Code extension to run Playwright tests from within VS Code. To do this, click the *Run* button next to your test file in the Explorer tab.
* You can use the Playwright VS Code extension to generate Playwright code snippets. To do this, right-click in the editor and select *Insert Playwright Code Snippet*.
* You can use the Playwright VS Code extension to debug Playwright tests. To do this, set a breakpoint in your test file and click the *Debug* button.
I hope this helps
Thank you Sir! I hope you also start videos regarding data driven tests (CSV or database) with playwright. Thank you again and more power!
Most welcome
Hi Raghav, could you please help on how to verify URL's (broken links) in Playwright ?
We have 200 URL's and need to execute it on daily basis and I have written code in Cypress and its working fine but need it on Playwright too.
Kindly help on this through Playwright.
Hi Ramu, if your only goal is to find all broken links you can directly use any online tools like
You can also find some plugins on your browser for that
Hi Raghav, excellent video. But 1 thing is not clear to me. You make a chromium.launch, but you also have to give project=chromium in the terminal command. I would expect if you initilize chromium in the browser constant, you wouldn't need to specify it in the terminal command? Can you explain please?
Ferry
You are correct that you do not need to specify the `project=chromium` option in the terminal command if you initialize Chromium in the `browser` constant. However, there are a few reasons why you might still want to do so:
*To explicitly specify the project:* If you are running tests against multiple browsers or projects, it can be helpful to explicitly specify the project in the terminal command. This can help to avoid any ambiguity about which project the tests should be run against.
*To override the default project:* If you have set a default project in your Playwright configuration file, you can use the `project` option in the terminal command to override the default project.
*To use a specific Chromium version:* If you need to use a specific version of Chromium, you can use the `project` option in the terminal command to specify the version.
Here is an example of how to use the `project` option in the terminal command to run tests against the Chromium project:
```
npx playwright test --project=chromium
```
This will run all of the tests in your project against the Chromium browser.
Here is an example of how to use the `project` option in the terminal command to override the default project:
```
npx playwright test --project=chromium --config=my-project.config.js
```
This will run all of the tests in the `my-project.config.js` configuration file against the Chromium browser.
Here is an example of how to use the `project` option in the terminal command to use a specific Chromium version:
```
npx playwright test --project=chromium-canary
```
This will run all of the tests in your project against the Chromium Canary browser.
Ultimately, whether or not you need to use the `project` option in the terminal command depends on your specific needs. If you are unsure, it is always best to explicitly specify the project.
@@RaghavPal Thanks for your clear and extensive reaction.
Hi, in my config file I don't seem to have the time out setting or const config in general. What shall I do? Thank you
Elena
Step 1: Understand the issue
You're using Playwright, and you're trying to configure the timeout setting in your config file. However, you don't see a `const config` or a timeout setting in your config file.
Step 2: Check the config file structure
Take a closer look at your config file. Is it a JavaScript file (e.g., `playwright.config.js`) or a JSON file (e.g., `playwright.config.json`)? Make sure it's in the correct format.
Step 3: Verify the existence of a config file
Double-check that you have a config file in the correct location. By default, Playwright looks for a `playwright.config.js` or `playwright.config.json` file in the root of your project.
Step 4: Create a config file if it doesn't exist
If you don't have a config file, create one. For example, create a new file called `playwright.config.js` in the root of your project with the following content:
```javascript
module.exports = {
// Your config settings go here
};
```
Or, if you prefer a JSON file, create `playwright.config.json` with:
```json
{
// Your config settings go here
}
```
Step 5: Add the timeout setting
In your newly created config file, add the timeout setting. For example, in `playwright.config.js`:
```javascript
module.exports = {
timeout: 30000, // 30 seconds
};
```
Or, in `playwright.config.json`:
```json
{
"timeout": 30000
}
```
Step 6: Verify the config file is being loaded
Run your Playwright script again. If everything is set up correctly, the timeout setting should be applied. You can verify this by checking the timeout value in your script or by observing the behavior of your tests.
-
Hi Raghav. When you configure the video recording and slow motion in the "slowmotion.....spec.js" file and run the test using the terminal, do you think is necessary to mention "--project chromium"? because you already mention in line 5 that you will be using chromium. I hope you get my point. Thanks.
Jorge
if you’ve already specified Chromium in your configuration, it is not necessary to mention --project chromium again when running the test from the terminal.
The initial configuration should suffice
Noted, thanks a lot.
hello i have seen two different args options , one for the browser object and the second for the context .is there any documentation thats list seperately args options for both of them?
Hi Youssef,
Yes, the Playwright documentation lists the args options for both the browser object and the context object separately.
The args option for the browser object is used to configure command-line arguments for the browser instance. Here's an example:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({
headless: true,
args: ['--disable-infobars', '--disable-extensions']
});
const page = await browser.newPage();
await page.goto('www.example.com');
// ...
await browser.close();
})();
In this example, we're launching a headless Chromium browser instance with two command-line arguments: --disable-infobars and --disable-extensions.
The args option for the context object is used to configure command-line arguments for the browser context. Here's an example:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext({
viewport: { width: 1280, height: 720 },
args: ['--lang=en-US']
});
const page = await context.newPage();
await page.goto('www.example.com');
// ...
await browser.close();
})();
Yes, the Playwright documentation lists the args options for both the browser object and the context object separately.
The args option for the browser object is used to configure command-line arguments for the browser instance. Here's an example:
javascript
Copy code
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({
headless: true,
args: ['--disable-infobars', '--disable-extensions']
});
const page = await browser.newPage();
await page.goto('www.example.com');
// ...
await browser.close();
})();
In this example, we're launching a headless Chromium browser instance with two command-line arguments: --disable-infobars and --disable-extensions.
The args option for the context object is used to configure command-line arguments for the browser context. Here's an example:
javascript
Copy code
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext({
viewport: { width: 1280, height: 720 },
args: ['--lang=en-US']
});
const page = await context.newPage();
await page.goto('www.example.com');
// ...
await browser.close();
})();
In this example, we're creating a new browser context with a custom viewport size and a command-line argument --lang=en-US.
When i set the video recorder in config.js file save and run it the project .it was not not recorded can you guide me how to do
Maradana
To record videos of your Playwright tests, you need to set the `video` option in your Playwright config file.
```js
// config.js
module.exports = {
projects: [
{
name: 'chromium',
use: {
headless: false,
video: 'on',
},
},
],
};
```
This will record a video of all of your tests, regardless of whether they pass or fail.
You can also configure the video recorder to only record videos of failing tests, or to record videos of specific tests.
To only record videos of failing tests, set the `video` option to `'retain-on-failure'`.
```js
// config.js
module.exports = {
projects: [
{
name: 'chromium',
use: {
headless: false,
video: 'retain-on-failure',
},
},
],
};
```
To record videos of specific tests, set the `video` option to an array of test names.
```js
// config.js
module.exports = {
projects: [
{
name: 'chromium',
use: {
headless: false,
video: ['my-test-1', 'my-test-2'],
},
},
],
};
```
Once you have configured the video recorder, you can run your tests by executing the following command:
```
npx playwright test
```
This will run your tests and record videos of the results.
The videos will be saved to the `playwright-report` directory.
**Troubleshooting**
If you are having problems recording videos of your tests, here are a few things you can check:
* Make sure that you have set the `video` option in your Playwright config file.
* Make sure that you are using a supported browser. Playwright currently supports Chromium, Firefox, and WebKit.
* Make sure that you have enough disk space to save the video files.
* Try restarting your computer.
Hello, please make a tutorial for doing API calls (for an Outlook token OTP, for example) within Playwright
I will do Fatima
Hi Raghav, how to use waits in the playwright. Thanks
Hi Sirisha
Playwright uses waits to ensure that your tests are stable and reproducible. There are a few different ways to use waits in Playwright:
* The wait() method. This method waits for a certain amount of time before continuing. For example, the following code will wait for 5 seconds before continuing:
Code snippet
await page.wait(5000);
* The until() method. This method waits for a condition to be met before continuing. For example, the following code will wait until the element with the ID "my-element" is visible before continuing:
Code snippet
await page.until(element => element.isVisible());
* The waitForSelector() method. This method waits for a selector to be visible before continuing. For example, the following code will wait until the selector ".my-class" is visible before continuing:
Code snippet
await page.waitForSelector(".my-class");
* The waitForXPath() method. This method waits for an XPath expression to be visible before continuing. For example, the following code will wait until the XPath expression //div[@id="my-element"] is visible before continuing:
Code snippet
await page.waitForXPath("/div[@id='my-element']");
* The waitForTimeout() method. This method waits for a certain amount of time before throwing an error. For example, the following code will wait for 5 seconds before throwing an error:
Code snippet
await page.waitForTimeout(5000);
* The waitForNavigation() method. This method waits for a navigation to complete before continuing. For example, the following code will wait until the current page has loaded before continuing:
Code snippet
await page.waitForNavigation();
* The waitForResponse() method. This method waits for a response to be received before continuing. For example, the following code will wait until a response with the status code 200 is received before continuing:
Code snippet
await page.waitForResponse({status: 200});
* The waitForEvents() method. This method waits for a certain number of events to be fired before continuing. For example, the following code will wait for 5 events of type "click" to be fired before continuing:
Code snippet
await page.waitForEvents({type: "click", count: 5});
You can also use a combination of these methods to create more complex waits. For example, you could use the wait() method to wait for a certain amount of time, and then use the until() method to wait for a condition to be met.
Here are some examples of how you can use waits in Playwright:
* Wait for an element to be visible. You can use the until() method to wait for an element to be visible before continuing. For example, the following code will wait until the element with the ID "my-element" is visible before continuing:
Code snippet
await page.until(element => element.isVisible());
* Wait for a selector to be visible. You can use the waitForSelector() method to wait for a selector to be visible before continuing. For example, the following code will wait until the selector ".my-class" is visible before continuing:
Code snippet
await page.waitForSelector(".my-class");
* Wait for an XPath expression to be visible. You can use the waitForXPath() method to wait for an XPath expression to be visible before continuing. For example, the following code will wait until the XPath expression //div[@id="my-element"] is visible before continuing:
Code snippet
await page.waitForXPath("/div[@id='my-element']");
* Wait for a certain amount of time. You can use the wait() method to wait for a certain amount of time before continuing. For example, the following code will wait for 5 seconds before continuing:
Code snippet
await page.wait(5000);
* Wait for a navigation to complete. You can use the waitForNavigation() method to wait for a navigation to complete before continuing. For example, the following code will wait until the current page has loaded before continuing:
Code snippet
await page.waitForNavigation();
* Wait for a response to be received. You can use the waitForResponse() method to wait for a response to be received before continuing. For example, the following code will wait until a response with the status code 200
Raghav - I used screenshot in my script but when I tried in our test I am able to capture only on one step. Is there can capture multiple steps? Also perform image to text and compare a text in a test. I have script with 40steps and I want to capture screenshot for total 4 steps and generate tex on those 4 screenshots. So far I watch few video and it used only in one step.
For image to text I used " //convert from image to text
async function convertToText(name) {
let imgText = await Tesseract.recognize(`./screenshots/${name}`, 'eng');
const storetextdata = imgText.data.text;
console.log("Image to Text Data"+storetextdata);
expect(storetextdata.includes("Test Passed")).toBeTruthy();
In Test step I have added :
//Start capturing screenshot
const name = Date.now();
await page.screenshot({ path: `screenshots/${name}.png`, fullpage: true});
await convertToText(`${name}.png`);
Hi SD
To capture multiple screenshots in Playwright, you can include the screenshot code in each step of your script where you want a screenshot captured. For example:
//Step 1
const name1 = 'step1';
await page.screenshot({ path: `screenshots/${name1}.png`, fullPage: true });
//Step 2
const name2 = 'step2';
await page.click('#element');
await page.screenshot({ path: `screenshots/${name2}.png`, fullPage: true });
//Step 3
const name3 = 'step3';
await page.fill('#input', 'value');
await page.screenshot({ path: `screenshots/${name3}.png`, fullPage: true });
As for performing OCR on the screenshots and comparing text in a test, you can modify your convertToText function to accept a parameter for the expected text and include an assertion to check if the expected text is present in the OCR output. For example:
async function convertToText(name, expectedText) {
let imgText = await Tesseract.recognize(`./screenshots/${name}`, 'eng');
const storetextdata = imgText.data.text;
console.log("Image to Text Data: " + storetextdata);
expect(storetextdata.includes(expectedText)).toBeTruthy();
}
//Test step
const name = Date.now();
await page.screenshot({ path: `screenshots/${name}.png`, fullpage: true});
await convertToText(`${name}.png`, 'Expected Text');
This modified convertToText function takes two parameters: the name of the screenshot file and the expected text to be present in the OCR output. The expect assertion checks if the expected text is present in the OCR output. You can call this function for each of the 4 steps where you want OCR and text comparison to be performed.
Thank you Raghav for explaining this in detail. You are Awesome and enjoying your video.
Hi Raghav, I have one more question, I used the same code as you have for the slow motion and recording, once the test is completed, I'm having an error related to the timeout: "Test timeout of 10000ms exceeded.".
All the steps are pass, just having that error. 10000ms is the time I have set in my config file "timeout: 10 * 1000,"
What can I do? increase or decrease the time?
Thanks again.
In my test file, I decrease the "SlowMo" value from 1000 to 500 and I don't have the error anymore. Then please just confirm, is the timeout set in my config file the maximum time to complete the test? if this timeour is reach and the test has not finished, then I'll get this error about timeout?
Jorge
The timeout you've set in your configuration file (`timeout: 10 * 1000`) indeed represents the maximum time allowed for a test to complete. If the test execution exceeds this duration, you'll encounter the "Test timeout exceeded" error.
Here are some considerations:
1. Timeout Configuration:
- The timeout value is crucial for ensuring that tests don't run indefinitely. It's a safety mechanism to prevent hanging tests.
- If your tests consistently complete within the specified time, there's no need to adjust it.
2. SlowMo and Timeout Interaction:
- The `slowMo` value affects the execution speed by introducing delays between actions. When you decreased it from 1000 to 500, the overall test duration decreased.
- If your tests involve animations or asynchronous actions, a longer `slowMo` might be necessary.
- However, keep in mind that `slowMo` doesn't directly impact the timeout. It only affects the pacing of actions.
3. Choosing the Right Timeout:
- Consider the complexity of your application, network latency, and the number of steps in your test.
- If your tests consistently complete within the current timeout, there's no need to change it.
- If you encounter timeouts frequently, consider increasing the timeout to allow more time for slower actions.
4. Debugging Slow Tests:
- If a test consistently approaches the timeout, investigate why it's taking longer:
- Check for long-running network requests.
- Inspect whether any actions are waiting indefinitely (e.g., waiting for an element that never appears).
- Review your test logic and ensure efficient waits (using `waitFor`, `waitForSelector`, etc.).
5. Test Stability:
- Strive for stable tests that consistently complete within the specified timeout.
- If a test occasionally exceeds the timeout due to external factors (e.g., flaky network), consider using retries or adjusting the timeout slightly.
Remember that the timeout is a balance between ensuring timely test execution and allowing sufficient time for realistic interactions. Adjust it based on your specific use case and the stability of your tests.
...
@@RaghavPal great, thanks a lot!
Thank you so much for the tutorial. I have a question. After recording, and run a test, it used to show timeline of how long it takes to test each line, not it disappeard. How do I get that time showing back? Thank you in advance.
Hi Jin
To get the timeline of how long it takes to test each line back in Playwright, you can follow these steps:
1. Open the Playwright test runner.
2. Click on the "Timeline" tab.
3. The timeline will show you a breakdown of how long each line of code took to execute.
If the timeline is not showing, it is likely because you have not enabled it. To enable the timeline, follow these steps:
1. Open the Playwright test runner.
2. Click on the "Settings" icon.
3. In the "Settings" dialog, select the "Timeline" checkbox.
4. Click on the "Save" button.
Once you have enabled the timeline, it will be shown by default when you run a test.
Here are some additional things to note about the Playwright timeline:
* The timeline shows the time it takes for each line of code to execute, including the time it takes to wait for asynchronous operations to complete.
* The timeline is divided into two sections: the "Execution" section shows the time it takes for each line of code to execute, and the "Wait" section shows the time it takes for asynchronous operations to complete.
* You can hover over a line in the timeline to see more information about that line, such as the name of the function that was executed and the arguments that were passed to the function.
* You can click on a line in the timeline to focus on that line in the test runner
Hi Raghav,
I am to launch my project application which is designed in Angular but unable to do so. The browser is opening but its just keeps on loading.
Any suggestions?
Also , by changing the url to some other value is working fine like the one which you mentioned is working fine.
Hi Ankita,
If you are able to launch the application with a different URL and it works fine, it's possible that there could be an issue with the URL you are using. Here are a few things you can check:
Ensure that the URL you are using is correct and is pointing to the correct location of your application.
Check if the URL you are using is accessible from the machine where you are running your REST Assured tests. Sometimes, network restrictions or firewalls can prevent access to certain URLs, so it's worth checking if that's the case.
Check if there are any errors or issues in the console of the browser that's launched by REST Assured. If there are any errors, it could indicate an issue with your application, which could be causing the loading issue.
Check if your Angular application requires any specific headers or cookies to be set to work properly. REST Assured provides the ability to set headers and cookies in your HTTP requests, so it's worth checking if any such settings are required for your application to work.
If none of the above suggestions work, it might be worth checking if there is any issue with the configuration of your REST Assured tests or the environment in which they are running. It's also worth checking if there are any known compatibility issues between REST Assured and Angular, as that could be a factor as well.
Hi Raghav in my config.js i dont get any option for const config = {, I'm only getting module.exports = defineConfig({
Devbrat
The reason for this is that Playwright uses a specific configuration format, which is based on the `defineConfig` function from `@playwright/test`.
Here's what's happening:
The `module.exports` syntax
In Node.js, `module.exports` is a way to export a value from a module (in this case, your `config.js` file) so that it can be imported and used by other parts of your application.
The `defineConfig` function
`defineConfig` is a function provided by `@playwright/test` that helps you define a configuration object for your Playwright tests. It's a way to create a configuration object that's specific to Playwright.
When you use `defineConfig`, you pass an object with configuration options as an argument. This object will be used to configure your Playwright tests.
Why you're seeing `module.exports = defineConfig({`
In your `config.js` file, you're seeing `module.exports = defineConfig({` because this is the recommended way to define a configuration object for Playwright tests.
By using `module.exports = defineConfig({`, you're exporting a configuration object that's defined using the `defineConfig` function. This object will be used to configure your Playwright tests.
What to do next
To define your configuration object, you can add properties to the object passed to `defineConfig`. For example:
```javascript
module.exports = defineConfig({
// Your configuration options go here
timeout: 30000,
retries: 2,
//...
});
```
Replace the comments with the actual configuration options you want to use for your Playwright tests.
That's it! You should now have a valid `config.js` file that defines a configuration object for your Playwright tests
-
hello,
Thank you for your video.
i followed your steps on how to record test but it was not recorded. Please can you guide me on what to do?
Sharon
Let me know where exactly and which step you face issue.
In General, here are the steps
1. Recording Videos During Test Execution:
- By default, video recording is turned off in Playwright. However, you can enable it by configuring the `video` option in your Playwright config.
- Here are the available options for video recording:
- `'off'`: Do not record video.
- `'on'`: Record video for each test.
- `'retain-on-failure'`: Record video for each test, but remove videos from successful test runs.
- `'on-first-retry'`: Record video only when retrying a test for the first time.
- Video files will appear in the test output directory (typically `test-results`).
- To enable video recording, modify your Playwright config (e.g., `playwright.config.ts`):
```typescript
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
video: 'on-first-retry', // Choose your desired mode
},
});
```
2. Specifying Video Size:
- By default, the video size matches the viewport size (scaled down to fit 800x800).
- You can customize the video size by specifying the width and height in your config:
```typescript
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
video: {
mode: 'on-first-retry',
size: { width: 640, height: 480 }, // Adjust as needed
},
},
});
```
3. Accessing Video Files:
- For multi-page scenarios, you can access the video file associated with a page using `page.video().path()`.
- Note that the video is only available after the page or browser context is closed.
Remember to adjust the settings according to your requirements.
..
Hey Raghav, please can you create a tutorial where if one has to click and check multiple links on a page to find if there is a 404 link on a page, how that can be done ? using Playwright without having to click on them. Similar to how it's done in selenium with HTTP method. I haven't come across a resource which can help that using Playwright.
Hi Divyanshu, you can use the below code to get all the links on the page
found_elements = page.locator('a')
print(f"{found_elements.count()} link/links are found.")
Further you can take help from here
github.com/microsoft/playwright/issues/2708
stackoverflow.com/questions/70702820/how-can-i-click-on-all-links-matching-a-selector-with-playwright
Thank you so much, will give it a try
@@RaghavPal hi raghav I don't want to click on multiple links but want to check if they return 404 or not. How can I achieve that. Please can you help ?
Hi Divyanshu, I have not practically tried it, along with the above example, you can find some more options to add
@@RaghavPal okay, if possible can you create a lecture with Playwright on how to check if there are 404 links on a page. Then print those in output. It's a major part of maintenance projects where daily testing is done. I have tried a lot but couldn't come across a single video on Internet or documentation which could help me achieve that with Playwright. It would be mighty helpful.
I am trying to run the test from github actions, for 2 specific tests I am always getting this error " Error: locator.textContent: Page closed" in github actions while locally its working fine as expected
Based on the error I can understand that page is getting closed before playwright perform some actions on the UI , my question is how to handle such kind of scenario
Umesh
The error message "Error: locator.textContent: Page closed" means that the page has been closed before the playwright could perform the action. This can happen for a few reasons:
* The page is being closed by the user or by the browser.
* The page is being closed by a timeout.
* The page is being closed by an error.
To handle this scenario, you can try the following:
* Use a wait statement to wait for the page to load before you perform the action.
* Use a try/catch block to catch the error and handle it gracefully.
* Use a timeout to prevent the test from running for too long.
Here is an example of how you can use a wait statement to wait for the page to load before you perform the action:
```
const page = await playwright.chromium.launch();
await page.goto("example.com");
await page.waitForSelector(".my-element");
```
Here is an example of how you can use a try/catch block to catch the error and handle it gracefully:
```
try {
const text = await page.locator(".my-element").textContent;
} catch (error) {
console.log(error);
}
```
Here is an example of how you can use a timeout to prevent the test from running for too long:
```
const page = await playwright.chromium.launch();
await page.goto("example.com");
await page.waitForSelector(".my-element", { timeout: 10000 });
```
I hope this helps
@@RaghavPal superb thank you really appreciated , let me implement the above solution and get back to you
My score 7/7. thank
Great Anto... keep it up
спасибо братан! очень ценно!
Всегда пожалуйста
Hi Raghav, there is a typo in 1 quiz question anwser: Question: Where to set slow motion and video recording configuration at global level has an answer pacakge.json. That should be package.json. Also is should prefer that the first answer is: Playwright config file, instead of config file.
Please send me the quiz name or link
Hello Sir,
Could you please create videos for:
1) How to pass data-driven from excel files?
2) How to generate the reports in playwright.?
3) How to create POM?
Hi Manoj, sure, I will add these
@@RaghavPal Thanks
Please use the latest version, some configs was not working
okay I will check
Somehow video is not captured after adding the below configuration , please assist
use: {
video: 'on',
launchOptions:{
slowMo: 1000
},
Umesh
The configuration `use: { video: 'on' }` will enable video recording for all tests. However, the configuration `launchOptions:{ slowMo: 1000 }` will slow down the browser by a factor of 1000. This can prevent Playwright from recording the video.
To fix this issue, you can try the following:
* Remove the configuration `launchOptions:{ slowMo: 1000 }`.
* Increase the value of the `slowMo` option. For example, you could set `slowMo: 100`. This will slow down the browser by a factor of 100, which should be enough to record the video without affecting the performance of the tests.
* Use a different browser. Some browsers are better at recording videos than others. For example, Chromium is known to be a good browser for recording videos.
@@RaghavPal I have incorporated the feedback and tried the below 2 options , in both the cases it didnt work
Also I have noticed while running the script artifacts folder are getting created , after completion of run it gets deleted on its own
use: {
video: 'on',
},
outputDir: 'test-results/',
Or
use: {
video: 'on',
},
Please ignore now it started working
@@umesh1056 What was the fix? I am too facing the same issue
pls sir how can i correct this error>>Error: Cannot find module '@playwrights/test' Require stack:
- c:\Users\amodu.nicholas\Desktop\PlayWrite_Automation\Tests\SlowMotion_VideoRecording_Demo.spec.js
- c:\Users\amodu.nicholas\Desktop\PlayWrite_Automation
ode_modules\playwright\lib\transform\transform.js
- c:\Users\amodu.nicholas\Desktop\PlayWrite_Automation
ode_modules\playwright\lib\common\config.js
- c:\Users\amodu.nicholas\Desktop\PlayWrite_Automation
ode_modules\playwright\lib
eporters\html.js
- c:\Users\amodu.nicholas\Desktop\PlayWrite_Automation
ode_modules\playwright\lib
unner
eporters.js
- c:\Users\amodu.nicholas\Desktop\PlayWrite_Automation
ode_modules\playwright\lib
unner
unner.js
- c:\Users\amodu.nicholas\Desktop\PlayWrite_Automation
ode_modules\playwright\lib\program.js
- c:\Users\amodu.nicholas\Desktop\PlayWrite_Automation
ode_modules\@playwright\test\cli.jsplaywright
Nicholas
The error message you're encountering, "Cannot find module '@playwrights/test'", indicates that the @playwright/test module is not being found. Let's troubleshoot this issue:
1. Install @playwright/test:
- First, ensure that you have installed the @playwright/test package. If not, run the following command in your project directory:
```
npm install -D @playwright/test
```
- This command will add the @playwright/test package as a development dependency to your project.
2. Check Your Imports:
- Make sure you are importing the @playwright/test module correctly in your test file. It should look like this:
```javascript
import { test, expect } from '@playwright/test';
```
3. Remove playwright-expect (if applicable):
- You mentioned using playwright-expect. However, @playwright/test already includes web-first assertions, so there's no need for an additional library.
- Remove any references to playwright-expect from your code.
4. Transpile TypeScript (if using TypeScript):
- If you're using TypeScript, ensure that your TypeScript files are transpiled correctly.
- @playwright/test might not consider your tsconfig.json when transpiling TypeScript files. Manually transpile your TypeScript files using the following command:
```
npx tsc
```
- Refer to the [official Playwright documentation](playwright.dev/docs/test-typescript) for more details on using TypeScript with Playwright.
5. Check File Paths:
- Verify that the file paths in your project structure are correct. Ensure that the test file path matches the actual location of your test script.
6. Clean Cache and Reinstall:
- Sometimes, cached dependencies can cause issues. Try cleaning the npm cache and reinstalling the dependencies:
```
npm cache clean --force
npm install
```
7. Restart Your IDE or Terminal:
- Sometimes, IDEs or terminals may not pick up changes immediately. Restart your development environment to ensure everything is up to date.
Remember to adapt these steps to your specific project setup.
..
Playwright using excel
I will plan Nagendran
Your videos are really great, I'm learning a lot.
I'm having this question since previous video...
For your test file login_demo.spec.js, I think you have 3 different test, my question is: is it possible to run a single test without using "test.only"? something like:
npx playwright test login_demo.spec.js/Demo Login Test 3
Thanks in advance
Jorge
Certainly! You can run a single test in Playwright without using `test.only`. Here are the ways to achieve this:
1. Run a Single Test File:
- To run a specific test file, simply provide the name of the test file you want to execute:
```
npx playwright test login_demo.spec.js
```
- This command will run all the tests within the specified file.
2. Run Specific Tests by Title:
- If you want to run a specific test within a file, use the `-g` flag followed by the title of the test:
```
npx playwright test -g "Demo Login Test 3"
```
- This will execute only the test with the specified title.
3. Run Tests in Headed Mode:
- By default, tests run in headless mode (no visible browser window).
- If you want to see the browser window while the test runs, use the `--headed` flag:
```
npx playwright test login_demo.spec.js --headed
```
Remember to adjust the commands based on your specific test file names and titles. Happy testing…
@@RaghavPal thanks a lot!