Thank you so much Raghav. Found it useful. Getting an error though: Error: "context" and "page" fixtures are not supported in "afterAll" since they are created on a per-test basis. Help?
Kaushik Yes, you are correct. The `context` and `page` fixtures are not supported in the `afterAll` hook since they are created on a per-test basis. This means that each test will have its own unique context and page, and the `afterAll` hook will be called after all of the tests have finished running. To avoid this error, you can use the `beforeEach` hook instead of the `afterAll` hook. The `beforeEach` hook is called before each test, so you can use it to set up the context and page for each test. For example, the following code will create a new context and page for each test: ``` test.beforeEach(async ({ context, page }) => { context = await browser.newContext(); page = await context.newPage(); }); test('My test', async () => { await page.goto('www.google.com'); await expect(page.title).toBe('Google'); }); ``` I hope this helps
Thanks for the videos I have a question acording to use a login like a hook I've heard about that every test need to be unique and not to depende to another ones, that's correct?
Perpetuo Let's discuss how to handle authentication in Playwright tests and whether tests should be unique and independent. 1. Authentication in Playwright Tests: - Playwright executes tests in isolated environments called browser contexts. This isolation model improves reproducibility and prevents cascading test failures. - To avoid authenticating in every test (which can slow down test execution), you can load existing authenticated state. This means that once you authenticate, subsequent tests can reuse this state and start already authenticated. - Regardless of the authentication strategy you choose, you'll likely store authenticated browser state on the file system. Here's how you can approach it: 2. Basic Approach: Shared Account in All Tests: - This is the recommended approach for tests without server-side state. - Authenticate once in a setup project, save the authentication state, and then reuse it to bootstrap each test already authenticated. - Use this approach when: - You can imagine all your tests running at the same time with the same account, without affecting each other. - Your tests do not modify server-side state. - Example setup: - Create a `tests/auth.setup.ts` file that prepares authenticated browser state for all other tests. - In this file, perform the authentication steps (e.g., logging in). - Save the authenticated state using `page.context().storageState({ path: 'playwright/.auth/user.json' })`. - Declare this setup project as a dependency for all your testing projects in the configuration. 3. Example Code: - Here's a simplified example of the authentication setup: ```typescript // tests/auth.setup.ts import { test as setup, expect } from '@playwright/test'; const authFile = 'playwright/.auth/user.json'; setup('authenticate', async ({ page }) => { // Perform authentication steps. Replace these actions with your own. await page.goto('github.com/login'); await page.fill('[name="login"]', 'your-username'); await page.fill('[name="password"]', 'your-password'); await page.click('[value="Sign in"]'); // Wait until the page receives the cookies. await page.waitForURL('github.com/'); // Alternatively, wait for a specific element to ensure authentication. await expect(page.locator('button:has-text("View profile and more")')).toBeVisible(); // Save authenticated state. await page.context().storageState({ path: authFile }); }); ``` 4. Configuration: - In your `playwright.config.ts`, define the setup project and declare it as a dependency: ```typescript // playwright.config.ts import { defineConfig } from '@playwright/test'; export default defineConfig({ projects: [ // Setup project { name: 'setup', testMatch: /.*\.setup\.ts/ }, // Other testing projects { name: 'chromium', /* ... */ }, // ... ], }); ``` 5. Test Independence: - While tests should be independent, this approach ensures that authentication is handled consistently across all tests. - Each test can then focus on its specific functionality without worrying about authentication. - If your tests modify server-side state, consider separate accounts or additional setup steps. Remember that test independence is crucial for reliable and maintainable test suites. However, handling authentication separately can improve efficiency and reduce redundancy. --
Thanks for the great content. I have a question about the afterAll hook. Im currently having an error that reads "Error: "context" and "page" fixtures are not supported in "afterAll"" when i try and run the test. I can't see any difference between our syntax. Any advice is appreciated!
Michael The error message "Error: "context" and "page" fixtures are not supported in "afterAll"" means that you are trying to use the `context` and `page` fixtures in the `afterAll` hook. The `afterAll` hook is executed once after all tests have run, and it does not have access to the context or page that was used in the tests. To fix this error, you can move the code that is using the `context` and `page` fixtures to the `beforeEach` hook. The `beforeEach` hook is executed before each test, and it has access to the context and page that will be used in the test. Here is an example of how to fix the error: ``` test('my test', async ({ page }) => { // Use the page fixture in the test. await page.goto('www.google.com/'); }); beforeEach(async ({ context, page }) => { // Use the context and page fixtures in the beforeEach hook. await context.newPage(); }); ``` I hope this helps
Hi Raghav, I have a question: Are hooks used for only one specific file, or if we mention them in one file, will they apply to others as well? In my opinion, they will only apply to the specific file mentioned.
Kavya you are correct! Hooks in Playwright are file-specific. Here's a breakdown of how Playwright hooks work in terms of their scope: File-Level Hooks: test.beforeAll and test.afterAll: These hooks are executed once, before and after all the tests within a single test file. test.beforeEach and test.afterEach: These hooks run before and after each individual test within a single test file. Test Group Hooks (within test.describe): test.beforeEach and test.afterEach can also be defined within a test.describe block to create hooks specific to that group of tests. Key Point: If you define hooks in one file, they will NOT automatically apply to other test files in your Playwright project. Each file manages its own set of hooks to provide isolated setup and teardown logic. Example: JavaScript // File: my-test.spec.js test.beforeAll(async () => { // This will run ONCE before ALL tests in my-test.spec.js console.log('Setting up before all tests in this file'); }); test.beforeEach(async () => { // This will run before EACH test in my-test.spec.js console.log('Setting up before each test in this file'); }); test('my first test', async ({ page }) => { // ... test code ... }); test('my second test', async ({ page }) => { // ... test code ... }); test.afterEach(async () => { // This will run after EACH test in my-test.spec.js console.log('Cleaning up after each test in this file'); }); test.afterAll(async () => { // This will run ONCE after ALL tests in my-test.spec.js console.log('Cleaning up after all tests in this file'); }); In this example, the beforeAll, afterAll, beforeEach, and afterEach hooks will only impact the tests defined within my-test.spec.js. They won't affect any other test files in your project. Important Considerations: While hooks are file-specific, you can still share common setup/teardown logic between files by: Using fixtures: Fixtures are reusable pieces of code that can provide data, browser contexts, or other resources to your tests. Creating helper functions in separate modules and importing them into your test files as needed. Remember to scope your hooks appropriately to ensure efficient and maintainable test code. -
In recent versions of playwright released within a month or so, test.afterAll do not accept {page} as fixture anymore ☹ need to run await page.close() without it
Hello Raghav, I want to thank you for your hard work, you're a great teacher, thank you for doing this! I have a question for you: How does your playwright inspector provide comments for each step during recording? Mine just records the step without any comments.
Thanks a lot Rumpel. Okay i don't see using any special settings for that. Not sure if that difference may be due to diff versions. I hope you are following the same steps and running the same commands. Can check more on this online
@@RaghavPal To be honest, I'm not sure what's causing that. It's not necessarily crucial, just curious why yours adds comments while mine doesn't. Currently, I'm using version 1.44.0 and the config file differs from yours. One of the differences is the absence of a timeout; after adding it, it works. Thanks for your response!
Sirisha, I will need to see the video and check. In general, In Playwright, the `browser.newContext()` method is used to create a new browser context. A browser context represents a browsing session and provides an isolated environment for web page interactions. Here are a few reasons why you might need to create a new context: 1. Isolation: Each browser context operates independently, meaning it has its own cookies, cache, and storage. Creating a new context allows you to separate the state between multiple browsing sessions, preventing interference between them. 2. Authentication: In certain scenarios, you may need to simulate different user logins or authentication states. By creating multiple contexts, you can simulate separate user sessions without conflicts. 3. Performance: Creating a new context can help improve performance when running tests in parallel. Each context can run its own set of tests concurrently, taking advantage of available system resources. 4. Device Emulation: Playwright allows you to emulate different devices and view web pages as they would appear on mobile devices, tablets, or other specific devices. You can create a new context with specific device emulation settings to test responsive design or device-specific functionality. 5. Testing Scenarios: Different test scenarios may require specific configurations or behaviors. Creating a new context allows you to customize settings such as browser permissions, geolocation, or browser extensions for specific test scenarios. By creating a new context, you can have more control and flexibility in managing and interacting with web pages during your test automation process.
how to do for example I have multiple users with different passwords and I want to test each or how can I put random text into field or select random value from select box so for example when I run test it will select 1st value in dropdown but another run will select 3/5/10 etc so it is kind of random because i need to test if this value is selected in needs to execute test 3 but if this value is selected it needs to execute test number 9?
Peter In Playwright, you can achieve randomized behavior by using JavaScript to generate random values for your tests. Here are some examples to get you started: 1. To input random text into a field, you can use a function to generate random strings. Here's an example: ```javascript const randomString = Math.random().toString(36).substring(7); await page.type('input[name=username]', randomString); ``` 2. To select a random option from a dropdown/select box, you can generate a random index within the range of options available. Here's an example: ```javascript const options = await page.$$('select[name=dropdown] option'); const randomIndex = Math.floor(Math.random() * options.length); await options[randomIndex].select(); ``` 3. If you need to perform different tests based on the selected value, you can use conditional statements. Here's a simplified example: ```javascript const selectedOption = await page.$eval('select[name=dropdown]', el => el.value); if (selectedOption === 'value1') { // Execute test 3 } else if (selectedOption === 'value2') { // Execute test 9 } else { // Handle other cases } ``` By incorporating these techniques into your Playwright tests, you can introduce randomness and conditional logic to ensure your tests cover different scenarios effectively. --
Hi Raghav.. Could you please help in understanding the following error message: TypeError: Cannot read properties of undefined (reading 'close') 17 | 18 | test.afterAll(async() => { > 19 | await page.close();
Sagarika The error message `TypeError: Cannot read properties of undefined (reading 'close')` means that you are trying to access the `close()` property of a variable that is undefined. In the context of your Playwright code, this error is likely caused by the fact that the `page` variable is undefined when you try to call the `close()` method on it. There are a few possible reasons why the `page` variable might be undefined: * You have not yet created a new page. * The page has already been closed. * There is a typo in the name of the variable. To fix the error, you need to make sure that the `page` variable is defined before you try to call the `close()` method on it. You can do this by creating a new page before you start running your tests and by closing the page after you have finished running your tests. Here is an example of how to fix the error: ``` // Create a new page. const page = await test.newPage(); // Run your tests. // Close the page. await page.close(); ``` If you are still getting the error after following these steps, you can try debugging your code to see why the `page` variable is undefined. Here are some additional tips for avoiding this error: * Use descriptive variable names. This will help you to identify the variable that is undefined if you get an error. * Use type checking. This will help you to catch errors before you run your tests. * Write defensive code. This means checking the value of a variable before you access its properties or methods. I hope this helps
Hi Raghav, I have a question. There is a vertical scrolling bar in my test. How would I be able to capture a vertical scrolling bar to get down to the bottom of the page. Thanks
Hi Sirisha In Playwright, you can scroll vertically on a web page using the `page.evaluate()` function. Here's an example of how you can capture a vertical scrolling bar to scroll down to the bottom of the page: ```javascript const scrollToEndOfPage = async () => { await page.evaluate(() => { window.scrollTo(0, document.body.scrollHeight); }); }; ``` In the above example, `window.scrollTo(0, document.body.scrollHeight)` is used to scroll to the bottom of the page by setting the vertical scroll position to the height of the entire document You can call the `scrollToEndOfPage()` function whenever you need to scroll down to the bottom of the page in your test. After scrolling, you can continue interacting with the elements that become visible as you scroll Keep in mind that the presence of a vertical scrolling bar may vary depending on the web page's content and layout. It's important to ensure that the desired elements are loaded and visible after scrolling before performing any actions or assertions If you need to perform more complex scrolling operations, such as scrolling to a specific element or scrolling in increments, Playwright provides additional methods and options that you can explore in the official Playwright documentation
Thank you for the amazing content Raghav. From what I understand, these hooks can be used in a file and so can the grouping in order to utilise their respective hooks. But what if I need to apply common hooks to more than one file? Is it a possibility? eg. I need to click on accept cookies button everytime a test case executes, can I have a hooks file which caters to the entire test suite?
Kshitiz Yes, it is possible to apply common hooks to more than one file in Playwright. You can do this by creating a hooks file that contains the common hooks. Then, you can import the hooks file into the files that need to use the common hooks. For example, let's say you have a hooks file called `common.js` that contains the following code: ``` const page = require('playwright').default.page; async function acceptCookies() { await page.click('[data-testid="accept-cookies-button"]'); } ``` Then, you can import the `common.js` file into the files that need to use the `acceptCookies()` hook. For example: ``` const { acceptCookies } = require('./common'); test('Click on accept cookies button', async () => { await acceptCookies(); // other test code }); ``` This way, you can ensure that the `acceptCookies()` hook is executed before each test case in the test suite. Here are some additional things to keep in mind when using hooks in Playwright: * Hooks are executed in the order that they are defined. * Hooks can be nested, so you can define a hook that calls another hook. * Hooks can be overridden, so you can define a hook in a file that overrides a hook that is defined in another file. I hope this helps
@@RaghavPal Really grateful for the response. This is what I figured as well. My question was about using hook like beforeAll (eg. I need to set country for all my tests which redirect to different urls) or beforeEach in the common.js file so I would not have to call await.acceptCookies() in each test. Is that possible?
Yes, it is possible to use hooks like `beforeAll` or `beforeEach` in the `common.js` file in Playwright. These hooks will be executed before each test or before all tests, respectively. To use a hook in the `common.js` file, you can import it into your test file and then call it. For example: ``` import { beforeAll } from './common.js'; beforeAll(async () => { // Set the country for all tests. await page.setGeolocation({ country: 'US' }); }); test('The title of the page is "Google"', async () => { // The country is already set. await page.goto('www.google.com'); expect(page.title()).toBe('Google'); }); ``` In this example, the `beforeAll` hook is used to set the country for all tests. This means that the country will be set before each test is executed. You can also use the `afterAll` and `afterEach` hooks in the `common.js` file. These hooks will be executed after each test or after all tests, respectively
I have an error when use "afterAll" with "beforeEach" like in the video. try changing to "afterEach" and "beforeEach" all test is passed. I don't know why that happen
you can create your tests in a sequence and run as per the scenario needed, Check this dzone.com/articles/execute-playwright-test-sequentially-same-browser-context stackoverflow.com/questions/68000771/run-grouped-tests-sequentially-using-playwright
Quick update on the new version of playwright. When you want to use the `.afterAll` to close the browser after all tests are executed, you have to create a browser context. test.afterAll('Close out', async () => { const browser = await chromium.launch(); const context = await browser.newContext(); const page = await context.newPage(); await page.close() }) Otherwise you will get an error stating that the `page` fixture is not available in the `afterAll` function.
First of all, thank you very much Raghav for these informative and useful recordings. I am repeating your tutorials exactly, but even though I run three tests (login, add to card, logout) with the same (npx playwright test ./tests/HooksAndGroups.spec.js --project chromium --headed) code, it runs separately with 3 separate workers (chrome), not one after the other with a single worker like yours. What could be the reason? Do I need a setting in the config file? Thank you in advance. Alparslan
Hi Alparslan The reason why your tests are running separately with 3 separate workers is because you are using the `--headed` flag. The `--headed` flag tells Playwright to open a new browser window for each test. This means that each test will run in its own worker. If you want your tests to run one after the other with a single worker, you can use the `--headless` flag. The `--headless` flag tells Playwright to run the tests in headless mode. This means that the tests will run in a single worker without opening a browser window. Here is an example of how you would use the `--headless` flag: ``` npx playwright test ./tests/HooksAndGroups.spec.js --project chromium --headless ``` This will run your tests in headless mode with a single worker. Here are some additional details: * The `--headed` flag is the default flag for running Playwright tests. * The `--headless` flag can be used to run Playwright tests in headless mode. * Running tests in headless mode can improve the performance of your tests. * Running tests in headless mode can also help to reduce the resource usage of your tests. I hope this helps
@@RaghavPal Thank you very much for your valuable comments. I really liked your explanations and simplicity under all the topics that I started watching. I saw Playwright as a very modern framework that makes our works very easy. However, my main programming language is java and I usually use Intellij Idea. For this reason, is there a plugin etc that we can use playwright in intellij idea (community), TestNG, Cucumber or Karate Framework or in a similar way? If so, do you have a lesson/video plan about it? Thank you for everything. 👏🙌🙏
After multiple attempts , And Writing correct code , I'm not able to run Sequence File to test in playwright I'm giving Proper command on Terminal "npx playwright test .tests/sequence" No Test Found error message is appearing
Hi Rushikesh If you are getting a "No Test Found" error message when trying to run a sequence file in Playwright, it could be due to several reasons. Here are some possible solutions: Make sure that the test file you are trying to run exists in the correct directory. Double-check the file path and make sure there are no typos or errors in the path. Ensure that the file extension of the test file is correct Check that your test file contains at least one test case. A test case is a function that uses Playwright APIs to interact with a webpage and verify its behavior. The test case should be annotated with the test keyword from your testing framework (e.g., test() for Jest or it() for Mocha). Make sure that the npx playwright test command is being run from the correct directory. The command should be run from the root directory of your project, where the package.json file is located. Check that the scripts section in your package.json file contains the correct test command. The test command should match the command you are running in the terminal (e.g., "test": "npx playwright test"). Ensure that you have installed all the necessary dependencies for your testing framework and Playwright. Check your package.json file and make sure that all the dependencies are installed and up-to-date. If none of these solutions work, try creating a new test file and running it to see if the issue is specific to the current test file. You can also try running the test file with a different testing framework (e.g., Jest or Mocha) to see if that makes a difference.
Hi Raghav, I'm having a problem with my afterAll, I think it's the same code as you have in the video, but I got this: ============================== Error: "context" and "page" fixtures are not supported in "afterAll" since they are created on a per-test basis. ---- afterAll hook- examples/hooksAndGroups.spec.ts:14 fixture: context ============================== And this is my code: test.afterAll(async ({ page }) => { await page.close() })
Jorge The error message you're encountering indicates that the "context" and "page" fixtures are not supported in the "afterAll" hook because they are created on a per-test basis. Let's dive into the issue and find a solution: 1. Context Isolation in Playwright Test: - Playwright Test has context isolation by default. This means that a new page and context are created for each test. - Consequently, you cannot directly access the "page" fixture in the "afterAll" hook because it is specific to each test case. 2. Alternative Approach: - Instead of using the "afterAll" hook, consider using the "afterEach" hook. This hook runs after each test, allowing you to close the page associated with that specific test. - Modify your code like this: ```javascript test.afterEach(async ({ page }) => { await page.close(); }); ``` - This way, the "page" fixture will be available for each test, and you can close it after each test execution. 3. Why "afterAll" Doesn't Work: - The "afterAll" hook runs after all tests have completed execution. Since the "page" fixture is created per test, it cannot be accessed in the "afterAll" hook. 4. Best Practice: - It's generally recommended to use "afterEach" for cleanup tasks related to individual tests. - Reserve "afterAll" for global cleanup tasks that apply once after all tests have finished. Try modifying your code to use "afterEach" instead, and it should resolve the issue.
![KSI - Dirty [Official Visualiser]](http://i.ytimg.com/vi/VoDh1h1dPUE/mqdefault.jpg)
Thanks much Raghav. Sending a support and appreciation from Bangkok, Thailand!
Much appreciated!
Such a great teacher, thank you Raghav. Can you also teach Cucumber integration into Playwright and Jenkins please? This would be very helpful.
I will plan Kaz. Thanks
Thank you so much Raghav. Found it useful.
Getting an error though:
Error: "context" and "page" fixtures are not supported in "afterAll" since they are created on a per-test basis.
Help?
Kaushik
Yes, you are correct. The `context` and `page` fixtures are not supported in the `afterAll` hook since they are created on a per-test basis. This means that each test will have its own unique context and page, and the `afterAll` hook will be called after all of the tests have finished running.
To avoid this error, you can use the `beforeEach` hook instead of the `afterAll` hook. The `beforeEach` hook is called before each test, so you can use it to set up the context and page for each test.
For example, the following code will create a new context and page for each test:
```
test.beforeEach(async ({ context, page }) => {
context = await browser.newContext();
page = await context.newPage();
});
test('My test', async () => {
await page.goto('www.google.com');
await expect(page.title).toBe('Google');
});
```
I hope this helps
@@RaghavPal It doesn't work, your lessons are outdated, they are not relevant
I also got this error on the `await page.close()` test. I replaced `afterAll` with `afterEach` and it worked.
Wonderful videos! Thank you much for your effort!
Glad you like them!
Thanks for the videos
I have a question acording to use a login like a hook
I've heard about that every test need to be unique and not to depende to another ones, that's correct?
Perpetuo
Let's discuss how to handle authentication in Playwright tests and whether tests should be unique and independent.
1. Authentication in Playwright Tests:
- Playwright executes tests in isolated environments called browser contexts. This isolation model improves reproducibility and prevents cascading test failures.
- To avoid authenticating in every test (which can slow down test execution), you can load existing authenticated state. This means that once you authenticate, subsequent tests can reuse this state and start already authenticated.
- Regardless of the authentication strategy you choose, you'll likely store authenticated browser state on the file system. Here's how you can approach it:
2. Basic Approach: Shared Account in All Tests:
- This is the recommended approach for tests without server-side state.
- Authenticate once in a setup project, save the authentication state, and then reuse it to bootstrap each test already authenticated.
- Use this approach when:
- You can imagine all your tests running at the same time with the same account, without affecting each other.
- Your tests do not modify server-side state.
- Example setup:
- Create a `tests/auth.setup.ts` file that prepares authenticated browser state for all other tests.
- In this file, perform the authentication steps (e.g., logging in).
- Save the authenticated state using `page.context().storageState({ path: 'playwright/.auth/user.json' })`.
- Declare this setup project as a dependency for all your testing projects in the configuration.
3. Example Code:
- Here's a simplified example of the authentication setup:
```typescript
// tests/auth.setup.ts
import { test as setup, expect } from '@playwright/test';
const authFile = 'playwright/.auth/user.json';
setup('authenticate', async ({ page }) => {
// Perform authentication steps. Replace these actions with your own.
await page.goto('github.com/login');
await page.fill('[name="login"]', 'your-username');
await page.fill('[name="password"]', 'your-password');
await page.click('[value="Sign in"]');
// Wait until the page receives the cookies.
await page.waitForURL('github.com/');
// Alternatively, wait for a specific element to ensure authentication.
await expect(page.locator('button:has-text("View profile and more")')).toBeVisible();
// Save authenticated state.
await page.context().storageState({ path: authFile });
});
```
4. Configuration:
- In your `playwright.config.ts`, define the setup project and declare it as a dependency:
```typescript
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
projects: [
// Setup project
{ name: 'setup', testMatch: /.*\.setup\.ts/ },
// Other testing projects
{ name: 'chromium', /* ... */ },
// ...
],
});
```
5. Test Independence:
- While tests should be independent, this approach ensures that authentication is handled consistently across all tests.
- Each test can then focus on its specific functionality without worrying about authentication.
- If your tests modify server-side state, consider separate accounts or additional setup steps.
Remember that test independence is crucial for reliable and maintainable test suites. However, handling authentication separately can improve efficiency and reduce redundancy.
--
@@RaghavPal thanks for your videos, they're very handy!
thanks as usual, very easy and nicely explained
Most welcome
Crack!! mostro!! master!! muchisimas gracias Raghav, sos the best teacher!!😁👍
Muy bienvenido
I will continue learning if you upload contents of this quality all the time. I have really learn't alot Senior colleague
Sure.. I will.. keep learning Nwankwo
Super bhargav thank you so much. Expecting more videos from you
Most welcome
Thanks again for this tutorials :) great work.
Most welcome
Thanks for the great content. I have a question about the afterAll hook. Im currently having an error that reads "Error: "context" and "page" fixtures are not supported in "afterAll"" when i try and run the test. I can't see any difference between our syntax. Any advice is appreciated!
Michael
The error message "Error: "context" and "page" fixtures are not supported in "afterAll"" means that you are trying to use the `context` and `page` fixtures in the `afterAll` hook. The `afterAll` hook is executed once after all tests have run, and it does not have access to the context or page that was used in the tests.
To fix this error, you can move the code that is using the `context` and `page` fixtures to the `beforeEach` hook. The `beforeEach` hook is executed before each test, and it has access to the context and page that will be used in the test.
Here is an example of how to fix the error:
```
test('my test', async ({ page }) => {
// Use the page fixture in the test.
await page.goto('www.google.com/');
});
beforeEach(async ({ context, page }) => {
// Use the context and page fixtures in the beforeEach hook.
await context.newPage();
});
```
I hope this helps
@@RaghavPal Thanks was facing this same issue
Please release more playwright tutorial raghav, thank you for the videos
Most welcome
Hi Raghav, I have a question: Are hooks used for only one specific file, or if we mention them in one file, will they apply to others as well? In my opinion, they will only apply to the specific file mentioned.
Kavya
you are correct! Hooks in Playwright are file-specific.
Here's a breakdown of how Playwright hooks work in terms of their scope:
File-Level Hooks:
test.beforeAll and test.afterAll: These hooks are executed once, before and after all the tests within a single test file.
test.beforeEach and test.afterEach: These hooks run before and after each individual test within a single test file.
Test Group Hooks (within test.describe):
test.beforeEach and test.afterEach can also be defined within a test.describe block to create hooks specific to that group of tests.
Key Point: If you define hooks in one file, they will NOT automatically apply to other test files in your Playwright project. Each file manages its own set of hooks to provide isolated setup and teardown logic.
Example:
JavaScript
// File: my-test.spec.js
test.beforeAll(async () => {
// This will run ONCE before ALL tests in my-test.spec.js
console.log('Setting up before all tests in this file');
});
test.beforeEach(async () => {
// This will run before EACH test in my-test.spec.js
console.log('Setting up before each test in this file');
});
test('my first test', async ({ page }) => {
// ... test code ...
});
test('my second test', async ({ page }) => {
// ... test code ...
});
test.afterEach(async () => {
// This will run after EACH test in my-test.spec.js
console.log('Cleaning up after each test in this file');
});
test.afterAll(async () => {
// This will run ONCE after ALL tests in my-test.spec.js
console.log('Cleaning up after all tests in this file');
});
In this example, the beforeAll, afterAll, beforeEach, and afterEach hooks will only impact the tests defined within my-test.spec.js. They won't affect any other test files in your project.
Important Considerations:
While hooks are file-specific, you can still share common setup/teardown logic between files by:
Using fixtures: Fixtures are reusable pieces of code that can provide data, browser contexts, or other resources to your tests.
Creating helper functions in separate modules and importing them into your test files as needed.
Remember to scope your hooks appropriately to ensure efficient and maintainable test code.
-
Hi @raghav , could you make a video please also about integration of cucumber into playwright and jenkins ! Thanks a lot
I will plan on this
Yes Raghav Please consider this
as usual thank you very much for your great work
Most welcome
In recent versions of playwright released within a month or so, test.afterAll do not accept {page} as fixture anymore ☹
need to run await page.close() without it
Hi, ok, I will check and add updates
@@RaghavPal Hi , can you please give us the updates? It would be of great help!
Hello Raghav, I want to thank you for your hard work, you're a great teacher, thank you for doing this! I have a question for you: How does your playwright inspector provide comments for each step during recording? Mine just records the step without any comments.
Thanks a lot Rumpel.
Okay i don't see using any special settings for that. Not sure if that difference may be due to diff versions. I hope you are following the same steps and running the same commands. Can check more on this online
@@RaghavPal To be honest, I'm not sure what's causing that. It's not necessarily crucial, just curious why yours adds comments while mine doesn't. Currently, I'm using version 1.44.0 and the config file differs from yours. One of the differences is the absence of a timeout; after adding it, it works. Thanks for your response!
yeah, please continue with your learning. If i get to know on this will update here
Hi Raghav, why have you removed const context= await browser.newcontext() in the logout test . Why don't we need that in our steps Thanks
Sirisha, I will need to see the video and check.
In general, In Playwright, the `browser.newContext()` method is used to create a new browser context. A browser context represents a browsing session and provides an isolated environment for web page interactions.
Here are a few reasons why you might need to create a new context:
1. Isolation: Each browser context operates independently, meaning it has its own cookies, cache, and storage. Creating a new context allows you to separate the state between multiple browsing sessions, preventing interference between them.
2. Authentication: In certain scenarios, you may need to simulate different user logins or authentication states. By creating multiple contexts, you can simulate separate user sessions without conflicts.
3. Performance: Creating a new context can help improve performance when running tests in parallel. Each context can run its own set of tests concurrently, taking advantage of available system resources.
4. Device Emulation: Playwright allows you to emulate different devices and view web pages as they would appear on mobile devices, tablets, or other specific devices. You can create a new context with specific device emulation settings to test responsive design or device-specific functionality.
5. Testing Scenarios: Different test scenarios may require specific configurations or behaviors. Creating a new context allows you to customize settings such as browser permissions, geolocation, or browser extensions for specific test scenarios.
By creating a new context, you can have more control and flexibility in managing and interacting with web pages during your test automation process.
@@RaghavPal Thanks this was helpful
Hi Raghav, Thanks for your help, Please can you release one more video for POM Playwright with a detailed explanation.
Yes, sure
@@RaghavPal when is it possible?
how to do for example I have multiple users with different passwords and I want to test each or how can I put random text into field or select random value from select box so for example when I run test it will select 1st value in dropdown but another run will select 3/5/10 etc so it is kind of random because i need to test if this value is selected in needs to execute test 3 but if this value is selected it needs to execute test number 9?
Peter
In Playwright, you can achieve randomized behavior by using JavaScript to generate random values for your tests. Here are some examples to get you started:
1. To input random text into a field, you can use a function to generate random strings. Here's an example:
```javascript
const randomString = Math.random().toString(36).substring(7);
await page.type('input[name=username]', randomString);
```
2. To select a random option from a dropdown/select box, you can generate a random index within the range of options available. Here's an example:
```javascript
const options = await page.$$('select[name=dropdown] option');
const randomIndex = Math.floor(Math.random() * options.length);
await options[randomIndex].select();
```
3. If you need to perform different tests based on the selected value, you can use conditional statements. Here's a simplified example:
```javascript
const selectedOption = await page.$eval('select[name=dropdown]', el => el.value);
if (selectedOption === 'value1') {
// Execute test 3
} else if (selectedOption === 'value2') {
// Execute test 9
} else {
// Handle other cases
}
```
By incorporating these techniques into your Playwright tests, you can introduce randomness and conditional logic to ensure your tests cover different scenarios effectively.
--
Hi Raghav..
Could you please help in understanding the following error message:
TypeError: Cannot read properties of undefined (reading 'close')
17 |
18 | test.afterAll(async() => {
> 19 | await page.close();
Sagarika
The error message `TypeError: Cannot read properties of undefined (reading 'close')` means that you are trying to access the `close()` property of a variable that is undefined.
In the context of your Playwright code, this error is likely caused by the fact that the `page` variable is undefined when you try to call the `close()` method on it.
There are a few possible reasons why the `page` variable might be undefined:
* You have not yet created a new page.
* The page has already been closed.
* There is a typo in the name of the variable.
To fix the error, you need to make sure that the `page` variable is defined before you try to call the `close()` method on it. You can do this by creating a new page before you start running your tests and by closing the page after you have finished running your tests.
Here is an example of how to fix the error:
```
// Create a new page.
const page = await test.newPage();
// Run your tests.
// Close the page.
await page.close();
```
If you are still getting the error after following these steps, you can try debugging your code to see why the `page` variable is undefined.
Here are some additional tips for avoiding this error:
* Use descriptive variable names. This will help you to identify the variable that is undefined if you get an error.
* Use type checking. This will help you to catch errors before you run your tests.
* Write defensive code. This means checking the value of a variable before you access its properties or methods.
I hope this helps
Thanks Raghav
Most welcome Nagender
Thank u... Raghav Sir
You're most welcome
i try to follow what you did but is not working for me. what could be the problem?
will need details and logs Nicholas
Hi Raghav, I have a question. There is a vertical scrolling bar in my test. How would I be able to capture a vertical scrolling bar to get down to the bottom of the page. Thanks
Hi Sirisha
In Playwright, you can scroll vertically on a web page using the `page.evaluate()` function. Here's an example of how you can capture a vertical scrolling bar to scroll down to the bottom of the page:
```javascript
const scrollToEndOfPage = async () => {
await page.evaluate(() => {
window.scrollTo(0, document.body.scrollHeight);
});
};
```
In the above example, `window.scrollTo(0, document.body.scrollHeight)` is used to scroll to the bottom of the page by setting the vertical scroll position to the height of the entire document
You can call the `scrollToEndOfPage()` function whenever you need to scroll down to the bottom of the page in your test. After scrolling, you can continue interacting with the elements that become visible as you scroll
Keep in mind that the presence of a vertical scrolling bar may vary depending on the web page's content and layout. It's important to ensure that the desired elements are loaded and visible after scrolling before performing any actions or assertions
If you need to perform more complex scrolling operations, such as scrolling to a specific element or scrolling in increments, Playwright provides additional methods and options that you can explore in the official Playwright documentation
@@RaghavPal Thanks Raghav will try this function and let you know this seems to be very helpful
Thank you for the amazing content Raghav. From what I understand, these hooks can be used in a file and so can the grouping in order to utilise their respective hooks. But what if I need to apply common hooks to more than one file? Is it a possibility? eg. I need to click on accept cookies button everytime a test case executes, can I have a hooks file which caters to the entire test suite?
Kshitiz
Yes, it is possible to apply common hooks to more than one file in Playwright. You can do this by creating a hooks file that contains the common hooks. Then, you can import the hooks file into the files that need to use the common hooks.
For example, let's say you have a hooks file called `common.js` that contains the following code:
```
const page = require('playwright').default.page;
async function acceptCookies() {
await page.click('[data-testid="accept-cookies-button"]');
}
```
Then, you can import the `common.js` file into the files that need to use the `acceptCookies()` hook. For example:
```
const { acceptCookies } = require('./common');
test('Click on accept cookies button', async () => {
await acceptCookies();
// other test code
});
```
This way, you can ensure that the `acceptCookies()` hook is executed before each test case in the test suite.
Here are some additional things to keep in mind when using hooks in Playwright:
* Hooks are executed in the order that they are defined.
* Hooks can be nested, so you can define a hook that calls another hook.
* Hooks can be overridden, so you can define a hook in a file that overrides a hook that is defined in another file.
I hope this helps
@@RaghavPal Really grateful for the response. This is what I figured as well. My question was about using hook like beforeAll (eg. I need to set country for all my tests which redirect to different urls) or beforeEach in the common.js file so I would not have to call await.acceptCookies() in each test. Is that possible?
Yes, it is possible to use hooks like `beforeAll` or `beforeEach` in the `common.js` file in Playwright. These hooks will be executed before each test or before all tests, respectively.
To use a hook in the `common.js` file, you can import it into your test file and then call it. For example:
```
import { beforeAll } from './common.js';
beforeAll(async () => {
// Set the country for all tests.
await page.setGeolocation({ country: 'US' });
});
test('The title of the page is "Google"', async () => {
// The country is already set.
await page.goto('www.google.com');
expect(page.title()).toBe('Google');
});
```
In this example, the `beforeAll` hook is used to set the country for all tests. This means that the country will be set before each test is executed.
You can also use the `afterAll` and `afterEach` hooks in the `common.js` file. These hooks will be executed after each test or after all tests, respectively
I have an error when use "afterAll" with "beforeEach" like in the video. try changing to "afterEach" and "beforeEach" all test is passed. I don't know why that happen
Will need more details on this. Please tell me the steps you did, message and locks
how can i run number of tests without on the same page without closing it ?
you can create your tests in a sequence and run as per the scenario needed, Check this
dzone.com/articles/execute-playwright-test-sequentially-same-browser-context
stackoverflow.com/questions/68000771/run-grouped-tests-sequentially-using-playwright
@@RaghavPal its in TS and I couldnt do the Page import do you think it relates to each other ?
How to run playwright tests using git automation/actions
I will add sessions on this
Hi Bhargav, any update on playwright python tutorial videos?
Hi Parthi, I will plan on this in some time
Quick update on the new version of playwright.
When you want to use the `.afterAll` to close the browser after all tests are executed, you have to create a browser context.
test.afterAll('Close out', async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.close()
})
Otherwise you will get an error stating that the `page` fixture is not available in the `afterAll` function.
Thanks for adding
First of all, thank you very much Raghav for these informative and useful recordings. I am repeating your tutorials exactly, but even though I run three tests (login, add to card, logout) with the same (npx playwright test ./tests/HooksAndGroups.spec.js --project chromium --headed) code, it runs separately with 3 separate workers (chrome), not one after the other with a single worker like yours. What could be the reason? Do I need a setting in the config file? Thank you in advance. Alparslan
Hi Alparslan
The reason why your tests are running separately with 3 separate workers is because you are using the `--headed` flag. The `--headed` flag tells Playwright to open a new browser window for each test. This means that each test will run in its own worker.
If you want your tests to run one after the other with a single worker, you can use the `--headless` flag. The `--headless` flag tells Playwright to run the tests in headless mode. This means that the tests will run in a single worker without opening a browser window.
Here is an example of how you would use the `--headless` flag:
```
npx playwright test ./tests/HooksAndGroups.spec.js --project chromium --headless
```
This will run your tests in headless mode with a single worker.
Here are some additional details:
* The `--headed` flag is the default flag for running Playwright tests.
* The `--headless` flag can be used to run Playwright tests in headless mode.
* Running tests in headless mode can improve the performance of your tests.
* Running tests in headless mode can also help to reduce the resource usage of your tests.
I hope this helps
@@RaghavPal Thank you very much for your valuable comments. I really liked your explanations and simplicity under all the topics that I started watching. I saw Playwright as a very modern framework that makes our works very easy. However, my main programming language is java and I usually use Intellij Idea. For this reason, is there a plugin etc that we can use playwright in intellij idea (community), TestNG, Cucumber or Karate Framework or in a similar way? If so, do you have a lesson/video plan about it? Thank you for everything. 👏🙌🙏
can find all videos here - automationstepbystep.com/
After multiple attempts , And Writing correct code , I'm not able to run Sequence File to test in playwright I'm giving Proper command on Terminal "npx playwright test .tests/sequence" No Test Found error message is appearing
Hi Rushikesh
If you are getting a "No Test Found" error message when trying to run a sequence file in Playwright, it could be due to several reasons. Here are some possible solutions:
Make sure that the test file you are trying to run exists in the correct directory. Double-check the file path and make sure there are no typos or errors in the path.
Ensure that the file extension of the test file is correct
Check that your test file contains at least one test case. A test case is a function that uses Playwright APIs to interact with a webpage and verify its behavior. The test case should be annotated with the test keyword from your testing framework (e.g., test() for Jest or it() for Mocha).
Make sure that the npx playwright test command is being run from the correct directory. The command should be run from the root directory of your project, where the package.json file is located.
Check that the scripts section in your package.json file contains the correct test command. The test command should match the command you are running in the terminal (e.g., "test": "npx playwright test").
Ensure that you have installed all the necessary dependencies for your testing framework and Playwright. Check your package.json file and make sure that all the dependencies are installed and up-to-date.
If none of these solutions work, try creating a new test file and running it to see if the issue is specific to the current test file. You can also try running the test file with a different testing framework (e.g., Jest or Mocha) to see if that makes a difference.
Hello, can you try running the command 'npx playwright test tests/sequence'?
@@sagarikamandal8977Yes
Hi Raghav
i am stuck in one of a senario in playwright API with bearer token issue can u please help me out .
Hi Vini, I will plan a session on API testing. Till then can check with some online examples
@@RaghavPal ok sure tnx 😊
@@RaghavPal Hi raghav i am trying to send a graphql request using playwright can u let me know how this can be sent ? as this is a post request ?
Thanks for info videos, I request you to add playwright integration with cucumber BDD in JavaScript
Noted Nikhil
Hi Raghav, I'm having a problem with my afterAll, I think it's the same code as you have in the video, but I got this:
==============================
Error: "context" and "page" fixtures are not supported in "afterAll" since they are created on a per-test basis.
----
afterAll hook- examples/hooksAndGroups.spec.ts:14
fixture: context
==============================
And this is my code:
test.afterAll(async ({ page }) => {
await page.close()
})
Do you know what could be the problem?
Jorge
The error message you're encountering indicates that the "context" and "page" fixtures are not supported in the "afterAll" hook because they are created on a per-test basis. Let's dive into the issue and find a solution:
1. Context Isolation in Playwright Test:
- Playwright Test has context isolation by default. This means that a new page and context are created for each test.
- Consequently, you cannot directly access the "page" fixture in the "afterAll" hook because it is specific to each test case.
2. Alternative Approach:
- Instead of using the "afterAll" hook, consider using the "afterEach" hook. This hook runs after each test, allowing you to close the page associated with that specific test.
- Modify your code like this:
```javascript
test.afterEach(async ({ page }) => {
await page.close();
});
```
- This way, the "page" fixture will be available for each test, and you can close it after each test execution.
3. Why "afterAll" Doesn't Work:
- The "afterAll" hook runs after all tests have completed execution. Since the "page" fixture is created per test, it cannot be accessed in the "afterAll" hook.
4. Best Practice:
- It's generally recommended to use "afterEach" for cleanup tasks related to individual tests.
- Reserve "afterAll" for global cleanup tasks that apply once after all tests have finished.
Try modifying your code to use "afterEach" instead, and it should resolve the issue.
I changed it to afterEach and it worked, thanks man!!!