Full transcript of “Playwright with Javascript | Reporters | List, Dot, Json, JUnit & HTML Reporters | Part 36”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
0:01 hi everyone welcome you all the today's video let us try to understand different type of reporters in playwright so basically playwright is provided some built-in reporters through which we can generate different type of test reports now for example list reporter line reporter HTML reporter Json G Unit reporter and these are all built-in reporters which are supported by playwright so apart from them claverett is also supported some third party reports for example if I go back to the documentation and here they have provided some third party reporters like alure report mono card okay test cells and Etc so these are different type of third party reports it will support
0:47 in the today's video let us try to understand the default reporters and what are the default reporters are supported list reporter lion reporter dot HTML Json and junit and Etc okay so we can use these reporters in two different ways one is by using configuration file so we can specify the configuration we have a one file called private playwright.config.js and in that we can put configuration and other one is we can directly execute the command through terminal or CLI we can execute the command it will automatically generate so there are two different ways we can generate the reporters now let's see one by one so for that I am opening my vs code editor
1:33 and I already created one small test reporters.spec.js in my test folder and if I look at this test I have three different tests which is great which are created this is a test one test two test three and I'm just opening the page and just verifying the title and for every test I'm opening different pages I'm verifying the different title so if I execute the test I am trying to run the test and base play rate test reporterspect.js iPhone my project is chromium okay I'm just running my test so it is started executing three different tests and by default it is executed on my Chrome browser and because I have not specified any headed mode so by default tests are
2:20 executed on the Chromium browser in headless mode so now I want to execute in edit mode I can say iPhone iPhone headed so this will launch the browser and closed all the browsers executed and also to close all three tests are got passed okay so now let us see how can we generate the different type of reporters or how can we use different type of reporters now the first reporter let us see list reporter now go back to the documentation once again so they have provided all the reporters one by one and let's see one by one so here initially they have provided list reporter so how can we generate the list reporter
3:05 so one approach is we can directly specify we can directly execute this command like npx Player test hyphen iPhone reporter equal to list so this will generate the list reporter and other ways we can directly specify this configuration in the configuration file that will generate the list reporter so let's see how can we generate in both the ways now I'm going to vs coordinator and go to configuration file first playwright Dot config.js in this by default reporter is HTML right so let me just change it as a list okay so this is simple configuration we can do in the reporter we can specify as a list and save the configuration file and now go and execute our test so I'm trying to execute my test
3:54 reporter.spec.js in the console window so I'm directly executing on headless mode I'm not going to select any project or anything simple test three tests now I'm going to execute the test and want to generate list type of report because in the configuration file we configured the list okay now go and execute so now we can just observe three different tests are executed and it is generated the list like this so test one test two test three like this okay so by using tick mark it is generated suppose when I file some test let's say I'm failing this test go to the file and save and then execute again and now one and two got passed now three
4:40 should fail okay now we can just look at here two got passed one is got failed so this is called list reporter you can just look at here so we have executed three tests okay now you can see this is the list the first two or got pass in the list and third one is got failure simple your simple list reporter we can go to configuration file and specify and then as usual execute this Commander and picks play Red test and inside the test folder I am running reporters.spect.js you don't need to specify any commands anything else okay suppose if you want to generate the same reporter using command line what you can do is let me comment here configuration file and go to the terminal
5:26 save go to the terminal and apart from this command we have to additionally give iPhone iPhone reporter iPhone iPhone reporter space list or you can specify equal to list equal to or space both are alone so reporter equal to list so this will also generate list reporter you can see all three tests are executing and third one definitely will fail because internationally we fail the test now let me correct this and then go and save it and then again I'm trying to execute One More Time by using the command prompter so you can say iPhone iPhone reporter equal to list so this will execute and create list reporter Okay so
6:11 this is the first type of reporter list reporter either by using command or by specifying this option in the configuration file and same thing similarly we also have something called line reporter line reporter so for that what you can do is same command line instead of list we can simply say line okay and through configuration file also we can do it if you want to do configuration file go here so instead of list I can specify this as line line okay I guess I save the file and then go to the command line and then execute the test so to execute the test here we don't need to specify the reporter option because we already configured in the configuration file
6:57 simply execute the test so this is a lion reporter so you don't see anything just water tester got executed pass only you can see past if there is any failure it will show you the failure so this is a default one okay line reporter and if you want to do this through command prompt you can just comment this in the configuration file and then go to the command line and this time you have to write the command hyphen hyphen or reporter equal to line so this will generate the line reporter okay it's very simple two different ways we can do through configuration file or you can root through command prompt okay so these are the two line and list now there is another reporter called dot
7:45 reporter so let's see how can we generate the dot equal to simple if you want to generate this through command prompt you can say hyphen iPhone reporter equal to dot or if you want to do this through configuration file you can specify reporter is a DOT so let me go to configuration file and then I'll make it as Dot reporter colon Dot and then save the file and go to the reporters.spect.js now I am trying to execute that as I don't need to specify any options just run the test so this is a dotted reporter now you can just observe there are three dots are displayed in the green color so that means the three tests are executed all three tests are got passed okay let me fail something here and observe what will happen so let me try to fail the
8:32 second one second test I am going to fail now observe how it is going to generate the dot reporter now execute now just observe yes one is failed two got passed and if I look at the Dots here observe the terminal output you can see two got past one test is got failed in the three dots one is say F rest of the two are passed two green dots are representing past f is representing field okay so this is very simple it will show you simply in the dot format okay so this is a dotted report we can
9:19 simply specify the configuration dot inside the configuration file and execute the test command and through the command prompt how can we generate simple we can say comment this and through the command prompt you can go to the test clear and through the command prompt you can simply run the test iPhone reporter equal to dot iPhone reporter equal to dot so this particular additional option will run the test and generate dotted report so this is another reporter dotted reporter so we have seen list reporter lion reporter dot reporter and then we have a HTML reporter so we have a HTML report so we can
10:05 generate HTML reporter for our test so to generate HTML reporter again there are two ways one is through configuration file other is for through command prompt so let's see through configuration file go to the configuration file so instead of reporter here dot you can simply say HTML HTML okay now save it and then go to the command prompt clear and now I'm executing the test you don't need to provide any options just run the test press enter so now all three tests are executing all three got passed now where we can see the HTML report so this HTML report will be generated uh here you can see playwright report the new folder is got created inside this index.html is
10:51 got created so this is a report file now if you want to see that HTML you can directly open this index.html in any browser or the playwright itself provided this command to open the report on the browser you can simply say npx playwright show iPhone report so if I execute this it will show you the HTML file and all three tests are executed and passed okay so this is how we can simply generate HTML reporter for our test and this is through configuration file you can directly specify HTML in the configuration file suppose through command prompt how can we execute let me comment this and then go to the command prompt clear now I want to
11:38 run my test and want to generate HTML reporter simply what you can do is execute this command hyphen hyphen reporter is what reporter equal to HTML so this will generate the report and that will be stored inside the playwright report folder So currently I'm just deleting this it will automatically created by the commander So currently I deleted now I'm running this file command reporter equal to HTML now three got passed now if I look at here playwright report folder is already generated again one more time and this is a report file index.html and again if you want to see the report you can execute this command in place playwright show reported okay so this is how we can simply generate HTML reporter
12:25 HTML reporter okay now let's move on to the next one so HTML reporter so next we have something called Json reporter Json report also we can simply generate so to generate the rejson report again we have a command prompt we can execute this command and also we can do the configuration so to do the configuration what you need to do we need to pass this value Json is a variable and this is a value key and a value page so this is the key and this is the value so get this information and go to the config file and I will keep this okay so reporter and we need to put one comma here so
13:11 reporter is what a Json so this is basically an array so from here to here this is the array element in the array we have a key and this is a value okay output file we can specify so what is this output file is this is a result.json file will be created under the folder you can specify whichever path you want so the Json report will be generated in this file result.json oh this is the parameter we have to pass okay this is a variable and this is the parameter this is the name of the JCP and give any name so I'm just saving this and now when I run the test the Json reporter will be generated that will be part of your project so this is a with the same name it will generate now I mentioned this option reporter is
13:56 Json and then go to the test and I'm running the test directly without having any options okay now all three my tests are got passed now if I look at this there is a JS result.json is got created so this is a Json reporter so these type of things will be published in the ca environment later so that will be very very useful so this is a Json format Json reporter Okay so this file will automatically create because we provided the output file here okay now same thing we can do through command prompt also for that what you can do let me comment this and if you want to do through command
14:42 prompt can simply say okay and clear and execute the command by specifying iPhone reporter equal to Json iPhone iPhone reporter equal to Json so when you specify this option hyphen iPhone reporter GSS so where this Json report will be generated because we are not specifying any file right so because of that it will generate the Json report in the command line itself in the terminal itself so if I look at here so this is a Json reporter this is the output of that this is a Json reporter which is got generated in the command line itself right but if you want to get this Json
15:29 output in some particular file then we have to set some environment variables so that's the reason they have mentioned this so we have to set the environment variable depends upon your operating system like in bash if you if you are a bash you have to exude this command if you are Powershell then you have to execute this or if you are a batch then you have to execute this so if you want to generate the Json reporter file we have to first configure the environment variable and then execute this command so then what happens this reporter entry or data will be logged into the particular file if not specified the file then Json data will be generated in the terminal itself okay now same thing is applicable for uh junit report also let me just clear this
16:14 and if I go back there is junit reporter so the J reporter also will generate the reporter in XML format okay so that also we can do through configuration file and through command prompt so let us do the configuration file so this is the entry which you have to use junit and output file will be result.xml file so this is a reporter which we have to use go back and configuration file I'll comment this and then put this so reporter is what this time junit output file is what result dot XML file okay now save the configuration file and then execute my test through command window so this XML file will be created again in the current project location okay and no need to pass any options
17:00 directly run my test so okay now all three got passed now where you can see this this is a result.xml file so the results will be generated in the form of XML file this is reporter junit reporter Okay and through configuration file we have generated junit report Linux ml format so through command prompt if you want to generate again what you can do we can just comment this configuration file and then go to command prompt and execute the same test command and additionally we can say iPhone iPhone reporter equal to J unit iPhone iPhone reporter equal to J unit
17:46 okay now let me okay so where this will generate the report so previously because in the configuration file we specified the location right so output file location so it is generated in the current project location file but this time we are not specifying any location right so the junit report XML will be generated in the console window itself or in the terminal window itself you can see this is XML format of the reporter output again if you want to save this entire thing in the external file you have to again set the environment variable as they said in the documentation you have to create one environment variable and assign some data like result.xml after that you can execute this command through command prompt so the result will be saved in the external file result.xml file
18:32 according to the environment variable okay so this is a another type of report junit reporter okay so far we have seen lion reporter list reporter dot reporter HTML Json and junit reporters right through configuration file and also through command line sometimes if you want to generate multiple reporters right so then we can configure multiple options in the go to the configuration file and you can enable multiple reporters so for example okay I can say okay I'll copy one of the reporter now I want to generate multiple reporters let's say I want to generate the list reporter so in first array you can write a list here
19:17 okay list you can put in the single quota so these are one uh reporter comma the second reporter I want to generate a G Unit so let it be there as it is so this is one reporter and the second reporter is this one and everything we need to put in the array itself this is a second reporter and comma now I want to generate uh Json also let me have this junit and Json reporter okay that's it so currently I have three types of reports so list J unit and the Json three types of reporters even if you want to put HTML you can simply put HTML also here I can add another bracket and say
20:03 uh HTML like the send comma so how many reporters I have used here list the reporter and this is HTML reporter junit and Json so multiple reporters list HTML junit and Json okay Let's uh remove the files because it will newly creates slows it and delete this and also I'm just going to delete this HTML report folder okay so everything previous stuff I have deleted now I specify how many reports are total three four five reporters okay totally five reporters okay now we need to put one more bracket
20:48 here just a second this is one bracket is got closed and here this is not needed and Json okay so this bracket is not needed okay fine so now let me save the file and then so currently we are generating four types of reporters at a time multiple reporters list HTML junit and JSL for HTML Json it will automatically create a files but the list it will not create any file it will just show you in the terminal or console window okay because through configuration file I have already set so I can just run the test without having any options just running my test so list report is got executed see this
21:36 we can see all three tests are executed in the form of list it will show you and uh you can see playwright report this HTML report is got generated and scroll down you can see this is the Json report is got generated and also junit report is got generated okay so multiple reporters we can specify the configuration files like this we can specify okay so whatever we discussed so far these are all built-in reporters these are all built-in reporters provided by playwright and especially uh junit reporter Json reporter will be used to upload or publish the results uh in the CI tools or in the CI environment especially okay so apart from all these
22:21 built-in reporters playwright is also provided other type of reporters like external third-party reporters like Lu report monocard tussault reporter folder currents and Etc Serenity Etc so we can also customize or we can also create our own custom report or third party report in playwright in the next video I will show you how we can generate Lu reporter Okay so that's all this for this video in the next video we will continue thanks for watching
