Learn how to leverage Playwright test fixtures to DRY your code and reuse it across tests and spec files. Playwright docs for fixtures: playwright.dev/docs/test-fixt...
Жүктеу.....
Пікірлер: 79
@OlgaTheKey2 ай бұрын
omg that is the one I needed so hard, cool explanation, because I literally bored with all setups and imports due creating student's project. ty
@ChecklyHQ
2 ай бұрын
We're very happy that this video has been helpful! 💙
@robertrobles76982 ай бұрын
Straightforward and useful explanation. Thank you for sharing!
@ChecklyHQ
Ай бұрын
Glad it was helpful! 💙 Thanks for watching!
@3VAudioVideo2 ай бұрын
Wow! This was great! So hard to find good Playwright videos like there are for Selenium (Java, C#, Python). A few videos are out there for creating setup and teardown, but they are in the same file as the testcases are. Your video went at a good face pace and while watching it I started to notice it was about to end. You didn't yet show how to put the code in a separate file so I thought it wasn't going to be covered , but you covered it! Thanks so much!
@ChecklyHQ
2 ай бұрын
Thank you for the kind words. Happy the video has been valuable. 💙
@owcaandroid4 ай бұрын
My God this is what I was looking for! That's funny because I didn't find this clip at once, I stumbled on the clip about parallelism because google pointed out me that topic for my question. Thank you very much, your examples are very clear and straightforward
@ChecklyHQ
4 ай бұрын
Happy you found it after all. :)
@luke10238 ай бұрын
Love the videos, they’re very helpful and love your energy!
@ChecklyHQ
8 ай бұрын
Thanks!
@rossfisher5543 Жыл бұрын
It would be great to see a video that matches with your article on the performance api. Great video!
@stefanjudis
Жыл бұрын
Thanks Ross. I'll put it on the list for the future videos. :)
@user-en4pd9rd7s11 ай бұрын
Great example, helped me a lot, other videos from people have a lot of useless info. But your example is super!
@ChecklyHQ
11 ай бұрын
Thanks! Happy it's valuable! 🦝
@karthikeyan.ganapathy Жыл бұрын
Thanks team for quick video, you guys are great
@gruttewibe764 ай бұрын
Very good explanation on the topic.
@ChecklyHQ
4 ай бұрын
Glad it was helpful!
@Cowglow Жыл бұрын
Such a beautiful feature!
@ChecklyHQ
Жыл бұрын
We think so, too! 💯
@Danielo51514 күн бұрын
How is this different from a function that takes the page and executes the same operations than the fixture ?
@dand4485 Жыл бұрын
Great presentation.
@ChecklyHQ
Жыл бұрын
Thanks! Happy it's useful. :)
@justaskiekas Жыл бұрын
Awesome video
@stefanjudis
Жыл бұрын
Thanks! Happy it was useful! 😊
@takeshikriang9 ай бұрын
Very helpful, thanks.
@ChecklyHQ
9 ай бұрын
Glad it was helpful!
@QaAutomationAlchemist3 ай бұрын
Great video🎉
@ChecklyHQ
3 ай бұрын
Glad you enjoyed it. Thanks!
@thiagofragoso64715 ай бұрын
Thanks for sharing this content. quick and assetive. May I ask you whats the theme are you using on this video? thank you
@ChecklyHQ
5 ай бұрын
The color theme is Yi Dark and if you're after the custom font it's described in this article 👉 www.stefanjudis.com/blog/how-to-enable-beautiful-cursive-fonts-in-your-vs-code-theme/
@powertester55967 ай бұрын
Hi, I have started exploring playwright very recently and found your videos on the topic . Kudos for creating these :-). I have a question. If there are more than one reusable functions to use inside the test, how do you do it then?
@ChecklyHQ
7 ай бұрын
Custom fixtures aren't bound to a single one. You could add more if you wanted to. :) Add more properties to the `extend` object and you're good to go. :)
@powertester5596
7 ай бұрын
@@ChecklyHQ cool. Thanks for the reply :-).
@TristanBailey2 ай бұрын
How would you see that as different from just using .before that will already run before every test. (Or login session is better put in config where playwright has options for putting it per project/browser or for default of all. Saving in a json file. )
@ChecklyHQ
Ай бұрын
It depends on the case I'd say. If you have a single `spec` file before/after does the trick for sure. And also, when it comes to saving the login logic, you also make a valid case buy saving the browser state. All that said, I often prefer fixtures, because they "hide" functionality from my spec files. I don't have to worry about fiddling with before/after or anything. Additionally, I can also configure them with fixture options. Implementing fixtures just feel like a "native Playwright approach". And I like this a lot. But, of course and as always, it's a classical "it depends" and a matter of taste. ;)
@artful-drawsАй бұрын
Very nice and informative video. Did you put your codes anywhere in Github? could you please give its link to us?
@karthikeyan.ganapathy Жыл бұрын
is there a way we can enable and disable the fixture based on run time values like flag to enable or disable? Scenario: if the login/SSO is required for higher env's and not for lower env
@stefanjudis
Жыл бұрын
Enabling and disabling fixtures doesn't feel right to me. I'd rather make the fixture behave differently depending on run time flags. :) Hope this helps.
@guillaumebrunerie Жыл бұрын
What’s the advantage of using a fixture as opposed to a regular function? You could simply define const login = async (page) => { // Do all the stuff } and then simply call `await login(page)` at the beginning of the test.
@stefanjudis
Жыл бұрын
That's right Guillaume and a great question. In this simple example scenario, a helper method definitely works. 👍 Fixtures enable you to follow the PW conventions and group helper/utility code like the framework does. I consider this to be a great advantage. Additionally, and considering your example: if you'd want to perform a teardown action (maybe you want to log out after) you'd already have two methods to pull in every test case and the number of util functions grows. With a fixture-based approach, you could put setup (before the 'use' call), the action and teardowns (after the 'use' call) into a single place. Hope this helps. :)
@oyerindedaniel7977Ай бұрын
nice video
@aleksandrdobrev6584 Жыл бұрын
Very nice channel with good and simple explanations! How does this compare to a Page Object method? Is it better to use one over the other or maybe in combination?
@stefanjudis
Жыл бұрын
Thanks Aleksandar. I don't think it's an either-or decision. Fixtures play nicely with POMs. I see their main advantage in being to use "native PW functionality" and the ability to have setups / teardowns next to the code running in your tests. So if you're POMs have some sort of required clean-up steps, i'd def go for a fixture setup. Hope this helps!
@HelloWorld-xg6nw
Жыл бұрын
@@stefanjudis I am using fixtures to create POM objects, e.g. myAccountPage: async ({ page }, use) => { await use(new MyAccountPage(page)); }, so that I don't repear this useless code every time in test script
Жыл бұрын
which extension are you using to see the await text on handwriting font ?
@ChecklyHQ
9 ай бұрын
The editor setup is described here: www.stefanjudis.com/blog/how-to-enable-beautiful-cursive-fonts-in-your-vs-code-theme/
9 ай бұрын
@@ChecklyHQ thanks so much
@bgd_surf
Ай бұрын
@@ChecklyHQ thanks u rock!
@ripperx4442 ай бұрын
What if you want to have two fixtures in differnt files... you can't import them as they are extend test
@ChecklyHQ
2 ай бұрын
You could always structure your project to use different fixture with different exported `test` object. And depending on the fixture differences you could also make fixtures configurable with fixture options. It's a bit tough to give advice without knowing specific. :)
@danielkovacs3664 Жыл бұрын
thanks the videos Is there possible that we use different storagestate inside one test between test.steps? e.g.: test.step.use({storageState: '1.json '})... test.step.use({storageState: '2.json '})?
@stefanjudis
Жыл бұрын
Hey Dániel, I just had a look and I don't think that's possible. But if you're testing your sites with two different states (such as a regular and admin one) I'd also favor fixtures. `test('something', ({page, AdminPage})` Hope this helps. :)
@danielkovacs3664
Жыл бұрын
@@stefanjudis thanks, i am doing this now, my test login admin... logout admin login editor... logout editor login admin, that i can delete the item what do u suggest how could i avoid so much login,logut?
@ChecklyHQ
Жыл бұрын
@@danielkovacs3664 Hey Daniel, in this case I'd login admin and editor so that you don't have to switch and log in/out all the time. Similar to this: `test('something', ({page, AdminPage})` That said though, here at checkly we have a good experience with cleaning up created resources on the API level. blog.checklyhq.com/how-low-level-api-calls-stabilize-your-end-to-end-tests/
@chandanchoudhary86305 ай бұрын
Great stuff , Thanks , but how can we utilize this is page object model and maintain the same page state as page instance will be different hence different instances will be launched , can u plz show , thanks
@ChecklyHQ
4 ай бұрын
That should definitely be possible. I'll put it on the list for future videos. :)
@salikhanan9 ай бұрын
Hello, How can you return something form Webapp fixure? I am trying to copy text from text field on clipboard and then eceluate it and return it to my test,
@ChecklyHQ
8 ай бұрын
This doesn't sound like a fixture case for me. I'd instead extract the logic into a separate function for the case of evaluating text in the clipboard. That said, you could always change the fixture to be a nested object or a function. It's up to you what to call `use` with. :)
@CostaGiannakopoulos Жыл бұрын
Great video, Is it possible to create a base fixture that is common across all your tests but then extend the base fixture with something more specific that can target a subset of tests?
@ChecklyHQ
Жыл бұрын
Great question, Costa. Yes, this is possible with `test.use()`. playwright.dev/docs/api/class-test#test-use
@CostaGiannakopoulos
Жыл бұрын
@@ChecklyHQ Thanks I found a solution where I create a baseFixture that holds everything that is common to all my tests and then I have fixtures that extend the base fixture that targets a subset of tests and its working perfectly. I did try the test.use() but in my use case it did not work
@ChecklyHQ
Жыл бұрын
@@CostaGiannakopoulos That's great to hear? What were the issues with test.use()?
@CostaGiannakopoulos
Жыл бұрын
@@ChecklyHQ I was getting conflicts in the api request where 1 of the 2 requests was bad as they conflicted, so iv separated the conflicts into 2 new fixtures that both extend from the base so i dont have to duplicate the common stuff
@ChecklyHQ
Жыл бұрын
@@CostaGiannakopoulos Great. Thanks for explaining!
@sxsrin2 Жыл бұрын
I am trying to login with api and then pass that state to the page object and so far struggling with it. Can you make a video on that please ?
@ChecklyHQ
Жыл бұрын
Great call. We'll put it on the list. :)
@salikhanan9 ай бұрын
Hello, my API test creates an access token and I want to reuse that access token in other tests, How do you do that?
@ChecklyHQ
9 ай бұрын
You can create a similar fixture called "accessToken", do whatever needs to happen to access the token and then pass it to your tests via "use(token)". Hope this helps. :)
@salikhanan
9 ай бұрын
@@ChecklyHQ ok, Thanks, That was a quick help. at the same time another question I have json(playload) stored in a file and I want one Field (RefNumber) has a random value every time How can I provide a random value every time to the RefNumber in json? for exmple in follwing workOrderPayload is the work load and I was to provide RefNumber as a random to the Json everytime const response = await request.post(workOrderUrl, { headers:{ "Accept" : "application/json, "Content-Type" : "application/json "Authorization" : `Bearer ${process.env.TOKEN}` }, data: workOrderPayload })
@ChecklyHQ
9 ай бұрын
@@salikhanan I'm not sure I understand. Could you use `Math.random()` and alter `workOrder` to include a different `RefNumber`? That said though, let's stay focused on this video here. :) For questions around synthetic monitoring with Playwright and Checkly we're always happy to help at checklyhq.com/slack/. :)
@og4789
6 ай бұрын
Try native Authentication solution from Playwright well described in the docs
@imnutty77973 ай бұрын
What is font name do you use?
@ChecklyHQ
3 ай бұрын
It's FiraCode iScript and if you're looking for the same editor setup it's described on my blog: www.stefanjudis.com/blog/how-to-enable-beautiful-cursive-fonts-in-your-vs-code-theme/
Пікірлер: 79
omg that is the one I needed so hard, cool explanation, because I literally bored with all setups and imports due creating student's project. ty
@ChecklyHQ
2 ай бұрын
We're very happy that this video has been helpful! 💙
Straightforward and useful explanation. Thank you for sharing!
@ChecklyHQ
Ай бұрын
Glad it was helpful! 💙 Thanks for watching!
Wow! This was great! So hard to find good Playwright videos like there are for Selenium (Java, C#, Python). A few videos are out there for creating setup and teardown, but they are in the same file as the testcases are. Your video went at a good face pace and while watching it I started to notice it was about to end. You didn't yet show how to put the code in a separate file so I thought it wasn't going to be covered , but you covered it! Thanks so much!
@ChecklyHQ
2 ай бұрын
Thank you for the kind words. Happy the video has been valuable. 💙
My God this is what I was looking for! That's funny because I didn't find this clip at once, I stumbled on the clip about parallelism because google pointed out me that topic for my question. Thank you very much, your examples are very clear and straightforward
@ChecklyHQ
4 ай бұрын
Happy you found it after all. :)
Love the videos, they’re very helpful and love your energy!
@ChecklyHQ
8 ай бұрын
Thanks!
It would be great to see a video that matches with your article on the performance api. Great video!
@stefanjudis
Жыл бұрын
Thanks Ross. I'll put it on the list for the future videos. :)
Great example, helped me a lot, other videos from people have a lot of useless info. But your example is super!
@ChecklyHQ
11 ай бұрын
Thanks! Happy it's valuable! 🦝
Thanks team for quick video, you guys are great
Very good explanation on the topic.
@ChecklyHQ
4 ай бұрын
Glad it was helpful!
Such a beautiful feature!
@ChecklyHQ
Жыл бұрын
We think so, too! 💯
How is this different from a function that takes the page and executes the same operations than the fixture ?
Great presentation.
@ChecklyHQ
Жыл бұрын
Thanks! Happy it's useful. :)
Awesome video
@stefanjudis
Жыл бұрын
Thanks! Happy it was useful! 😊
Very helpful, thanks.
@ChecklyHQ
9 ай бұрын
Glad it was helpful!
Great video🎉
@ChecklyHQ
3 ай бұрын
Glad you enjoyed it. Thanks!
Thanks for sharing this content. quick and assetive. May I ask you whats the theme are you using on this video? thank you
@ChecklyHQ
5 ай бұрын
The color theme is Yi Dark and if you're after the custom font it's described in this article 👉 www.stefanjudis.com/blog/how-to-enable-beautiful-cursive-fonts-in-your-vs-code-theme/
Hi, I have started exploring playwright very recently and found your videos on the topic . Kudos for creating these :-). I have a question. If there are more than one reusable functions to use inside the test, how do you do it then?
@ChecklyHQ
7 ай бұрын
Custom fixtures aren't bound to a single one. You could add more if you wanted to. :) Add more properties to the `extend` object and you're good to go. :)
@powertester5596
7 ай бұрын
@@ChecklyHQ cool. Thanks for the reply :-).
How would you see that as different from just using .before that will already run before every test. (Or login session is better put in config where playwright has options for putting it per project/browser or for default of all. Saving in a json file. )
@ChecklyHQ
Ай бұрын
It depends on the case I'd say. If you have a single `spec` file before/after does the trick for sure. And also, when it comes to saving the login logic, you also make a valid case buy saving the browser state. All that said, I often prefer fixtures, because they "hide" functionality from my spec files. I don't have to worry about fiddling with before/after or anything. Additionally, I can also configure them with fixture options. Implementing fixtures just feel like a "native Playwright approach". And I like this a lot. But, of course and as always, it's a classical "it depends" and a matter of taste. ;)
Very nice and informative video. Did you put your codes anywhere in Github? could you please give its link to us?
is there a way we can enable and disable the fixture based on run time values like flag to enable or disable? Scenario: if the login/SSO is required for higher env's and not for lower env
@stefanjudis
Жыл бұрын
Enabling and disabling fixtures doesn't feel right to me. I'd rather make the fixture behave differently depending on run time flags. :) Hope this helps.
What’s the advantage of using a fixture as opposed to a regular function? You could simply define const login = async (page) => { // Do all the stuff } and then simply call `await login(page)` at the beginning of the test.
@stefanjudis
Жыл бұрын
That's right Guillaume and a great question. In this simple example scenario, a helper method definitely works. 👍 Fixtures enable you to follow the PW conventions and group helper/utility code like the framework does. I consider this to be a great advantage. Additionally, and considering your example: if you'd want to perform a teardown action (maybe you want to log out after) you'd already have two methods to pull in every test case and the number of util functions grows. With a fixture-based approach, you could put setup (before the 'use' call), the action and teardowns (after the 'use' call) into a single place. Hope this helps. :)
nice video
Very nice channel with good and simple explanations! How does this compare to a Page Object method? Is it better to use one over the other or maybe in combination?
@stefanjudis
Жыл бұрын
Thanks Aleksandar. I don't think it's an either-or decision. Fixtures play nicely with POMs. I see their main advantage in being to use "native PW functionality" and the ability to have setups / teardowns next to the code running in your tests. So if you're POMs have some sort of required clean-up steps, i'd def go for a fixture setup. Hope this helps!
@HelloWorld-xg6nw
Жыл бұрын
@@stefanjudis I am using fixtures to create POM objects, e.g. myAccountPage: async ({ page }, use) => { await use(new MyAccountPage(page)); }, so that I don't repear this useless code every time in test script
which extension are you using to see the await text on handwriting font ?
@ChecklyHQ
9 ай бұрын
The editor setup is described here: www.stefanjudis.com/blog/how-to-enable-beautiful-cursive-fonts-in-your-vs-code-theme/
9 ай бұрын
@@ChecklyHQ thanks so much
@bgd_surf
Ай бұрын
@@ChecklyHQ thanks u rock!
What if you want to have two fixtures in differnt files... you can't import them as they are extend test
@ChecklyHQ
2 ай бұрын
You could always structure your project to use different fixture with different exported `test` object. And depending on the fixture differences you could also make fixtures configurable with fixture options. It's a bit tough to give advice without knowing specific. :)
thanks the videos Is there possible that we use different storagestate inside one test between test.steps? e.g.: test.step.use({storageState: '1.json '})... test.step.use({storageState: '2.json '})?
@stefanjudis
Жыл бұрын
Hey Dániel, I just had a look and I don't think that's possible. But if you're testing your sites with two different states (such as a regular and admin one) I'd also favor fixtures. `test('something', ({page, AdminPage})` Hope this helps. :)
@danielkovacs3664
Жыл бұрын
@@stefanjudis thanks, i am doing this now, my test login admin... logout admin login editor... logout editor login admin, that i can delete the item what do u suggest how could i avoid so much login,logut?
@ChecklyHQ
Жыл бұрын
@@danielkovacs3664 Hey Daniel, in this case I'd login admin and editor so that you don't have to switch and log in/out all the time. Similar to this: `test('something', ({page, AdminPage})` That said though, here at checkly we have a good experience with cleaning up created resources on the API level. blog.checklyhq.com/how-low-level-api-calls-stabilize-your-end-to-end-tests/
Great stuff , Thanks , but how can we utilize this is page object model and maintain the same page state as page instance will be different hence different instances will be launched , can u plz show , thanks
@ChecklyHQ
4 ай бұрын
That should definitely be possible. I'll put it on the list for future videos. :)
Hello, How can you return something form Webapp fixure? I am trying to copy text from text field on clipboard and then eceluate it and return it to my test,
@ChecklyHQ
8 ай бұрын
This doesn't sound like a fixture case for me. I'd instead extract the logic into a separate function for the case of evaluating text in the clipboard. That said, you could always change the fixture to be a nested object or a function. It's up to you what to call `use` with. :)
Great video, Is it possible to create a base fixture that is common across all your tests but then extend the base fixture with something more specific that can target a subset of tests?
@ChecklyHQ
Жыл бұрын
Great question, Costa. Yes, this is possible with `test.use()`. playwright.dev/docs/api/class-test#test-use
@CostaGiannakopoulos
Жыл бұрын
@@ChecklyHQ Thanks I found a solution where I create a baseFixture that holds everything that is common to all my tests and then I have fixtures that extend the base fixture that targets a subset of tests and its working perfectly. I did try the test.use() but in my use case it did not work
@ChecklyHQ
Жыл бұрын
@@CostaGiannakopoulos That's great to hear? What were the issues with test.use()?
@CostaGiannakopoulos
Жыл бұрын
@@ChecklyHQ I was getting conflicts in the api request where 1 of the 2 requests was bad as they conflicted, so iv separated the conflicts into 2 new fixtures that both extend from the base so i dont have to duplicate the common stuff
@ChecklyHQ
Жыл бұрын
@@CostaGiannakopoulos Great. Thanks for explaining!
I am trying to login with api and then pass that state to the page object and so far struggling with it. Can you make a video on that please ?
@ChecklyHQ
Жыл бұрын
Great call. We'll put it on the list. :)
Hello, my API test creates an access token and I want to reuse that access token in other tests, How do you do that?
@ChecklyHQ
9 ай бұрын
You can create a similar fixture called "accessToken", do whatever needs to happen to access the token and then pass it to your tests via "use(token)". Hope this helps. :)
@salikhanan
9 ай бұрын
@@ChecklyHQ ok, Thanks, That was a quick help. at the same time another question I have json(playload) stored in a file and I want one Field (RefNumber) has a random value every time How can I provide a random value every time to the RefNumber in json? for exmple in follwing workOrderPayload is the work load and I was to provide RefNumber as a random to the Json everytime const response = await request.post(workOrderUrl, { headers:{ "Accept" : "application/json, "Content-Type" : "application/json "Authorization" : `Bearer ${process.env.TOKEN}` }, data: workOrderPayload })
@ChecklyHQ
9 ай бұрын
@@salikhanan I'm not sure I understand. Could you use `Math.random()` and alter `workOrder` to include a different `RefNumber`? That said though, let's stay focused on this video here. :) For questions around synthetic monitoring with Playwright and Checkly we're always happy to help at checklyhq.com/slack/. :)
@og4789
6 ай бұрын
Try native Authentication solution from Playwright well described in the docs
What is font name do you use?
@ChecklyHQ
3 ай бұрын
It's FiraCode iScript and if you're looking for the same editor setup it's described on my blog: www.stefanjudis.com/blog/how-to-enable-beautiful-cursive-fonts-in-your-vs-code-theme/