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

hello guys my name is kaushik and welcome back  to london taste in this video we are going to   learn about the playwright fixture so we learn  like what is fixture and how to use the fixture   and we are going to learn the  implementation using page object model   so let's get started now so if you see in our  previous video the page update model we have   written lot of pages and we have called those  pages in our test and we have created all the   object right so we have imported the class and  then like before uh using those functions or the   methods from the class we have created the object  and then we have used that right but there is a   better way to do that with the help of playwright  fixture so let me show you the documentation now   so here is the official document it is known as  fixture it's a based on the concept of the test   fixture so if you already aware of like python  probably you have heard the term like fixture   here it's going to be very simple and  easy to implement as well i can say   but few of the things we have to understand before  using this okay so let's get started now you can   read the definitions and everything i will show  you the uh practical implementation and as well   as the coding part now okay so before straight  away going into the playwright fixture concept   let me tell us how we can write our own fixture  as well okay so before that if you uh new to this   tutorial probably you might not  aware like what is fixture okay   so let's go and see our first test script that  is login.test.ds so here you can see like we have   launched the chrome.launch we got the browser  from the browser we created the new context   from the context we created the new page and with  the help of page object we are saying like go to   hover fill click wait for timeout whatever  the functions we have learned so far right   but this three lines is not required if you are  going to use the fixture so here if you go to any   other test like color.test.ts you can see like uh  within the test function and here we are getting   this page right so this is fixture that means  it's a object where it is already created uh like   all the codes like um creating the launching  the browser uh creating the context and creating   object for the new page right so we are able  to straight away use the page as a fixture   now let us see how this page comes within this  right so within the test block we are getting page   that's fine and it's easy to use as well but  how does it works under the hood so let us   do that let us understand that by creating our  own fixture so i'm going to create a folder here let's name it like fixture and within that i'm  going to create my fixture something like that okay so it's just a simple ts file uh same  thing applies for javascript as well if you   are using javascript but the syntax sugar might  be little change but mostly same okay if you   want to learn about the javascript probably  here you can see the documentation only the   import statement will change and few things  inside the code but concept is very much same   if you learn the concept in typescript and if you  want to refer the javascript code probably you can   see the documentation from the playwright website  okay so let's go and get started now so first of   all we are going to import the test import test  and that's going to be from uh playwright test   okay but of course we are creating our own  fixture so we will not use the test from the   player test directly but we will overwrite that  okay so here i am going to say something like as my test okay so this is going to be like  my test okay i'm just giving some allies to it   okay now what i'm going to do is i'm going to  say like my test dot extend is the function okay   so here you can select uh here we have like after  all after each these are like hooks from the test   turner before all before each and uh describe  expect lot of things are there we are going   to focus on the extent for now okay so within  the extent we have to uh give some generic like   generic in the sense like what is the data type  it's going to be okay and then followed by uh we   have to give some object within this okay so what  this generic in the sense like we can give the   class name and the class type or else we can say  like data and the data type okay so we can simply   give that within the uh generic itself or else  we have a special feature in typescript called   type okay so for example let's say that this is  going to be like type equal to uh let's say that   it's going to be like something like kaushik okay  it's just my name okay and then i'm going to say   like so caution is a type where it's going to say  like let's say that it has like age uh colon it's   going to be of type number and then it has like uh  or we can say like email equal to it's going to be   like string okay so kaushik is a data type where  it has a two fields like cage and the email okay   ages of name i mean number and email is of type  string okay so these are like your properties   and kind of like object but it's different  it's known as like type okay in typescript   okay now here i can pass this simply okay so  that's it that means uh my test is basically   allies from the playwright test runner and it has  a function called extend which will basically like   uh create so extend the test object very funny  fixture and option that can be used in this sense   so if you want to use this one okay for example  here we are using the page right similarly i   want to use something like age or the uh email  right so for that we have to do the extend here   okay now here what i what can i do  is i can simply uh say like uh age and then i can give the value and let's say that  it's going to be 27 and email and that's going   to be like string of course so we'll enclose  that within double quotes and something like   gmail.com okay so that's it very simple that's  it we are pretty much done already okay now   this i'm going to store it like uh let's name  it like uh my fixture test something like that okay now of course i cannot use it directly i  have created the fixture but i cannot use it i   have to do the export okay so here i will say like  export and then followed by uh const then followed   by test equal to my fixture test okay so this is  the this value okay so this is like while using   this my fixture test in another class i will use  that as a test okay not the my fixtures test okay   now let's go and create a file okay so here  i'm going to say something like uh fixture test dot ts file okay or we can give  the name as well like dot ts dot okay so here i have created a test now usually  what we do we do like we write a test block and   then we import the test from the playwright test  right but instead of that what i'm going to do is   i'm going to import my test from the fixture that  i have created okay so dot slash in the sense like   it's in the current folder and my fixture is the  file name okay so here you can see this is the   file name now this test will refer to this test  that we he imported okay so here i'm going to of   course give the test describe name for example  fixture demo and then followed by the async guy   and then here we'll get our fixture and of course  this is going to be your anonymous function okay   so this one right so usually what we do we will  get the page okay so page is like similarly like   we have extended that means already whatever we  have in the playwright test order we will get   all those things but additional to that like  i have defined the age right i can get that i   have defined the email that also i can get okay so  this is how the playwright fixture is working okay   so here you can see like here we are getting  the page because that is already defined   similarly if i want to get something of  my own then i have to use this like uh   creating a fixture i have to extend that and  then i have to use it okay so similarly um   like okay let's go and run this okay so i'm going  to console log like cage and then followed by the   email okay now let's go and run this so what  i'm going to do is i'm going to navigate to my   config file and here within the test match let's  give this particular test so copy relative path   paste it and change this to this okay now let's  bring out terminal ctrl j and here i'm going to   say npm test so what we can expect we can  expect like the um age and the email that   is like 27 and kaushik350 at direct gmail.com so  here you can see like we got 37 and the data okay   since we are receiving the string and  the number then of course i can do some   manipulation on that right for example if i say  like ml dot you can see like we are getting some   uh functions like uh two uppercase two lowercase  like whatever the string functions are there we   can get it and number in the sense like of  course i can do some uh manipulation i can   say like maybe like uh 15 something like  that okay so if i try to execute the same okay so 27 plus 15 42 and the email in uppercase  okay that's a very very simple thing very simple   concept this one is okay let me give you a quick  recap so here if i go to my login.test.ts this is   the like basic of playwright library okay this  thing is coming from the playwright library   where we have to say like how to launch the  browser how to get the context how to get the page   and once we create the page using that we  can access all the functions okay that is   the traditional way of using playwright as  a library but playwright test on it both are   different which is merge into a single uh ebay now  okay so playwright test runner basically gives us   all this like hooks the precondition and the  post condition right so here you can see like   here uh okay i didn't close the browser but of  course we should close the browser so that the   browser will get closed but whenever we write test  like this if you go this like um window.test.ts   here nowhere we are saying like how to close  the browser but after each and every test the   browser get closed right so in that way the  fixture helps us so how to create our own   fixture in the sense like it's very very simple  first you create a uh you give a allies to the   test from the player test owner and then you  use the extend and there you have to specify   the type okay if you don't know like what is  the type feature and if you're using javascript   simply you can just copy this and you  can give curly braces and give the value   as it is okay that's it if you don't know about  the types in type script uh in javascript i don't   think we have this probably you can use that  as an object or directly also you can pass it   as it is okay both way it should work fine so i'll  just comment this maybe for now for your reference   and just to make sure i'm going to  execute one more time and check this one okay and then uh using the my test picture you  have to import this okay so for example this is   this test right this is what we are using in our  test cases so here you can see like we got the   same output okay so here like if i change this  to let's say that this is going to be my it like   in the jasmine we say it block not the test block  right so if you go to the fixture.test now you can   see there is nothing called test so it will become  it and here also it will become like it okay so   that's a very simple thing i'm going to undo this  now and undo here as well okay so we understood   the core concept of playwright uh fixture but  this is just like 10 or 20 percent i can see   there are a lot of things which you can learn of  your own so here you can see like how to create   a fixture we have done that how to use a fixture  we have done that but apart from that we have like   overriding vocal scoped automatic timeout options  execution order a lot of things are there probably   you can learn those by reading this document  it's very very uh easy to understand i   believe others do let me know in the comments  probably i can do that in another video okay   now let's go and understand how to implement  the same for the page object model okay so page   object model already we discussed in our previous  video and it's uh i think it's that's one that one   is really elaborated so i'm not going to give  you a quick recap on the page object model but   let's understand how to use with the help  of player test runner okay so i'm going to   create a folder called base and within that i  am going to say like something like form fixture   dot t as well okay and then of course  what we have to do we have to first   import the test and we are going to  give some allies let's name it like base   uh test something like that and we are going to  import that from the playwright test runner okay   so playwright as test okay that's it now of course  we have to create the uh fixture using the extent   and then i'm going to give all my types okay  so here i'm going to say like uh type pages   equals within the object we are going to give  the values okay so what are the pages we have   simply we can go to our test file and we can  import all the classes okay so i'm going to copy   and paste over here okay so here we can  say like something like a register page   and the type is going to be like register page  okay so similarly i'm going to give for all the   values so here i'm going to say like uh login page  colon login page okay and you can separate this   with colon if you want or else you can skip that  as well okay and okay let's do for the home page colon home page and then followed by special page colon special page okay so don't get confused  it's really easy this is like we are giving   some name like register page is the class name  whereas we are giving some allies to it okay or   we can also select creating and giving an object  name to it okay now what we are going to do we   are going to give the generic type so here i will  say the generic and the type is going to be like   pages and here we have to create the object for  all the classes okay now let's give some name   to it so i'm going to say like const test pages  can be any name don't worry about the name until   it is understandable and meaningful okay  and from there of course i have to export   so i will say like export const test equal  to test pages okay okay let's get object for   all the classes that we have declared here okay  so first we'll start with the register page   and then we have to use the async of course it's  going to be like asynchronous everywhere and then   followed by we are going to get the page within  the fixture and then we have to return something   right so we'll say like a weight and then followed  by use i'll tell you this use what is used   so before that we'll get the use first and here  we'll get the use so weight use and then followed   by new the register page where we have to pass  the page in the constructor okay so that's it very   simple right so let me tell you what is this okay  so this is the register page which is coming from   this type and here we already know like async have  it that is fine and already this is also a fixture   right so of course we can get the page within this  and you say something like that we have to uh like   kind of like overriding okay so for example when i  say like test.use there is also a function called   test.use for example uh let me go to any of our  test so here you can select we are getting the   base url right so if i want to overwrite the base  url what can i do is i can simply say like test   dot uh use and here i can say like my base url is  going to be something something something okay so   now this bs url will be this some this b serial  that is some value some url okay so this use   is basically going to override that is specified  within the fixture okay so same concept here also   like within the playwright test there is already  a use which is using some data but we will have   to use that right now so what we are going to do  we are going to use the no okay so then we are   creating the object okay so what is the difference  between creating object here and creating the   object within the test directly right i will  tell you that difference in a moment please give   me some time okay similarly i'm going to create  object for all the classes so let's copy paste   okay so first one is the login page then here it's  i mean register page then here it's going to be   login page it's going to be my home page and this  is going to be my special page similarly i have to   change the class name as well let's copy and paste  it very quickly okay and of course format the code   let's write this one by one for better  understanding okay last comma is not needed   yeah so this is how we have created all our page  objects within the fixture that means now i don't   have to create the page objects or the class  objects in all my tests rather i can just simply   use those for example i'm going to copy paste  the same text and here i will name it like using fixture just for your understanding i'm  giving this name of course you don't have to do it   okay and what we can do is we can simply like  wherever we have created the uh this thing   right we created the object right we are going to  comment that okay so of course we will get lot of   error but that is fine for now okay so this three  okay so totally we have like three test blocks   and everywhere i have just converted that one  okay now this test is coming from where this is   coming from the playwright test runner okay but  i don't want to use that rather i want to use it   from my fixture correct so here i will say like  dot dot slash and then followed by fixture slash   uh okay with this this is within the base right so  slash base slash form fixture okay now here test   is fine test we are getting but the expect is not  coming from there right so we have to export the   x expect as well okay so here what can  i do is i can simply say like export   uh const expect and that is going to come from  my test test pages dot expect okay so that's it   like whatever you want to use you can use it for  example here uh this test.described right so this   test.describe also coming from the same test  so that is fine okay if you want to export it   separately you can do that as well okay um yeah  now since this test already we have created a   fixture what can we do uh simply here i can say  like i want register page for this particular   test right so here we are using all the register  so i can just copy and i can just replace this now okay so that's it we don't have to create this  object rather we will get this from the fixture   and we can use it now here we won't want we  we want the login right so here i can say like   dot login page okay and then i can use this  everywhere i need okay so here it's going to   be like login page okay that's it very simple  thing okay now here what we need we need the   home page login page and the special page right  so we'll import all the like login page home page   and the special page okay so that's it very simple  we'll just change this now login page this is home   page and this is going to be my special page  okay and this is also same okay that's it we are   pretty much done okay now let's uh confirm this by  executing the test so i'm going to do that let's   go to okay here we don't want this import anymore  because we are not creating the object within the   test rather we have already created in our picture  and we are going to use it here so this looks very   simple right so if you compare the code side  by side uh let me split right and here okay   so let me increase the font yeah so let me okay  let it be okay so here you can see like we have   lot of import statement here it's look more  cleaner and here we have created the object   everywhere whereas here we are just getting it in  the fixture and we are you you can use that within   the test directly okay so like if you have like a  lot of test and you have to create a lot of object   then of course here you have to create like you  see here we have get the login here and again we   have created the login here as well but in this  case in this fixture we didn't get the object we   just use it from the player test picture okay  so that is the benefit of player test fixture   once you start using it you will understand  it uh better i guess okay so let's go and   bring the playwright config file here  i'm going to change this test name okay and let's run it just to  confirm like everything works fine okay so the browser got launched it's doing  some registration uh email is already exist   so that's why that that should fail actually  but i don't know we have correct validation   message or not okay and since the emulator id is  already there of course we can log in and we can   do something over there yeah so it says three  pass but we know that one god fail that is the   bad of mine okay not the playwright  thing so here of course i have to   write some validation step okay that is why like  without validation we should not write any of the   tests okay so here we like this  one we are checking but once we   click on the continue register button  we have to do some verifications like   the verification i mean the registration is  complete or not if that is done probably here uh   it will be failed but in our case it is passing  okay that's that's a test script problem don't   worry about it too much now okay so that's it we  are pretty much done with our playwright fixture   uh let me give you one more tip to improve your  page object model like reading the data from the   uh json file okay so instead of like creating here  all the test data what we can do is we can create   a json file okay so i'm going to write that within  a folder let's make it like uh test dash data   okay and i'm going to say like um at 2 card dot  test dot data not like dash yeah that should fine dot json file okay yeah that is fine okay so  now here i can just simply create an object and   you know the drill dragged to read the  data so first of all is your first name   so i'll say like uh first name equal to  sum name and then it's going to be like the last name so what are the test  data you want you can specify over here okay and what we need we need the email the email  we are getting from here so we will change that   so here i can say like comma then followed by   email and the value so here i'm going to make  a change to like 0 4 okay and what else we need   we need the password guy right so we'll copy  that and here we'll change that like password and the value okay i think this these are the  four only we need so we'll just remove this one   uh yeah we don't have any other values  okay so even if you want the phone number   probably you can give that let me show you  that as well okay so here i'm going to give   one more like phone underscore  number and the phone number okay some   number yeah fine now let's go and do this so  here i'm going to like do the import star as data from the what it's the folder name it's in the test  dash data slash okay i have to use like   dot slash uh come on i can just  copy the path and paste over here   and of course within the double quotes and we'll  change this to this one okay and it should be   like dart slash i guess dot dot slash yeah so  this is the path dot dot slash test data slash   the json file name okay now here we are using this  like allies data right so here i can say like uh   and simply i can remove the first name and i can  say like data dot first name okay that is the   beauty of typescript you can get the suggestion  here directly from your jsr json file okay so   this is the last name and this is going to be my  data dot phone number and this is going to be my   data dot password and same here data dot  password okay so similarly you can change   for other things as well so i'm going to  uh okay let's do it okay so data dot email and here it's going to data dot password  similarly here okay so data.email.password okay that's it pretty much done now here we have  changed this to 04 so hopefully it should do the   registration now let's go and run this one  more last time okay so let's go and run this okay uh in email it says like okay it's  going to fail actually and all the other   tests will also fail because the registration  itself failed right so let's see what happens i have given the data wrong that's it  nothing much here so if you go here uh so here it should be like email and this  one is going to be like data dot last name okay so we got we corrected  everything but let's wait for this one   okay last one got passed because we have given  that here correctly but other two failed because   the last one should also fail right  let's go and check the reporter okay so if you go to the reporter  and if you open the index.html   to cut this one got pass actually and  what is the test data cow604 at main later okay that's let's go ahead and check the  video i think i have that zero four millimeter   registration as well okay i got it uh the login failed but  without login also we can add a product   to the cart right so that's why the test  got passed i think we should write a better   approach to handle this test case  but yeah you got the idea right so   now let's make it one more time pass like i want  to do the registration with that i want to do the   login and then i want to check the product in the  cart okay my test case is first here that's why   even though it's fading it's showing the  result as pass but you got the idea right   so we are focusing more on the coding part not  how to write a good test so you got the idea there's also one thing like in test automation  sometimes if you don't follow the test case or   you don't know about the use case scenario even  though your test is failing it will give you false   result as pass okay so be cautious on that okay  so that's it we got the uh result now and three   are passing okay so this how we can read the data  from the json it's going to be very simple and the   playlist test fixture okay so let me give you a  quick recap and we can conclude this video okay   so let's go to the base form fixture dot yes okay  so very simple thing so whatever the classes you   want to create object do the import before that  do the import from play red test and give allies   to that okay like base test or whatever you  feel okay and then you have to use the extent   where we have to give the types like what are the  classes we have and using that we have to create   the object for all the classes and make sure you  are going to use the async and tablet and the use   function as well okay and then whatever you want  to use or export to the outside of this particular   class you can do the export okay and then from  your fixture test you can uh just get that so in   this way we don't have to write lot of import  statement in our test file and also the good   thing is like when we use the playwright test  runner we don't have to worry about the before   and after the test like opening the browser and  closing the browser it's basically like static   object uh which will take care of all the other  things okay so that's it for my side thanks for   watching if you have any queries feel free to  ask me in the comments see you in the next one you

Channel: LambdaTest

Views: 10,246

Keywords: read JSON file, playwright tutorial, playwright test runner, playwright automation tutorial, what is fixture, playwright automation framework, playwright fixtures, playwright tutorial javascript, playwright typescript, playwright automation course, what is playwright fixtures, playwright test runner fixture, playwright test fixture, test runner fixture, playwright pom fixture, playwright test fixture advantage, playwright test fixtures, pom playwright, playwright tutorial pom

Id: NE7F-uQM4QU

Length: 33min 28sec (2008 seconds)

Published: Fri Aug 05 2022