Playwright Beginner Tutorial 9 | Assertions

[@ruixue6955]

6:40 *Explore* button in the automatically opened browser 7:34 add *assertion* : check element present or not 8:04 *toHaveCount(x)* 9:04 locator with $ sign 11:02 helpful to use IT in a condition 11:42 check element hidden 15:25 *soft assertion* 19:55 use regular expression 26:00 toHaveScreenShot

[@RaghavPal]

Thanks for adding the timestamps

[@eco89]

Best playwright series on KZbin. plz add more video.

[@RaghavPal]

Thanks a lot Prashant

[@Shahzilrind]

You are helping a lot of people and God will reward your for this ameen

[@RaghavPal]

Thanks Shahzil

[@simonfermor4136]

Really enjoying these videos. Pace is just right and the quizzes are very useful for checking understanding. Thank you!

[@RaghavPal]

Glad you like them Simon

[@parasharp28]

The screenshot feature is just awesome, I'd add it for each new page in my app....marvelously easy and useful.

[@RaghavPal]

Indeep Pranav.. keep learning

[@MamzP_007]

Hi Raghav As always, thank you for such easy to understand learning sessions. Have a que - on my playwright inspector, I can't see "Explore". I can only see "Locator" and "Log"

[@RaghavPal]

If you have followed exact steps as in the video.. it may be changes in the new version.. in any case you can check these: 1. Debug Mode: First, make sure you’re running your tests in debug mode. You can do this by adding the --debug flag when running your tests. For example:
npx playwright test --debug 2. 
This will open the Playwright Inspector UI 3. VS Code Extension: If you’re using Visual Studio Code (VS Code), consider using the Playwright extension for a better debugging experience. You can install it from the VS Code marketplace 4. Restart VS Code: Sometimes, a simple restart of VS Code can resolve issues related to test visibility. Give that a try if you haven’t already 5. Check Dependencies: Ensure that you’re using the latest versions of Playwright, VS Code, and any related dependencies. Outdated versions might cause compatibility issues 6. Configuration: Double-check your Playwright configuration. Misconfigurations can sometimes lead to unexpected behavior. Remember, the Playwright Inspector allows you to step through tests, live edit locators, pick locators, and see actionability logs -

[@grooveneedy]

thank you it is helping me a lot with my playwright journey

[@RaghavPal]

Great Nidhi, all the best

[@tejashreerane1277]

Thank you so much for this series..it is really helping me to learn..

[@RaghavPal]

Most welcome Tejashree

[@nileshthummar5317]

Hello Sir, You are doing such an amazing job, this way explanation is more useful for everyone like from scratch. I have some doubts, I am a new in the playwright tool. i am used to selenium. now I want to move on Playwright. so, 1. if the playwright is handled automatically element/locator is visible/enable/clickable etc... before the transaction/action then why do we check manually? using assertion or if else condition. 2. if the timeout is set larger like 1 minute or maybe more so never get an error for that. ideally, our goal is once the element/locator is intractable then after performing action on it right? So why not set it this way. 3. how to get text from the element/locator so we can use in the next transaction. 4. In Selenium we have 2 options of locator like findElement and findElements then in Playwright, we have such things. 5. how to manage TAB, means opening new TAB/Window and action on it and returning back to the main TAB/Window. NOTE- can you create the one video where open the browser and open the appropriate URL and then perform some action on it and redirect to new TAB then perform actions on it and return to main. here you can do like all the possible operations using different ways like 1. using different locators, like selector, XPath, id etc.... each one example 2. perform action on different elements like textbox, radio button, checkbox, list, dropdown etc.... this demo is more useful for everyone either newer or experience one as well. also use this in any suitable or easy framework like POM.

[@RaghavPal]

Thanks a lot Nilesh Let's dive into your questions about Playwright and explore how it compares to Selenium. 1. Automatic Element Handling: - Playwright does indeed handle element visibility, enablement, and other conditions automatically. It waits for elements to be ready before interacting with them. This feature is called "auto-wait." - However, manual checks (using assertions or conditional statements) are still valuable. They allow you to add custom logic or handle specific scenarios. For example, you might want to verify additional conditions beyond visibility, such as specific text content or attribute values. - So, while Playwright handles most waiting automatically, manual checks provide flexibility and customization. 2. Timeouts: - Setting a longer timeout (e.g., 1 minute) can indeed prevent errors due to slow-loading elements. - However, it's essential to strike a balance. Longer timeouts can slow down your test suite unnecessarily. Ideally, you want to wait only as long as necessary. - Consider using shorter timeouts initially and increasing them only when needed for specific elements. You can set different timeouts for specific actions if required. 3. Getting Text from Elements: - To retrieve text from an element in Playwright, you can use the `.innerText()` method. For example: ```javascript const myElement = await page.$('#myElementId'); const elementText = await myElement.innerText(); console.log('Element text:', elementText); ``` - You can then use `elementText` in subsequent steps. 4. Locators in Playwright: - Playwright provides various locators similar to Selenium: - CSS selectors: Use `page.$(selector)` or `page.$$(selector)` for single or multiple elements, respectively. - XPath: Use `page.waitForSelector(xpath)` or `page.waitForXPath(xpath)` to wait for an element. - ID, class, and other attributes: Use `page.$('#myId')` or `page.$('.myClass')`. - Choose the one that suits your preference or project requirements. 5. Managing Tabs and Windows: - Playwright allows you to work with multiple tabs/windows: - Open a new tab/window: Use `page.context().newPage()` to create a new browser context (tab). - Navigate to a URL in the new tab: `await newPage.goto('example.com')`. - Perform actions in the new tab: Interact with elements as usual. - Return to the main tab: Switch back to the original page using `await page.bringToFront()`. Video Demo Request: I apologize, but as an AI language model, I cannot create videos directly. However, I can guide you through the steps to create the demo you described. You can follow these steps manually or use them as a script for creating your video tutorial: 1. Setup: - Install Playwright (if not already done). - Create a new Playwright project or folder. 2. Write a Test Script: - Open a browser context: `const browser = await playwright.chromium.launch();`. - Create a new page: `const page = await browser.newPage();`. - Navigate to a URL: `await page.goto('example.com');`. - Interact with elements (e.g., fill a form, click buttons). - Open a new tab: `const newPage = await browser.newPage();`. - Navigate in the new tab: `await newPage.goto('another-site.com');`. - Perform actions in the new tab. - Return to the main tab: `await page.bringToFront();`. 3. Cleanup: - Close the browser context: `await browser.close();`. Remember to adapt the script to your specific use case and framework (such as POM). Good luck with your transition to Playwright

[@nileshthummar5317]

@@RaghavPal Thanx Sir. good explanation and quick reply. really you are an amazing person 🙏

[@piyushpranav83]

Hi Raghav, Thank you for this wonderful session. Can we click on PDF forms button using playwright. (Like: PDF appeared and then we have to click client consent "I Agree" button placed on PDF)

[@RaghavPal]

Piyush When working with PDF forms in Playwright, you'll need to interact with the underlying HTML elements within the PDF viewer. Here's how you can approach this: 1. Identify the Button: - First, ensure that the "I Agree" button in the PDF form has a unique identifier (such as an `id` or `class`). - You'll need to inspect the PDF viewer using browser developer tools to find the correct selector for the button. 2. Navigate to the PDF Page: - Load the PDF using Playwright (e.g., `page.goto('example.com/my.pdf')`). - Make sure the PDF viewer is fully loaded before proceeding. 3. Locate and Click the Button: - Use Playwright's `page.locator()` to find the button element based on its selector. - Then, click the button using `.click()`. Example (assuming the button has an `id` of "agreeButton"): ```javascript const pdfUrl = 'example.com/my.pdf'; await page.goto(pdfUrl); // Wait for the PDF viewer to load (you might need to adjust the selector) await page.waitForSelector('.pdf-viewer'); // Locate and click the "I Agree" button await page.locator('#agreeButton').click(); ``` 4. Handling PDF Viewer: - Note that the PDF viewer itself might be an or a custom component. - If the PDF viewer is an , switch to it using `page.frame()` before locating the button. Remember to adapt the code above to your specific use case, considering the structure of the PDF viewer and the actual selector for the "I Agree" button. -

[@anandmohandas8307]

Hi Raghav, can we pass the path where the screenshot to be saved. I may need to take multiple screenshot in a test or a page and dont want it to be overwritten. Thanks !

[@RaghavPal]

Hi Anand, Yes, you can specify the path where to save screenshots in Playwright. Playwright provides a screenshot method to capture a screenshot of the current page. This method accepts an optional path parameter where you can specify the file name and location to save the screenshot. For example, if you want to save the screenshot as a PNG file to the screenshots directory, you can use the following code: page.screenshot({ path: 'screenshots/screenshot1.png' }); This way, you can take multiple screenshots in a test and save them to different file names or locations to avoid overwriting.

[@CCleanerShot]

there is a typo on the quiz 'await expect(locator).toHaveClass(/.*value/); ' locator would not exist in the context by itself (it would be page.locator), but is a valid answer

[@RaghavPal]

ok, thanks for letting me know

[@JoolieEm]

16:20 I must be doing something wrong. It stops the execution after the failed assertion, it doesn't continue to run the test and I did the same config settings like you did :( Maybe something changed in Playwright since when you were recording that video...

[@RaghavPal]

Hi Justyna Yes, by default, Playwright will stop the execution of a test after a failed assertion. This is because assertions are used to verify that the expected behavior of a test is being met. If an assertion fails, it means that the expected behavior is not being met, and there is no point in continuing to run the test. However, there are times when you may want to continue running a test even after an assertion fails. For example, you may want to continue running the test to see if other assertions fail. Or, you may want to continue running the test to collect more information about the failure. In these cases, you can use Playwright's soft assertions. Soft assertions do not terminate the execution of a test when they fail. Instead, they mark the test as failed. This allows you to continue running the test to see if other assertions fail or to collect more information about the failure. To use soft assertions, you need to use the `expect.soft()` method instead of the `expect()` method. For example, the following code uses a soft assertion to check that the title of a page is "My Page": ``` await expect.soft(page.title()).toBe("My Page"); ``` If the title of the page is not "My Page", the assertion will fail, but the test will continue to run. You can also use soft assertions to check for the presence of elements on a page. For example, the following code uses a soft assertion to check that an element with the id "my-element" is present on the page: ``` await expect.soft(page.hasElement("#my-element")); ``` If the element with the id "my-element" is not present on the page, the assertion will fail, but the test will continue to run. Soft assertions can be a useful tool for debugging tests. They allow you to continue running a test even after an assertion fails, which can help you to identify the root cause of the failure

[@JoolieEm]

@@RaghavPal Hi Raghav, thank you so much for your extensive explanation. I actually made a mistake and forgot to add the .soft keyword to it, sorry 🤦‍♀

[@bobbilibiker2330]

Hi. i am running into a probelm. when i am waiting for a dynamically changing test on a button, my script is failing. what is the assertion i need to use to wait for the button toget updated with the expected text.

[@RaghavPal]

Issue: Waiting for a dynamically changing button text with Playwright Let's break down the problem step by step: Step 1: Understand the requirement You want to wait for a button's text to update to a specific expected text. This means you need to assert that the button's text has changed to the expected value before proceeding with your test. Step 2: Identify the Playwright method to use Playwright provides several methods to wait for elements to meet certain conditions. In this case, you can use the waitForFunction method, which waits for a function to return a truthy value. Step 3: Define the function to wait for You need to define a function that checks if the button's text has updated to the expected value. This function will be passed to waitForFunction. Here's an example: javascript await page.waitForFunction( (buttonSelector, expectedText) => { const button = document.querySelector(buttonSelector); return button && button.textContent.trim() === expectedText; }, buttonSelector, // Replace with the actual button selector expectedText // Replace with the actual expected text ); In this example, the function takes two arguments: buttonSelector and expectedText. It uses document.querySelector to find the button element and checks if its textContent property matches the expectedText. The function returns a truthy value (i.e., the button element) if the text matches, and a falsy value (i.e., undefined) otherwise. Step 4: Use the waitForFunction method Call the waitForFunction method, passing the function defined in Step 3, along with the button selector and expected text as arguments. Here's the complete example: javascript const buttonSelector = '#myButton'; // Replace with the actual button selector const expectedText = 'Updated Button Text'; // Replace with the actual expected text await page.waitForFunction( (buttonSelector, expectedText) => { const button = document.querySelector(buttonSelector); return button && button.textContent.trim() === expectedText; }, buttonSelector, expectedText ); Step 5: Proceed with your test Once the waitForFunction method resolves, you can proceed with your test, knowing that the button's text has updated to the expected value. -

[@manzhoska]

Thank you Raghav, you are my teacher in youtube. You help me to build knowledge in a very step-by-step way. I enjoy you being your student. And I'm wondering, if it's possible and how to make a screenshot only in case of check failure?

[@RaghavPal]

So nice of you Kateryna Yes, it is possible to make a screenshot only in case of check failure in Playwright. There are two ways to do this: 1. Use the `expect()` function with the `toMatchSnapshot()` matcher. 2. Use the `page.screenshot()` method with the `onlyOnFailure` option. **Using the `expect()` function with the `toMatchSnapshot()` matcher** The `expect()` function allows you to assert the state of your application under test. The `toMatchSnapshot()` matcher allows you to assert that the current state of your application matches a snapshot. To take a screenshot only in case of check failure using the `expect()` function with the `toMatchSnapshot()` matcher, you can use the following code: ``` const page = await playwright.chromium.launch(); await page.goto('example.com'); await expect(page).toMatchSnapshot('my_snapshot.png', { onlyOnFailure: true, }); ``` If the snapshot does not match the current state of your application, Playwright will take a screenshot and save it to the file `my_snapshot.png`. **Using the `page.screenshot()` method with the `onlyOnFailure` option** The `page.screenshot()` method allows you to take a screenshot of the current page. The `onlyOnFailure` option tells Playwright to only take a screenshot if the check fails. To take a screenshot only in case of check failure using the `page.screenshot()` method with the `onlyOnFailure` option, you can use the following code: ``` const page = await playwright.chromium.launch(); await page.goto('example.com'); await page.screenshot({ path: 'my_screenshot.png', onlyOnFailure: true, }); ``` If the check fails, Playwright will take a screenshot and save it to the file `my_screenshot.png`. Which method you use to take a screenshot only in case of check failure depends on your personal preference. However, I recommend using the `expect()` function with the `toMatchSnapshot()` matcher, as it is more concise and easier to read. I hope this helps

[@seshagirik4066]

Thank you , very useful.

[@RaghavPal]

Most welcome

[@cardozclive]

1. Why do you sometimes use import {test, expect} from '@playwright/test' and sometimes import test {page, expect} from @playwright/test' 2. Is there a difference between const{test, expect} = require("@playwright/test") and the above two?

[@RaghavPal]

Clive When working with Playwright, you may have noticed different ways to import the test and expect functions. Let's break down the differences between them. 1. import {test, expect} from '@playwright/test' This is the most common way to import test and expect using ES6 syntax. The curly braces {} are used to specify that we want to import specific exports from the @playwright/test module. This syntax is used when you're working with a modern JavaScript project that supports ES6 modules. 2. import test, {page, expect} from '@playwright/test' This syntax is used when you want to import the test function as the default export, and also import specific named exports like page and expect. The test function is imported without curly braces because it's the default export, while page and expect are imported with curly braces as named exports. 3. const {test, expect} = require("@playwright/test") This syntax is used when you're working with a project that uses CommonJS modules instead of ES6 modules. The require function is used to load the @playwright/test module, and the const {test, expect} = ... syntax is used to destruct the exports object and assign the test and expect functions to constants. Key differences ES6 modules vs CommonJS modules: The first two examples use ES6 modules, while the third example uses CommonJS modules. ES6 modules are the default in modern JavaScript projects, while CommonJS modules are used in older projects or projects that don't support ES6 modules. Default exports vs named exports: The second example shows how to import the test function as the default export, while the first and third examples import test as a named export. In summary, the choice of import syntax depends on the type of project you're working on and the specific exports you need to use from the @playwright/test module -

[@D온뉘]

hi~ SyntaxError: The requested module '@playwright/test' does not provision an export named 'page' error, how do I resolve it? And I suddenly got import and test in the middle, but I think the explanation of this part was omitted. Please explain!

[@RaghavPal]

Certainly! Let's address the issue related to the `@playwright/test` module and the missing export named `'page'`. I'll explain what might be causing this error and how to resolve it. 1. The Error Message: - The error message you're encountering, "SyntaxError: The requested module '@playwright/test' does not provide an export named 'page'," indicates that you're trying to import an export named `'page'` from the `@playwright/test` module, but it's not available. 2. Explanation: - The `@playwright/test` package provides testing utilities specifically for Playwright (a browser automation library). - The `page` object is a central component in Playwright. It represents a browser page or tab. - If you're trying to use `page` in your test scripts, you need to ensure that it's correctly imported from `@playwright/test`. 3. Possible Solutions: - Here are some steps to resolve this issue: a. Check Your Import Statement: - Verify that your import statement is correct. Make sure you're importing `page` from the right location. - Example import statement: ```javascript import { chromium, page } from '@playwright/test'; ``` b. Update Dependencies: - Ensure that you have the latest version of `@playwright/test` installed. - Run the following command to update the package: ``` npm install --save-dev @playwright/test ``` c. Type Declarations: - If you're using TypeScript, make sure you have type declarations available for `@playwright/test`. - You can import `page` with type information like this: ```typescript import { chromium, Page } from '@playwright/test'; ``` d. Check Your Test Configuration: - Ensure that your test configuration (such as test runner settings) is correctly set up to use `@playwright/test`. - If you're using a custom test runner, make sure it recognizes the `@playwright/test` exports. 4. Regarding the Mention of "Import" and "Test": - Apologies for the abrupt mention of "import" and "test" in my previous response. It seems there was a context switch, and I appreciate your patience. - If you have any specific questions related to those topics, feel free to ask, and I'll provide a detailed explanation! Remember to verify your import statements, dependencies, and test configuration.

[@abdoubouji3138]

hey sir , i really need your help . when i make soft.except and put the locator then use toHaveCount it will always provide an error even it is a soft how can i make it a soft exception i really need it

[@RaghavPal]

Hi Abdou To make a soft exception in Playwright, you can use the `expect.soft` function. The `expect.soft` function takes a predicate as an argument. If the predicate evaluates to false, the test will continue to run, but the error will be logged. For example, the following code makes a soft exception if the element with the locator `"my-element"` does not have a count of 10: ``` const page = await playwright.default.goto("www.example.com"); await expect.soft(page.locator("my-element")).toHaveCount(10); ``` If the element does not have a count of 10, the test will continue to run, but the error will be logged. The error message will indicate that the exception was a soft exception. Here is an example of the error message that would be logged if the element does not have a count of 10: [ERROR] Soft exception: expected element with locator "my-element" to have count 10, but it had count 5 To make a soft exception in Playwright, you can also use the `expect.not.toHaveCount` function. The `expect.not.toHaveCount` function takes a count as an argument. If the element has a count of the specified value, the test will continue to run, but the error will be logged. For example, the following code makes a soft exception if the element with the locator `"my-element"` has a count of 5: ``` const page = await playwright.default.goto("www.example.com"); await expect.not.toHaveCount(page.locator("my-element"), 5); ``` If the element does have a count of 5, the test will continue to run, but the error will be logged. The error message will indicate that the exception was a soft exception. Here is an example of the error message that would be logged if the element does have a count of 5: ``` [ERROR] Soft exception: expected element with locator "my-element" not to have count 5, but it did ``` I hope this helps

[@MudassirDar]

Is it feasible to configure an automated email notification in case specific assertion or condition fails during script execution?

[@RaghavPal]

Mudassir While Playwright doesn't have a built-in mechanism for email notifications, you can effectively achieve this functionality by integrating external libraries or services. Here are common approaches: 1. Using a C# Email Library: - Install a Library: Choose a library like SmtpClient, MailKit, or others. - Within a Test or Fixture: - Employ the library to construct and send an email upon assertion failure or condition breach. - Example using SmtpClient: ```csharp using (var client = new SmtpClient("your-smtp-server", 587)) { client.Credentials = new NetworkCredential("your-email-address", "your-password"); client.EnableSsl = true; using (var message = new MailMessage("from-address", "to-address")) { message.Subject = "Playwright Test Failure"; message.Body = "Test case failed with message: " + assertionErrorMessage; client.Send(message); } } ``` 2. Utilizing a Third-Party Notification Service: - Choose a Service: Select a service like Slack, Microsoft Teams, or others that offer email integrations. - Set Up Webhooks or Integrations: Configure the service to receive notifications from your tests. - Within a Test or Fixture: - Send a notification to the service's API upon failure. - Example using Slack: ```csharp using (var client = new HttpClient()) { var content = new StringContent("Playwright test failed: " + assertionErrorMessage); content.Headers.ContentType = new MediaTypeHeaderValue("application/json"); await client.PostAsync("your-slack-webhook-url", content); } ``` 3. Leveraging Test Reporting Tools: - Choose a Tool: Select a tool like Allure TestOps, ReportPortal, or others that offer email notifications for test results. - Integrate with Playwright: Configure the tool to capture Playwright test results. - Set Up Email Notifications: Enable email notifications for failed tests within the tool's settings. Key Considerations: - Security: Store credentials securely, avoiding hardcoding them in code. - Customization: Tailor the notification content and recipient list according to your needs. - Integration: Ensure seamless integration with your existing email server or notification service. Choose the approach that best aligns with your infrastructure, preferences, and project requirements.

[@cardozclive]

Lets say I already have an older screenshots which I had taken manually. How do I use it to assert with webpage. How and where to put its path in the code? Thanks in advance

[@RaghavPal]

Clive Playwright provides a way to use existing screenshots for assertions using the expect.toMatchSnapshot method Here's how you can use it: Step 1: Store the existing screenshot Store the existing screenshot in a file, for example, expected-screenshot.png. Make sure the file is in a location that's accessible by your test code Step 2: Update your test code In your test code, use the expect.toMatchSnapshot method to compare the current page screenshot with the existing screenshot. You'll need to provide the path to the existing screenshot file as an option Here's an example: import { test, expect } from '@playwright/test'; test('example test', async ({ page }) => { await page.goto('example.com'); await expect(page).toMatchSnapshot('expected-screenshot.png', { // Optional: you can specify a threshold for the similarity threshold: 0.5, }); }); In this example, expected-screenshot.png is the path to the existing screenshot file. Where to put the screenshot file You can put the screenshot file in a directory that's accessible by your test code. For example, you can create a snapshots directory in the same directory as your test file, and store the screenshot file there. Here's an example directory structure: tests example.test.js snapshots expected-screenshot.png In this case, you would update the toMatchSnapshot method to use the relative path to the screenshot file: await expect(page).toMatchSnapshot('./snapshots/expected-screenshot.png', { threshold: 0.5, }); Tips Make sure the screenshot file is in the correct format (e.g., PNG) and has the correct dimensions. You can adjust the threshold option to control the similarity threshold for the comparison. If you're using a CI/CD pipeline, make sure the screenshot file is included in the pipeline's artifact or stored in a location that's accessible by the pipeline. -

[@cardozclive]

@@RaghavPal Thanks a ton. Your a savior.

[@sirishapochiraju3551]

Hi Raghav, In the playwright inspector tool am not seeing the explore option next to the playwright selector what u have in the video am only seeing pick up a locator are they both the same?

[@RaghavPal]

Hi Sirisha Yes, "Pick a locator" and "Explore" are essentially the same thing in the Playwright Inspector tool. When you select "Pick a locator", it allows you to hover over the elements on the page and click on them to generate a selector for the element. This selector is then shown in the "Selector" field, and you can use it to interact with the element in your test. When you select "Explore", it opens a pane at the bottom of the Inspector that displays all the elements that match the current selector. This allows you to see all the matching elements on the page and to select the one you want to interact with. So both options serve the purpose of generating a selector for an element, but "Explore" also allows you to see all the matching elements at once.

[@sirishapochiraju3551]

@@RaghavPal Thanks so much! definitely all of your answers will help! to become an expert in the tool

[@thomgordon567]

Hi, how would I assert the value of a drop-down? Which comparison is best? ' The complexity is that the field name and selected values are different. Perhaps there is also a vid? Apologies, new at this...

[@RaghavPal]

Hi, have found these resources, pls check: stackoverflow.com/questions/71545719/how-to-validate-drop-down-value-in-playwright github.com/microsoft/playwright/discussions/11472

[@santhoshmayal]

Im using VS Code Version: 1.85.1 (Universal) Commit on MAC and i couldn't find the EXPLORE button, but i can see PICK LOCATOR button in the playwright inspector, when i use this and hover on the element "The Kitchen" instead of 'text=The Kitchen' i see 'getByRole('heading', { name: 'The Kitchen' })' and when i copy paste in my code and run my code it gives an error "Error: No tests found" You told me this is due to the version issue, But can you please help me to find the EXPLORE button with the version i'm using??

[@santhoshmayal]

It works if i manually replace 'getByRole('heading', { name: 'The Kitchen' })' with 'text=The Kitchen'

[@RaghavPal]

I'm unable to access the specific details of Playwright's VS Code extension interface or error messages within my current context. However, based on your description, I can provide guidance and potential solutions: Missing "EXPLORE" Button: - Version-Specific Feature: The "EXPLORE" button might be a feature introduced in later versions of the Playwright VS Code extension. Consider updating to the latest version to see if it becomes available. - Alternative: PICK LOCATOR: While the "PICK LOCATOR" button serves a similar purpose, be mindful of the selector differences you've observed. Error: "No Tests Found": - Incorrect Selector: Double-check the copied selector for accuracy. Manually replacing it with `text=The Kitchen` suggests a potential issue with the generated selector. - Test File Structure: Ensure your Playwright tests are located in files with the `.spec.ts` or `.test.ts` extension and reside within a directory recognized by Playwright's test runner. - Configuration Issue: Verify that your project's configuration for Playwright tests is correct. Troubleshooting Steps: 1. Update Playwright Extension: Check for updates in the VS Code Marketplace and install the latest version. 2. Verify Test File Location: Ensure your test files are in the correct directory, with appropriate extensions. 3. Review Test Configuration: Check your project's configuration for Playwright tests, ensuring it's set up correctly. 4. Use Alternative Selector: If the generated selector causes issues, manually construct a selector like `text=The Kitchen` or explore other selector options. 5. Consult Documentation: Refer to Playwright's documentation and VS Code extension instructions for specific guidance on your version and configuration. 6. Seek Community Help: If the issue persists, seek assistance in Playwright's community forums or support channels for more targeted troubleshooting. Additional Tips: - Experiment with Selectors: Explore different selector strategies (e.g., CSS selectors, XPath) to find the most reliable approach for your elements. - Review Test Runner Configuration: Double-check your test runner's configuration to ensure it's correctly detecting and executing your tests. - Consider VS Code Version: If possible, try using a different VS Code version to see if the "EXPLORE" button appears.

[@dharnidharni753]

toHaveCount(1) ------->means to unique element with this locator present over in the dom and if mentioned toHaveCount(0) what does mean pls explain this case

[@RaghavPal]

Dharni Yes, you are right. The `toHaveCount()` method in Playwright is used to assert that the number of elements matching a given locator is equal to a specific value. In your example, `toHaveCount(1)` asserts that there is exactly one element matching the locator. The `toHaveCount(0)` method asserts that there are no elements matching the locator. This can be useful for verifying that a particular element is not present on the page. For example, the following code will assert that there is exactly one button element with the text "Submit": ``` await page.locator("button[text='Submit']").toHaveCount(1); ``` The following code will assert that there are no elements with the class name "error": ``` await page.locator(".error").toHaveCount(0); ``` I hope this helps 😊

[@prashantshrivastava2646]

Hi Sir, I am trying to get locator through Playwrigh inst 'getByRole('heading', { name: 'The Kitchen' })' but in video it is coming 'text=The Kitchen' please let me know what setting we have to do

[@RaghavPal]

Prashant The difference between `getByRole('heading', { name: 'The Kitchen' })` and `text=The Kitchen'` is that `getByRole()` is used to find an element by its role, while `text=` is used to find an element by its text content. The role of an element is a semantic indication of its purpose or function. For example, the role of a heading element is to indicate a section of a document. The name of an element is a human-readable label for the element. The text content of an element is the text that is displayed inside the element. In the case of the `getByRole()` query, Playwright will look for an element with the role of `heading` and a name of `The Kitchen`. If it finds more than one element that matches these criteria, it will return the first element that it finds. In the case of the `text=` query, Playwright will look for any element that contains the text `The Kitchen`. This includes elements with the role of `heading`, but it also includes other types of elements, such as paragraphs and spans. In general, it is a good idea to use `getByRole()` instead of `text=` whenever possible. This is because `getByRole()` is more specific and will only return elements that are semantically headings. This can help to avoid false positives and make your tests more reliable. However, there are some cases where you may need to use `text=`. For example, if you are testing a website that does not use semantic HTML, you may need to use `text=` to find elements by their text content. Here are some additional tips for using `getByRole()` and `text=`: *Use the most specific query possible.** The more specific you are, the less likely you are to get false positives. *Be aware of the limitations of each query.** `getByRole()` is more specific than `text=`, but it will not return elements that do not have a role. `text=` is more inclusive than `getByRole()`, but it will return elements that are not semantically headings. *Test your queries carefully.** Make sure that your queries are returning the elements that you expect. I hope this helps

[@prashantshrivastava2646]

@@RaghavPal Thank you Sir

[@thomgordon567]

Hi, In the 'Assertions' vid, the locator doesnt come up so simple anymore. For some reason I get a 'getbyRole' locator which my test script doesnt recognize. Any suggestions?

[@RaghavPal]

Try to manually add the assertions

[@aurigaqa5713]

Video was fantastic sir i have worked in selenium and want to follow that POM but i have failed , In sleneium i had a class where i passed all the paths and in another class i had called the class and run it , but i have failed to do that in playwright , can you give a demo of that ?

[@RaghavPal]

I will check and plan for it

[@ShubhamBasalwar-nc4gy]

Hi Raghav, can you tell me how we can use the assertion for partial text

[@RaghavPal]

Hi Shubham Yes, in Playwright, you can use the toContain method to check if a certain text string is present in the target element's text content. Here's an example: const { test, expect } = require('@playwright/test'); test('Check partial text', async ({ page }) => { await page.goto('www.example.com'); const element = await page.waitForSelector('h1'); const text = await element.textContent(); expect(text).toContain('Example'); // Check if the element contains 'Example' text }); In the above example, toContain method checks if the text "Example" is present in the h1 element's text content. If it is present, the test will pass; otherwise, it will fail. You can use this assertion method for other elements as well by selecting them using page.waitForSelector() or other similar methods.

[@ShubhamBasalwar-nc4gy]

Thank you Raghav

[@nicholasamodu6676]

Good morning sir. how can i upgrade my playwright version. the current one is 8.1.1

[@RaghavPal]

Nicholas To upgrade your Playwright version, follow these steps: 1. Check Current Version: - Open your terminal or command prompt. - Run the following command to check your current Playwright version: ``` npx @playwright/test --version ``` 2. Update to Latest Version: - To update Playwright to the latest version, run this command: ``` npm install -D @playwright/test@latest ``` - This will install the latest version of Playwright as a dev dependency in your project. 3. Check Updated Version: - After the installation, verify that Playwright has been updated by running: ``` npx @playwright/test --version ``` 4. Download New Browsers: - Playwright often requires updated browsers. Run the following command to download the latest browsers: ``` npx playwright install ```

[@Anto-fz2kw]

My score 9/10. thank

[@RaghavPal]

Great going Anto.. keep it up

[@shilpareddy2903]

I need to verify the error text where it is under tag p and class is error_list. How to write the assertion and how to write the command for this . Please help me raghav

[@RaghavPal]

Shilpa To verify the error text in Playwright, you can use the following steps: 1. Wait for the element with the tag `p` and the class `error_list` to be visible. 2. Get the text of the element. 3. Assert that the text of the element matches the expected error text. Here is an example of how to write the assertion and command for this: ``` // Wait for the element with the tag `p` and the class `error_list` to be visible. await page.waitForSelector('.error_list'); // Get the text of the element. const errorText = await page.evaluate(() => { return document.querySelector('.error_list').textContent; }); // Assert that the text of the element matches the expected error text. expect(errorText).toEqual('This is the expected error text'); ``` You can also use the `Playwright Extras` library to make it easier to verify the error text. The `Playwright Extras` library includes a `VerifyErrorText` class that can be used to verify the error text of an element. Here is an example of how to use the `VerifyErrorText` class to verify the error text: ``` import { VerifyErrorText } from '@playwright/test-extras'; // Create a new instance of the `VerifyErrorText` class. const verifyErrorText = new VerifyErrorText(page); // Verify that the error text of the element matches the expected error text. await verifyErrorText.verify('.error_list', 'This is the expected error text'); ``` I hope this helps

[@shilpareddy2903]

@@RaghavPal I tried the first method but no luck :( 1.await page.waitForSelector('.error_list'); Execution stuck in this step . The errorlist was identified when i am seeing in the headed mode but it is not going to next step .It is waiting for the error list too be visible .

[@RaghavPal]

will need to check,.. can try some online examples and check

[@sirishapochiraju3551]

Hi Raghav, what is the more commonly used assertion in the playwright?

[@RaghavPal]

Sirisha In Playwright, you can use various assertions to validate the expected behavior of your web application. Some of the commonly used assertions are: expect(page).toMatch(text) - This assertion checks if the text is present on the current page. expect(page).toHaveTitle(title) - This assertion checks if the title of the current page matches the title. expect(page).toHaveURL(url) - This assertion checks if the URL of the current page matches the url. expect(element).toBeVisible() - This assertion checks if the element is visible on the page. expect(element).toHaveText(text) - This assertion checks if the element has the expected text. expect(element).toHaveValue(value) - This assertion checks if the element has the expected value. These are just a few examples of the commonly used assertions in Playwright. You can also use custom assertions based on your specific testing requirements.

[@sirishapochiraju3551]

@@RaghavPal Thanks so much!

[@LeonC0704]

how can I test if an element is not there? If I deleted something and then want to check that It is gone

[@RaghavPal]

Can use this: await expect(page.locator(".MyClass")).toHaveCount(0)

[@arijitmohanty8216]

Hi Raghav Sir, I have solved the problem about run the test with following your instruction. This video is very helpful. Sir I want to know,is there any video for data driven testing like date insert from Excel into web application using playwright. Thanks for your guidance sir Arijit

[@RaghavPal]

Hi Arijit, not yet, I will plan

[@arijitmohanty8216]

@@RaghavPal Thanks sir.

[@shilpareddy2903]

Data insert from Excel into web application using playwright is available now?

[@ramutalari8473]

Hi Raghav, could you please let me know how to handle dynamic web table in playwright with JavaScript?

[@RaghavPal]

Hi Ramu, I will plan to do some hands-on, for now, check this stackoverflow.com/questions/65689719/is-there-a-way-in-playwright-to-select-a-specific-button-inside-a-dynamic-table

[@ramutalari8473]

​@@RaghavPal It would be great Raghav if you plan to cover this.

[@floweepospisilova6534]

thanks as always

[@RaghavPal]

My pleasure!

[@mohmmedyaseen5858]

sir in my playwright inspector there is no EXPLORE but i have PICK LOCATOR

[@RaghavPal]

Hi Yaseen The **Explore** button in the Playwright Inspector has been deprecated since version 1.18.0. You can use the **Pick Locator** button to generate selectors for elements on the page. To use the **Pick Locator** button, hover over an element on the page and click on the **Pick Locator** button. The Playwright Inspector will generate a selector for the element and display it in the **Selector** field. You can then copy the selector and use it in your Playwright tests. Here are the steps in detail: 1. Open the Playwright Inspector. 2. Hover over an element on the page. 3. Click on the **Pick Locator** button. 4. The Playwright Inspector will generate a selector for the element and display it in the **Selector** field. 5. Copy the selector and use it in your Playwright tests. I hope this helps

[@mohmmedyaseen5858]

@@RaghavPal thanks for your response sir

[@svksuman]

Test timeout of 5000ms exceeded ...all the time i am getting this error... Pls help me...

[@RaghavPal]

Hi Suman, The "Test timeout of 5000ms exceeded" error message indicates that your test has taken longer than the specified timeout of 5000 milliseconds (5 seconds) to complete. There are a few things you can try to resolve this issue: Increase the timeout: You can increase the timeout limit by adding the timeout option when you run your test. For example: test('my test', async () => { // test code here }, { timeout: 10000 }); // increase timeout to 10 seconds Optimize your test: If your test is taking too long to complete, it's possible that there are areas that can be optimized. Check if there are any unnecessary or redundant steps that can be removed or simplified. Use page.waitForSelector() method: If you are waiting for a specific element to load before proceeding with your test, you can use the page.waitForSelector() method instead of using a fixed timeout. For example: await page.waitForSelector('#my-element'); This method will wait for the element with the specified selector to be present in the page before continuing.

[@svksuman]

Thanks a lot for quick reply sir

[@nagendranfriends3153]

Playwright with excel

[@RaghavPal]

I will plan Nagendran

[@kannan8888]

Thanks for the great Job!! do you see what is missing in this code? this is python-playwright assertion expect(page.locator("text=The Kitchen")).to_have_attribute('class', /.*css-dpmy2a/)

[@RaghavPal]

Let me check

[@ahmethalal6926]

How can I use locator where heading is equal to : name: 'The Kitchen' I mean: await expect.soft(page.locator('heading', { name: 'The Kitchen' })).toBeVisible()// This does not work and await expect(page.getByRole('heading', { name: 'The Kitchen' })).toBeVisible() // THIS DOES WORK, why??

[@RaghavPal]

Hi Ahmet In Playwright, page.locator() creates a new locator instance, while page.getByRole() finds an existing locator by its role. To use page.locator() with the heading, you can use the innerText property of the heading element. Here's an example: await expect(page.locator('heading').withText('The Kitchen')).toBeVisible(); This creates a new locator instance for all heading elements and then filters it down to the one that contains the text 'The Kitchen'. On the other hand, page.getByRole() is a shortcut method that searches for an element with a specific ARIA role. In your case, it's finding the heading element with the name 'The Kitchen'.

[@HedgeHog-je6nf]

await expect(page.locator('question-element')).toBeOrNotToBe();

[@RaghavPal]

ok,, let me know if there is a question on this statement

[@HedgeHog-je6nf]

​@@RaghavPal No question, just a joke. Thank you for what you're doing for us.