Hi Bhavya, Thanks for liking the video. We already have a video on how to handle frames and windows in Playwright: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JN16nilL8Wg.html
Can you create a function in a fixture that contains multiple methods from your POM file then use it in the test? because currently I put this async functions below after my test describe group???
Hi Christian, Yes, you can do this by defining the fixture to return an instance of your POM class, and then call the fixture in your test describe group.
Very well picturized and explained fixture feature of Playwright, thanks, Koushik!!. But one thing I could not understand from Playwright team why they are enforcing us to write test cases independent I mean for every test browser page instance is closing and invoking fresh instance for subsequent test cases don't you think we are wasting time in re-login and navigate to the desired screen for every test case. Have you encountered anything like where we can preserve page state and not closing the instance so that we can use the same instance for the subsequent test cases and continue with our execution flow instead of every time login in every test case. As in your example what I can see we have to login every time in each test case which actually time consuming and breaks the continue test execution flow and sometimes running them parallel makes data mess up because running two test cases together impacts on data on UI, for an example one test case is exporting total records on UI and another test case is adding one more record on UI, so there is high chances former test case gets failed because at the time of exporting it export total 40 records and another test cases has added one more records and former test case counting 40 exported records on UI but actually that time it is displaying total 41 because of another test case has added +1 record. Do you have any solution for it, or maintaining the same page instance across the test cases within the test script.
Hey Nikhil, BrowserContexts in Playwright provides a way to operate multiple independent browser sessions. If a page opens another page, e.g. with a window.open call, the popup will belong to the parent page's browser context. Playwright allows creating "incognito" browser contexts with browser.newContext([options]) method. "Incognito" browser contexts don't write any browsing data to disk. Tests written with Playwright execute in isolated clean-slate environments called browser contexts. This isolation model improves reproducibility and prevents cascading test failures. BrowserContexts are equivalent to incognito-like profiles, they are fast and cheap to create and completely isolated, even when running in a single browser. Playwright creates a context for each test, and provides a default Page in that context.
Hi Prasad, To call a class object from fixtures in Cucumber hooks with Playwright, import the class in your hooks file and create an instance of it in the Before or After hooks.
Hello Kaushik, create a new instance mean like homepage = new Homepage(); if I use this then will that not reset all the variables value to null as it would be the new instance created in hooks and not coming from fixtures?
Hello, at 31:36 line 28 you are passing too many parameter, isnt there a way to get ab object and then get the required values from the object ? page, baseurl loginpage homepage all in one class and then passing object of that class and getting values from there
Hey there 👋🏻 Instead of passing multiple parameters individually, you can encapsulate them in a class or object and pass that object as a single parameter. This approach can help organize your code and make it more maintainable. For example, you can create a class called PageObject that holds the page, base URL, login page, and homepage information, and then pass an instance of that class to your function.
Hi Koushik, Thank you for explaining so well and strategically. I followed your way and is able to run POM test in Playwright using Fixtures which reduced the time on creating new tests. Just recently I faced an issue during the pipeline setup in Azure DevOps with this method. Can you please have a look on this and check if it's issue with CI or this way of implementation? Error: Error: Cannot find module '@playwright/test' Require stack: - /home/vsts/work/1/s/PW/repo/fixture/pageFixture.ts - /home/vsts/work/1/s/PW/repo/tests/admin/loginAdmin.spec.ts - /home/vsts/.npm/_npx/e41f203b7505f1fb/node_modules/playwright/lib/transform/transform.js - /home/vsts/.npm/_npx/e41f203b7505f1fb/node_modules/playwright/lib/common/config.js ............... at PW/repo/fixture/pageFixture.ts:1 > 1 | import { test as base } from '@playwright/test'; | ^ 2 | import { HomePage } from '../pages/homepage.page'; at Object. (/home/vsts/work/1/s/PW/repo/fixture/pageFixture.ts:1:1) at Object. (/home/vsts/work/1/s/PW/repo/tests/admin/loginAdmin.spec.ts:2:1) Error: No tests found. Make sure that arguments are regular expressions matching test files. You may need to escape symbols like "$" or "*" and quote the arguments. The code at those specified ts line are: import { test as base } from '@playwright/test'; import { test, expect } from '../../fixture/pageFixture';
@@LambdaTest I was able to solve my issue. I had to further put this command line task " npm install @playwright/test --legacy-peer-deps " by cd to the main folder. npm list --depth=0 command helped to observe what are installed. In my case earlier, no playwright was displayed only types/node was present. Not sure though ci was showing npm WARN exec The following package was not found and will be installed: playwright@1.41.2 , and was installing playwright, why it didn't worked. Seems forced installation is required. Thank you for your time.
You solved your issue by using npm install @playwright/test --legacy-peer-deps to bypass peer dependency conflicts, a common problem when integrating new tools into projects with strict or legacy dependencies. The npm list --depth=0 command helped verify that Playwright was indeed missing and needed to be installed explicitly, despite CI warnings. This approach is useful in environments where npm's dependency resolution might fail to install certain packages automatically, ensuring necessary dependencies are correctly installed for your project's needs.
You solved your issue by using npm install @playwright/test --legacy-peer-deps to bypass peer dependency conflicts, a common problem when integrating new tools into projects with strict or legacy dependencies. The npm list --depth=0 command helped verify that Playwright was indeed missing and needed to be installed explicitly, despite CI warnings. This approach is useful in environments where npm's dependency resolution might fail to install certain packages automatically, ensuring necessary dependencies are correctly installed for your project's needs. Sharing such solutions is invaluable for others facing similar challenges.
Hi.. Thank you so much for all your efforts in explaining so well. I have learnt playwright watching your videos and cant thank enough foe everything 😊😊 I have a question - Using fixtures can we read data from CSV files. I am currently doing this in my tests using csv parse, then iterating over each record using for-each look and this code repeated in each test file. But I want to keep a single place for reading the CSV file and use the data in tests. Kindly let me know. TIA
Hi Shwetha 👋🏻 Thank you for your kind words, and we are glad the videos have been helpful to you. Yes, you can use fixtures to read data from CSV files in Playwright. Create a custom fixture in a separate fixtures.js file that reads and parses the CSV data. Then, import and use the fixture in your tests, allowing you to access the parsed CSV data without repeating the parsing code in each test file. This way, the CSV data is read and parsed only once and can be used across multiple tests.
@Koushik. thank you. one quick question, when I wrote page fixtures. it is not reading from playwright.config.ts file. its completely ignoring it. how do i solve that?
@@LambdaTest thank you. I figured out why. It occurred because i was trying to run from a nested test folder. It wasn’t picking up configuration info while running from the nested folder. Once i came out it and ran from the project level, it started working. Thanks you for the support and keep up the good work.
Thanks Kaushik for the useful video, I have one query and struggling to resolve. Followed this video and worked on the scenario. I am using fixtures, and page classes are initialized in the fixture. Now say I have a login page wherein I am interacting with some web elements and then it takes us to another page say the Register page. since the page is already passed to each page class, like in your example - registerPage: async ({ page }, use) => { await use(new RegisterPage(page)); }, loginPage: async ({ page }, use) => { await use(new LoginPage(page)); }, //below is the code used in one of the class const [newPage] = await Promise.all([ page.waitForEvent('page'), // This action triggers the new tab loginPage.clickOnBtnTakesUsToAnotherPage(); ]) now i want to work on registerPage but with newPage, so how can i pass newPage to registerPage in fixture as it is using page.Could you please guide me ?
