Playwright + Azure Pipeline | Playwright Tutorial - Part 74

hey hello guys my name is kaushik and welcome back to lid code in this video we are going to learn how to run our test in the microsoft azure pipeline so let's get started now uh first of all i believe that you already have the microsoft azure access or else you can also um check out the free tire if you are going to try of your own probably you can just go to this like azure.azure.com and you can sign up and you will get the instance here okay so then we will create a project if you already have a project that's absolutely fine okay and here if you go to this blue color kind of rocket here you can see like we have pipelines so we'll go to the first option that is pipelines and here i'm going to create a new pipeline okay before that uh if the azure is from your personal account um when we create a new pipeline it won't run okay so if you go and see here you will end up within some exception like this so this is basically a form i have to copy the url and you have to go to that particular site and there will be a form just fill it like give your email address your name and your uh like whatever the project you have created that url and also like whether it's a private or public okay so once we do this once we submit this form it will take like two or three working days and then we'll get the instance okay now let's get started again so here i will go to this pipelines and then i will create a new pipeline here and it will ask like where is your code this is basically based on the yaml it doesn't work in my case so i will go with the classic editor here and then um if your code base is in the azure uh git itself then fine or else you can select like github like where your code is and then we have to select the repository but before that if you're going to do it for the first time you have to do some authorization so here you can see some option will be here just click on that and login into your github and give the access that's it very fine okay now here if i go to the repository here i can select uh load all repositories so it will just load all the repository in my case i'm going to use this playwright test runner you can just search and you can select the uh whatever the repository you want to execute you can select that okay and it will ask you like branch in from which branch you want to execute so if i go to my github you can say like it is basically i have only one branch the main branch so i will go with the continue button and then here we are going to create a empty job okay so here we can give like any name uh let's say that it's going to be my playwright uh just i don't know something like this okay i can just give any name or you can give your project name and here we have like as you put agent pull just leave as it is and here you can specify like in which operating system you want to execute it can be like ubuntu or windows or even mac okay so in my case i'm going to select this windows latest let's go with that okay once that is done now here if you see this the agent agent is kind of like we are giving or allocating a machine to it so that it can execute after that what we are going to do is we are going to uh click on this plus icon and here we are going to search like command line okay so what is command line in the sense like we have to install the dependencies and everything right so for that we are going to use this one let's go and click on this add now if you come to this command line here we have to basically uh give some name okay what is the display name so here i will say like install playwright okay and here we have to give our command like to install the uh playwright right so already the source code is from like from the source code it will get downloaded in our agent and from there from that particular folder we are going to install and uh set up the dependencies so for that i'm going to say like in pm hi that is npm install and and then we are going to say like np x install playwright okay so npm i in the sense like based on our package.json so if you go to the github repository and if i go to my package.json here you can see like i am using multiple different dependencies all these dependencies right so that we need that dependencies so for that if i say npmi that will download all the dependencies and once that is done of course we have to say like npx install playwright because like playwright comes with its own browser like chromium firefox and the webkit right so we have to install those browser assets so that's why we are using this two commands and here that's it we don't have to touch anything if you go to the advanced um i think we have to select this working directory as well so here we can select this one browse and you just click on this okay or else you can click on this icon and here you can see something like link okay click on the link and just click on this link okay now our working directory is set so there only all the dependencies and all the project files is going to download it okay so that's it we are pretty much done with the second step now third step uh we are going to run the test right so we have to select npm run test so that from the package.json file it is going to execute all our test right so for that we can use the command prompt or else also we can use this um npm uh terminal as well okay anything is fine you can go with the command prompt itself or npm i will suggest to go with the npm because in future we might use like commands like grip which is very flexible with this npm okay so let's click on this add and here i'm going to say like uh execute the test okay so this is going to execute my test and the command is going to be custom and here we'll say like and first of all we have to select the package.json okay so click on this icon and click on this link and click on link again okay basically it will try to take it from the parent pro uh root of the project and here we have to give the command that is going to be like npm run test or npm test anything is fine okay and that's it we are pretty much done now i'm what i'm going to do is i'm going to save and cue this okay and if i want to give some comment i will give it like init test and windows latest and it's going to execute from the i mean going to fetch the code from the main branch and that's it we have uh save and run so i'm going to click on the save and run now here you can see like our uh playwright tester the job is created if i go to this agent job one and here you can see like uh basically it's trying to set up the windows late estimation here and then followed by first time it will take some time then afterwards it will be really fast okay there's some failure uh let's go and edit this one i think that npm i so you can go to this and here you can select this edit pipeline and first of all we'll say like in game install it should work fine and then px installed that should be like nps install playwright install i think what is the command i forgot let's go and check yeah that should be npx playwright install not in px play right and this can be i itself that's not a problem i believe let's go ahead and save and cue it one more time okay so we got the agent now it's you know done the initialization and the code is also checked out and then the install playwright should work fine this time i believe let's see so here you can select npmi and npx playwright install and uh yeah this time we can see like it's basically working that's fine i believe so what i'm executing is like yesterday we saw with this um projects right so if you go to my playwright config.ts you can select we have this chromium browser as well as the pixel and we have only one test uh which is this palm ts on that one so that should run and that should be really quick i believe let's see so here you can see like uh playwright is built for chromium and ffmpeg and then followed by firefox and the web gate is also going to download so for this one we are using this npm player npx playwright install okay in case if you don't want to execute in all the browsers right that you want to exit on the chromium then you can customize the dash as well and here if i go to the execute text test and we got some failure again here let's see okay another mistake is like here you can select the node version is like 8.5.0 okay but the version playwright suppose is basically the player node version of 14 and above okay so we have to install the node as well so let's go and ready the pipeline once again sorry for that and here before this install i'm going to uh get the node okay so node uh tool installer i'm going to click on this add and i'm going to drag and drop to the top okay so before the install command we have to set the node so if you click on that here you can see like we have to use the node version of 14 and above so i'll just go with like 16.0 maybe and here we have this this just a name you don't have to let's name it like node installation something like that meaningful and here i have to mention the version so it's going to be 16 dot x so any version above 6 dot 16 dot okay and hopefully this time it should run so i'm going to save and queue one more time okay so installation is successful now it's going to execute all the tests let's go here and still we got a failure okay still we got failure and that's actually a problem with like the configuration i have done here you can see like it says like uh unknown command npm okay so when we install the node uh installer we don't have to say the specifically like npm we have to just say like run test or uh or install like that okay so i'm going to edit the pipeline once again and here if i go to the execute test here i don't have to say the npm rather i can just simply say like run test that should work fine okay so let's give it a last try i'm going to save and queue one more time i'll just forward it skip it like i will make a speed forward so you can your time won't be waste here okay so finally we got the execute test as uh like passed the steps and here you can see like uh yes mobile v false is mobile b2 that is what we discussed yesterday and two tests are there and that got passed okay and then it will just doing the uh final steps and then it should finalize the job okay so that's it we're done now if you go back here and here you can see like edge and job on success that means like of course our test has executed if there's any failure definitely it will show you we can just give it a try okay now one more thing i want to show you like uh here right so this is our pipeline uh if you want to schedule it if you want to schedule based on like each and every night you want to execute your regression things or your insanity then of course you can just go to the edit pipeline and here uh we have this trigger option right so here you can trigger like cannabis continuous integration and you can like give some like uh in from which branch you want to execute and in what time what day you want to exceed you can give it a try it's very simple similar to jenkins you can give it a try okay so i'm going to disable this now because this is a free trial and i don't want to waste that okay so finally we are also going to implement the report so once that is it is completed we want to see the html report and we can achieve that with the azure itself okay so here i'm going to add one more step and here let's search for html publish html report okay so here i can say like add button is there but if you are going to do it for the first time you might not see this it will be something like get it free just click on that and follow the steps it will be really easy so i am going to click on this add button and here uh we can select publish html report that is fine and the tab name let's name it like playwright report and here we have to give the working directory like where our report is going to store okay so that will be like play write dash report and then followed by slash index dot html okay so this is our reporting path we have to give it correctly okay and that's it we are pretty much done i'm going to save and cue i'm going to save and cue this one more time let's see the output as well so here you can see like as of now we have only summary right but once the execution is completed we can say something like html uh viewer and from there we can access the playwright reporter okay so let's wait until this get finished okay so the test is completed and also here you can select published html report that is also done now if i go back to the pipeline here you can see like we got a new tab called html viewer if i click on that here you can see like we are able to see the html report from playwright test okay so this our loop report is going to look like so here you can see like i have executed in the chromium as well as in the pixel device now one drawback is here because this html works based on a static report but whereas the player test on a report uses data from different from another directory if we click on that it will be becomes like kind of blank hopefully that will be fixed in upcoming uh releases maybe from the from this plugin okay but yeah so if you want to see the basic reporter then definitely uh like if you want to see just the dashboard this is definitely going to be very cool okay so before going to the uh closer let me give you a quick recap so go to the pipeline and create a pipeline and first thing you have to do the node installation with the minimum version of 14 and above in my case i'm going to use the 16 and second install playwright here we have to give this command and make sure in the advance you have to link this work working directly or else it will fail okay and to execute the test we have to say like npm not npm make sure you are going to give like run test not the npm run test only run test and to do this html just you have to give the path of the directory okay so that's it very simple thing i hope you have enjoyed this and also you understand like how to run in azure and the users with this like configuration issues okay so that's it for myself thanks for watching see the next one very soon [Music]

Channel: LetCode with Koushik

Views: 15,558

Keywords: playwright azure pipelines, playwright azure devops pipeline, playwright test runner, playwright, playwright automation, playwright tutorial, playwright letcode, playwright koushik, software testing

Id: RCzXuCt8Lng

Length: 16min 48sec (1008 seconds)

Published: Sat May 28 2022