What Are Playwright Fixtures | Playwright With TypeScript Tutorial 🎭| Part X | LambdaTest

Ever wondered what Playwright Fixtures are? Watch this video to learn the concept of Playwright Fixtures and how to implement them for the Page Object Model (POM) using TypeScript.
Start FREE Testing: accounts.lambdatest.com/regis...
In this Part-X of the Playwright tutorial series, 𝑲𝒐𝒖𝒔𝒉𝒊𝒌 𝑪𝒉𝒂𝒕𝒕𝒆𝒓𝒋𝒆𝒆 (@Koushik chat), Content Creator at LetCode, explains the concept of Playwright Fixtures and how we can use them to reduce the complexity of the Page Object Model. He also explains how to read a JSON file with live examples.
🔹 𝑾𝒉𝒂𝒕 𝒂𝒓𝒆 𝒕𝒉𝒆 𝑷𝒍𝒂𝒚𝒘𝒓𝒊𝒈𝒉𝒕 𝑭𝒊𝒙𝒕𝒖𝒓𝒆𝒔?
➡ The Playwright Test is based on the test fixture concept. Test fixtures create an environment for each test, providing only what it requires.
➡ Playwright Test examines each test declaration, analyzing the set of fixtures required for the test and preparing those fixtures specifically for the test. The fixtures' values are merged into a single object, which is available as a first parameter to the test, hooks, annotations, and other fixtures.
🔹 𝑾𝒉𝒂𝒕 𝒂𝒓𝒆 𝒕𝒉𝒆 𝒃𝒆𝒏𝒆𝒇𝒊𝒕𝒔 𝒐𝒇 𝑷𝒍𝒂𝒚𝒘𝒓𝒊𝒈𝒉𝒕 𝑭𝒊𝒙𝒕𝒖𝒓𝒆𝒔?
➡ Fixtures combine setup and teardown in one location, making writing easier.
➡ Fixtures are reusable across test files; define them once and use them in all of your tests.
➡ Fixtures are on-demand-you can define as many fixtures as you want, and the Playwright Test will only set up the ones required by your test.
➡ Fixtures are flexible; they can rely on one another to provide complex behaviors.
➡ Fixtures are adaptable. Tests can use any combination of fixtures to create the exact environment they require without interfering with other tests.
Ｖɪᴅᴇᴏ Ｃʜᴀᴘᴛᴇʀꜱ 👀
0:00 Introduction
0:03 Modules
1:06 What is Fixture?
2:31 How to implement Playwright Fixtures?
13:19 How to implement Playwright Fixtures for Page Object Model?
24:48 How to read data from a JSON file?
31:47 Recap
32:58 Conclusion
📌Also, learn 📃
🔸 What are fixtures in playwright?
🔸 How do you run a playwright test?
🔸 What is playwright testing?
📌 𝑮𝒊𝒕𝑯𝒖𝒃 𝑳𝒊𝒏𝒌: github.com/ortoniKC/playwrigh...
*𝑼𝒔𝒆𝒇𝒖𝒍 𝑫𝒐𝒄𝒔*
🔹 How To Run Playwright Tests On LambdaTest Platform: bit.ly/3t5w0XI
🔹 Run Your First Playwright Test On LambdaTest Platform: bit.ly/3x1jRWi
🔹 How To Run Playwright Tests In Parallel: bit.ly/3GyRORe
🔹 Migrate Existing Playwright Test Suites On LambdaTest: bit.ly/3PRFH5T
🔹 Test Execution Setup: bit.ly/3PONYYp
🔹 Run Local Tests Using Playwright: bit.ly/3z6jc7q
Sign Up for LambdaTest! It’s FREE 🙌
Perform scalable and reliable cross-browser compatibility testing of your website and web app on the latest mobile and desktop browsers: accounts.lambdatest.com/regis...
𝑹𝒖𝒏 𝒚𝒐𝒖𝒓 𝑷𝒍𝒂𝒚𝒘𝒓𝒊𝒈𝒉𝒕 𝒕𝒆𝒔𝒕 𝒔𝒄𝒓𝒊𝒑𝒕𝒔 𝒊𝒏𝒔𝒕𝒂𝒏𝒕𝒍𝒚 𝒐𝒏 𝟓𝟎+ 𝒃𝒓𝒐𝒘𝒔𝒆𝒓 𝒂𝒏𝒅 𝑶𝑺 𝒄𝒐𝒎𝒃𝒊𝒏𝒂𝒕𝒊𝒐𝒏𝒔 𝒖𝒔𝒊𝒏𝒈 𝒕𝒉𝒆 𝑳𝒂𝒎𝒃𝒅𝒂𝑻𝒆𝒔𝒕 𝒄𝒍𝒐𝒖𝒅. 𝑬𝒙𝒆𝒄𝒖𝒕𝒆 𝑷𝒍𝒂𝒚𝒘𝒓𝒊𝒈𝒉𝒕 𝒕𝒆𝒔𝒕𝒊𝒏𝒈 𝒊𝒏 𝒑𝒂𝒓𝒂𝒍𝒍𝒆𝒍 𝒂𝒏𝒅 𝒄𝒖𝒕 𝒅𝒐𝒘𝒏 𝒚𝒐𝒖𝒓 𝒕𝒆𝒔𝒕 𝒆𝒙𝒆𝒄𝒖𝒕𝒊𝒐𝒏 𝒕𝒊𝒎𝒆 𝒃𝒚 𝒎𝒖𝒍𝒕𝒊𝒑𝒍𝒆 𝒇𝒐𝒍𝒅𝒔. 𝑲𝒏𝒐𝒘 𝒎𝒐𝒓𝒆: bit.ly/3avWLhF
Register Now to Avail Bonanza Offerings 💎
+ Test websites and web apps on 3000+ real browsers over LambdaTest cloud
+ Trusted By 1M+ users, 500+ enterprises and 130+ countries
+ Online scalable Selenium Grid to perform Manual as well as Automation Testing
+ 100 minutes of free Web + Mobile Automation Testing
+ 60 minutes of free Live Interactive Testing per month
+ 10 Screenshot Tests per month
+ 10 Responsive Tests per month (Test a page across 50+ Device configurations with a single click)
+ Unlimited free testing on LT Browser
For questions: [e-mail] 😃
*𝑬𝒙𝒑𝒍𝒐𝒓𝒆*
🎬 Most Recent Videos: bit.ly/3kUUeAQ
🎓 Learning Hub: bit.ly/3fr6l4Z
🎥 LambdaTest Customers: bit.ly/2TB7pvD
🚀 Webinars: bit.ly/37i41co
🛠️ Product Updates: bit.ly/3717NGO
💬 LambdaTest Certifications: bit.ly/3x4EtcY
*𝑺𝒐𝒄𝒊𝒂𝒍*
📝 BLOG: bit.ly/3yGVsUc
👥 COMMUNITY: bit.ly/3Aiz5oO
🔴 NEWSLETTER: bit.ly/3juhxzc
🖼️ GITHUB: bit.ly/3jowfYs
🛠️ KZbin: bit.ly/3rH2Yfh
🌎 LINKEDIN: bit.ly/3xA6F84
👥 FACEBOOK: bit.ly/37mbQOa
🐦TWITTER: bit.ly/3Cn0g3A
📸 PINTEREST: bit.ly/2VCXI05
#playwrighttutorial #playwrightfixtures #lambdatest #playwrightautomation #playwright #microsoftplaywright #playwrightautomationtutorial #playwrightframework #playwrighttestingtool #playwrighttesting #playwrighttestrunner #whatisfixture
Disclaimer:
This video features materials protected by the Fair Use guidelines of Section 107 of the Copyright Act. All rights reserved to © 2022 LambdaTest. Any illegal reproduction of this content will result in immediate legal action.

[@LambdaTest]

GitHub Repo: github.com/ortoniKC/playwright-ts-lambdatest

[@AdmixKraft]

This is a great series on Playwright; so much to learn 😍 Thank you, LambdaTest 🤗

[@LambdaTest]

Thanks Mansi, Pleasure to hear that!

[@marcoschaafsma6724]

Only when you truly understand the subject, you can explain it in such a clear way. Hats off to you sir!

[@LambdaTest]

Glad you liked it! Please subscribe to our KZbin channel for more such videos 🌟

[@kinzakhan7698]

Great explanation with clarity of thought! Thanks for helping out with this very useful feature 🤩

[@LambdaTest]

Thanks, Kinza. Glad it was helpful to you!

[@sukanyanune4169]

Awesome,you are explaining each and every topic in detail and very understandable. very useful. Thank you

[@LambdaTest]

Thanks Sukanya! Subscribe, and look forward to more such tutorials! ✨

[@Eiston14]

Very Nice!!! Thank you for the tutorial... 👍

[@LambdaTest]

Glad you liked it!

[@techysam-bl9mk]

Very beautifully explained. Thanks dear

[@LambdaTest]

Glad it was helpful. Please subscribe to our KZbin channel for more such videos 🌟

[@quangpham-qs5oo]

thank Koushik, this is very useful

[@LambdaTest]

Glad you liked it, Subscribe to our channel for more such tutorials! ✨

[@shreyarora748]

Thank you very much for your tutorials! I'm curious how the page object model works. Do you have any videos on the same?

[@letcode]

You can refer this video for page object model kzbin.info/www/bejne/jnO2oYyVq5dkn6s

[@RspwN217]

Great explanation!

[@LambdaTest]

Glad you found this helpful😊 Subscribe to our channel to never miss an update on the upcoming tutorials! ✨

[@bhavyasharma1608]

Really good video 🤗 Can you please also make one on how can we handle frames and windows in Playwright?

[@letcode]

kzbin.info/www/bejne/gH-UZ6GfobFrjck

[@LambdaTest]

Hi Bhavya, Thanks for liking the video. We already have a video on how to handle frames and windows in Playwright: kzbin.info/www/bejne/gH-UZ6GfobFrjck

[@nikhilgupta5721]

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.

[@LambdaTest]

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.

[@shwethapaim7120]

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

[@LambdaTest]

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.

[@ChristianTicar]

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

[@LambdaTest]

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.

[@sunnykuruvila55]

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

Hey Sunny, Can you please share the error that comes up or it would be very helpful if you could share the code repo so that we can debug it together.

[@sunnykuruvila55]

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

[@LambdaTest]

Happy to hear that Sunny 🙂⭐️

[@salikhanan]

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

[@LambdaTest]

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.

[@salikhanan]

@@LambdaTest In typescript? can we pass objects in typescript?. Thanks in advance

[@sureshkharel1514]

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]

Glad you liked the video! We are working on your query and will get back to you soon.

[@sureshkharel1514]

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

[@LambdaTest]

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.

[@LambdaTest]

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.

[@alokshrivastava5476]

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 ?

[@LambdaTest]

Hi Alok! Glad you liked our video, we'll get back to you with this very soon.