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.

🔹 𝑾𝒉𝒂𝒕 𝒂𝒓𝒆 𝒕𝒉𝒆 𝑷𝒍𝒂𝒚𝒘𝒓𝒊𝒈𝒉𝒕 𝑭𝒊𝒙𝒕𝒖𝒓𝒆𝒔?
➡ 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?

**𝑼𝒔𝒆𝒇𝒖𝒍 𝑫𝒐𝒄𝒔**

Sign Up for LambdaTest! It’s FREE 🙌

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

**𝑬𝒙𝒑𝒍𝒐𝒓𝒆**

**𝑺𝒐𝒄𝒊𝒂𝒍**

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

[AdmixKraft]

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

[marcoschaafsma]

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

[kinzakhan]

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

[prasadprocks]

How can I call the class object created in fixtures to cucumber hooks

[sukanyanune]

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

[shreyarora]

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

[bhavyasharma]

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

[techysam-blmk]

Very beautifully explained. Thanks dear

[Eiston]

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

[nikhilgupta]

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.

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

[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

[shwethapaim]

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

[sureshkharel]

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:
Require stack:
-
-
-
-


at

| ^
2 | import { HomePage } from '../pages/homepage.page';
at Object.<anonymous>
at Object.<anonymous>

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, expect } from '../../fixture/pageFixture';

[sunnykuruvila]

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

[alokshrivastava]

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

])

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 ?