HTML Report with charts | Playwright & Cucumber - Typescript | Part 5

[@Iamwithyou1243]

That look 11:20 for that whistle sound 😂... Bro u r doing an amazing job 💯 Ps: but don't get mad whoever that is, LOL.

[@letcode]

I can't that's my mom 😁. Thanks 👍

[@kumarrajesh-lu3nw]

Thank you so much for your videos. Really helped me lot when I stuck so many places while implementing complete new framework.

[@letcode]

Welcome and awesome 👍

[@deepthiudayan9098]

Thankyou so much for this BDD- playwright videos

[@letcode]

Welcome :)

[@lungelozondo7804]

Thank youso much, when using a Mac what do you put as platform name on the report.ts file?

[@letcode]

It's a string so mac is fine I guess or Darwin.

[@ashirbadprusty9327]

Hi @koushik The donot chart in the report is going veribig and its covering the entire page

[@letcode]

Must be a css issue. You have to report on their GitHub.

[@ashirbadprusty9327]

@@letcode thanks can I use previous version of multiple-cucumber-html-reporter?

[@letcode]

Give it a try

[@ashirbadprusty9327]

@@letcode tried same isue. something I am doing wrong?

[@shilpatiwari1939]

Hi kaushik, your videos are really very helpful. I tried for attach video in the report i am getting error in cucumber.html report like base 64 is not there and in index.html video showing attached but not playing it

[@letcode]

Is the video available on your local folder?

[@shilpatiwari1939]

@@letcode. I solve that actually I missed fs now its working fine. Thankyou

[@letcode]

Glad you figured it out.

[@jyothsnat5579]

Hi Koushik, Can we generate extent report also. If so pls do one video for extent report

[@letcode]

I don't think the extent report is available for Js/TS.

[@AnjaliAnilKumar-q6b]

Can you add allure report in this framework also. Thank you

[@letcode]

Ok

[@harshtyagi5744]

How to change report name to dynamic name and how to add real time start time and end time to a scenario or feature in the report, please suggest.

[@letcode]

Please check the official docs for more information. I'm not sure as I don't use it in my current project.

[@renukrishnadevotee]

Hi, Is there any way we can implement allure reports with bdd and playwright?

[@letcode]

Maybe, I'm not sure. But this report is better than allure.

[@renukrishnadevotee]

@@letcode i have a requirement of allure only

[@Cecilia_Vlogs]

Hi koushik , can we generate a standalone report which can be shared across

[@letcode]

If it has attachment then you have to share the data folder also.

[@Cecilia_Vlogs]

@@letcode Thanks for the response. Apart from attachment....is it possible to generate standalone .html format ...where if I send .html report the other person should be able to view it

[@letcode]

Yes it should be, are you facing any issue?

[@Cecilia_Vlogs]

yeah ....when I am sharing the single index.html report alone.....it's showing no records.....but If I am sharing the complete report folder along with json....html report is proper....

[@PriyankaRP-lv4on]

Hi Koushik, Can we save the older report ins ame folder nad delete it after 1 week? If yes can you please share the code ? or make any video on it?

[@letcode]

Probably yes, but I have to check

[@PriyankaRP-lv4on]

@@letcode Thank you for the reply. I am trying to search the solution , but not getting it. Can you please make video on it? and share code with us?

[@joostdejong2507]

Thanks for the nice video. I still have one issue. I followed the exact steps (filled the package.json under scripts "test": "cross-env ENV=prod cucumber-js test || true"), but when I execute npm test from a Windows machine with a failing test, I get the error message '''true' is not recognized as an internal or external command, operable program or batch file'. So the posttest is not executed, no report folder is created. Any idea how to fix this?

[@letcode]

Hi, this command won't work with windows default terminal, you have to use gitbash as terminal.

[@amangupta-pp7zn]

You can use this instead "scripts": { "test": "cucumber-js test", "posttest": "npx ts-node src/test/helpers/report.ts", "test:withpost": "npm test || npm run posttest" }, and then run npm run test:withpost

[@lucbsilva]

Now it works with this "test": "cucumber-js test || (exit 0)",

[@rossbennett8908]

@@lucbsilva Thank you for the update, fixed my problem.

[@jorgefranco2313]

@@lucbsilva Grande, muchas gracias por la solución... ya me genera el reporte cuando hay escenarios fallidos.

[@pranitdhole5978]

Hi, will you please make video on cicd for cucumber playwright

[@letcode]

Yes, I'll try my best.

[@PaidipatiHarikumar]

Thanks for the Videos but I am observing the special characters in HTML and JSON reports whenever we compared expected result to String. Kindly help me on this.

[@letcode]

I didn't understand

[@MrPriyank23]

HI Hari did you got any solution for this issue.

[@letcode]

That is related to the reporter issue. You have to create a bug in their git, they can provide a solution.

[@divya-hz2wi]

How to run the test cases in responsive view ,can you provide the details for this

[@divya-hz2wi]

The main reason for us to implement the playwright is to make our test cases work in responsive views ,but I am stuck on how to invoke them , please tell me the solution for this

[@letcode]

I will upload a video on this soon.

[@sivamaamalesh8635]

Is it possible to group the failures based on where it failed. If yes how , can you please explain?

[@letcode]

It gives on the failure, no grouping.

[@SajitaD-p7z]

Can you let me know if we have different generated allure reports then if we want to view different Allure reports in a single allure dashboard is it possible?like how can configure multiple allure reports in a single allure dashboard? how can we see multiple allure project in dashboard

[@letcode]

Not sure

[@jyothsnat5579]

Hi Koushik, For scenario outline screenshots are not attaching, only for Scenario it is attaching. Please help how to attach screenshots for scenario Outline too

[@letcode]

It should be the same bro, I have explained

[@riyazcommits7030]

@jyothsnat5579 click on examples in the report brother it will open a scenario related to that example. there you can see report of that example you chose. thanks

[@AkashSingh-pd1rv]

Hi @Koushik, Thanks for providing these videos. This is really helpful. Could you please explain how we can handle the cucumber multiple report, where we can can get browser name, OS, etc dynamically, Also I am not able to execute scripts parallelly in 2 browsers. Could you please help me in this

[@letcode]

I have covered the parallel execution in a separate video. You can use the os module nodejs.org/api/os.html

[@prashantthube]

Thanks kaushik , for this video

[@letcode]

Welcome

[@shruthikm7359]

Hey Koushik, thank you for your videos, very helpful. I am observing that with Cucumber & Playwright has slow start? How can I fix this?

[@letcode]

Hi, a slowness of 5 or lesser seconds is expected. Is it slower than that?

[@RahulReddy-pt2zx]

Hi koushik when I am trying with the failed test cases cucumber report was generated fine but Multiple cucumber html file was (index) was not generated when im trying failed test cases

[@letcode]

Did you mean it's not giving a single index html file?

[@RahulReddy-pt2zx]

Yes it's not giving when the test case are failed , I'm giving everything correct only if the scenarios was passed it will generate a index.html file

[@tibivanko4253]

Try this script: "test": "cross-env ENV=test cucumber-js test || exit 0",

[@jobi]

For me I followed the instructions in the video, but when I run npm test, I always get this warning "WARNING: No JSON files found in 'test-results'. NO REPORT CAN BE CREATED!" and when I open the index.html report, it is not populated with data. I have the test-results folder with both JSON & HTML cucumber report. Not sure what I am missing.

[@letcode]

9:00 i hope you followed all the steps properly.

[@thusharzacharia1982]

Hi Koushik, I have been following your tutorial and its done very well. Specially well crafted for beginners and others. I have been working on play wright with JS code and i was trying to use the multi cucumber report. For some reason on execution, the Index.html file is not getting generated. Could you guide me.

[@letcode]

Sure, check once if u had followed all the steps .

[@ChandraSekhar-zv2bb]

Hi koushik, i have different problem is there any solution for this i was able to run and generate cucumber jvm html and cucumber json report. I need to extract few details from either json or html like test data passed and output Example : if i am submitting an application for 50 to 70 users i want name of the customer and application number after scenario run .

[@letcode]

I'm sure it's possible, but I'll look into it and confirm you.

[@shilpatiwari1939]

I added true in command but after execution getting message like "true ' is not recognized as an internal or external command. How we can solve this

[@letcode]

I hope you are using gitBash as command prompt else you have to find the equivalent command, pls refer the other comments I guess already I have added details about it.

[@shilpatiwari1939]

@@letcode i added exit 0 instead true now its working fine.

[@praveen9202]

Bro once i do the same after running scripts I am getting index html along with one more html with some random suffix if i delete that I could not able to access the link of scenario in index. Html report

[@letcode]

Yes, that is expected only. Don't delete any files or folders.

[@narayanaswamy2519]

Hi Koushik..! It is good to see your video, can you post pdf validation with playwright...?

[@letcode]

Sure, I'll try

[@kidvikvlogs]

Getting true is not recognised as an internal or external command in package.json .when scenario getting failed .kindly help

[@letcode]

Your terminal should be git bash

[@kidvikvlogs]

@@letcode how to change that

[@letcode]

Install git bash and use as your terminal within vs code.

[@andrewpoganovsky4937]

Or another way, replace "true" with "exit 0", the line will look like this: "cucumber-js test || exit 0"

[@lilu4480]

@@andrewpoganovsky4937 Thanks for your answer!

[@shilpatiwari1939]

How we can add request and reponse of api in the same report

[@letcode]

Writeline function is used in hooks to write in the report, but that is accessible from hooks only. I have to check how to do it from the step definition.

[@shilpatiwari1939]

@@letcode hi kausik, i tried to configure playwright.cobfig.ts file in same framework but it did not worked. What Playwright ui is launching but there were no test

[@letcode]

Cucumber and playwright runner are different, so this config will not work for that.

[@shilpatiwari1939]

@@letcode I can add another after in hooks . And just like we are fetching pickle and result same way we can fetch request and response as well and we can attach it in report just like screenshot and video.

[@miguelmorgado3705]

Hello Koushik. First of all, thank you very much for your amazing tutorials. My index file is not created and I have this error: Error: Cannot find module 'node:path' can you help please? thank you in advance.

[@letcode]

Welcome. You have to use the path package, import it and it should work.

[@deepaksrivastava-25]

@@letcode How and where to import path and please let me know where to use it?

[@pranitdhole5978]

Will you please provide solution for - How to handle multiple tabs in this framework? I tried in script - const allpages=context.pages(); const newpage=allpages[1] but it is giving me error context is not defined, actually we have defined context in hooks. Then how to handle this, please reply as soon as possible, is there any other way I can connect with you and share my problem screenshots? I'm stuck in my office project.

[@letcode]

You can ask in the discord. Link is available in the description.

[@pranitdhole5978]

I asked on discord under #playwright, please reply.

[@sivaramakrishnareddyrajula9605]

"progress-bar" is not showing output console correctly. Lines are breaking. Are there any changes we need to do except add it in cucumber.json

[@letcode]

It should work, what is the version u r using?

[@sivaramakrishnareddyrajula9605]

@@letcode "devDependencies": { "@cucumber/cucumber": "^10.0.0", "@playwright/test": "^1.39.0", "@types/node": "^20.8.5", "multiple-cucumber-html-reporter": "^3.5.0", "ts-node": "^10.9.1" }

[@WasiqBhamla]

Very good explanation 👍

[@letcode]

Thank you 👍

[@nandaraja5804]

Hi Koushik, is there any way to run a particular feature or scenario? If I run a particular scenario using the command npx cucumber-js --name " " , report only showing skipped scenario. Any idea how to solve this?

[@letcode]

If the execution is successful, it should show the result.

[@nandaraja5804]

No, new report is not generating when I use the command npx cucumber-js

[@letcode]

@@nandaraja5804 continue with the playlist, i have covered those

[@nandaraja5804]

By the way thanks for taking time to clear all our doubts👍🏼😁

[@SamSC09]

Hello Koushik, Is there any way to get this type of chart report without using Cucumber, I have already implemented Html and Allure report with help of your videos.

[@letcode]

It is specific to the report. With a custom report we can implement but that will be challenging

[@moriyamegidish6345]

Thanks you so much !!! I want to customise the report , to add the total run time for all the features and individual run time also can we add customised status like warning

[@letcode]

Welcome. I don't think that option is available in the report.

[@moriyamegidish6345]

@@letcode Thanks :)

[@Jose_Arilson]

No caso de uma API, como eu posso mostrar no relatório qual o response ou request foi usado em uma step, eu gostaria de colocar no meu relatório. In the case of an API, how can I show in the report which response or request was used in a step, I would like to put in my report.

[@letcode]

I'm not sure, I have to check.

[@Jose_Arilson]

@@letcode I ate it now I was unsuccessful

[@KrzysztofBulenger]

why when some steps are failed results not save in index.html, when all tests pass is ok

[@letcode]

You might have missed await in some steps.

[@KrzysztofBulenger]

|| exit 0 helped

[@lilu4480]

@@KrzysztofBulenger It's right!

[@y.dmamatha9674]

Hi , Thanks for the video and is there any way to change the name of the file from index.html to our own file name ?

[@letcode]

I don't remember, but it's possible i guess.

[@AlMutasimHasanMuhi-p3w]

hello brother, I am getting this error. How can I fix this? TIA

[@letcode]

What error?

[@shashidharamarannavar]

I am unable to get the report even i mentioned format in cucumber.json

[@letcode]

Is the test ran?

[@tunghuynh8504]

Thank you so much, hope to see more tutorial like this

[@letcode]

More to come!

[@nandaraja5804]

Hi Koushik, you've made things easier for us👍🏼 Is there any way to add time duration for features and scenarios?

[@letcode]

Thank you :), I guess execution time is visible on report.

[@sumitgoyal385]

Thank you fir this means a lot : One ques : In report in failure we get : Error: [31mTimed out 10000ms waiting for [39m [2mexpect( [22m [31mlocator [39m [2m). [22mtoBeVisible [2m() [22m some unreadable character in case of java cucumber : I put monochrome true and it used to fix here I put monochrome : true as below but not worked ,can you tell me where to put this part ? I also put true in double quote same issue { "default": { "formatOptions":{ "snippetInterface": "async-await", "monochrome":true },

[@letcode]

Monochrome is changed in this version, I have covered it in the later videos.

[@sumitgoyal385]

@@letcode wow thanks

[@venkatesenkizhapandal2243]

Amazing reports

[@letcode]

Yes it is ❤️

[@MrPriyank23]

Hi Koushik, this is the great videos. But I am having issue in my HTML report whenever there is error like "expecting 'this' but actual is 'something' kind of error" it is not coming in proper way can you please help me on that.

[@letcode]

Thanks. Proper way means it is showing wrong info or assertion is missing?

[@ektapatel2246]

It is coming with some special characters.. like it is having some square images with it.. if you can try from your side with this kind of assertion then you will get to know.. can you please help with this issue as I have demo at my job by next week..this will be very helpful

[@letcode]

I don't know how to reproduce, kindly send screenshots on our discord server.

[@ektapatel2246]

Can you please share with me information about discord like how I can connect with you as I don’t know about it

[@letcode]

discord.gg/ZJbzwBEV

[@keplervelasco1854]

Great Report! thanks

[@letcode]

Cool 😎

[@Arshadarsh]

Will this work in selenium as well?

[@letcode]

Yes

[@Arshadarsh]

@@letcode okay thank you i will try to implement

[@letcode]

Sorry, not for Java.

[@letcode]

You can refer to this kzbin.info/www/bejne/hmWWk2qLpr2eY9k

[@theillo4739]

You are boss mate ! :)

[@letcode]

Thanks 😎

[@vikrantchaudhari7017]

Nice video Koushik! Good job! I have a question here. In the report.ts, how can you pass the browser name, browser version, os name, os version etc details from command line? As of now, you are hard coding it. Also, how can we pass the customData values from command line?

[@letcode]

Hi, to pass data from cli I have covered that in the other video, kindly go through the playlist. We can do the same for reporters as well.

[@s.niraimathimathi7576]

Hi Koushik, Thanks for making this videos.it's very helpful.😊 To get the multiple cucumber report using javascript what command we have to keep in post test. npx js-node is not working

[@letcode]

u can use - node filename.js

[@s.niraimathimathi7576]

It worked.Thanks a lot Koushik😊

[@KarunyaGowda-w4d]

"posttest": "npx ts-node src/helper/report.ts" is not getting executed. index.html report file is not getting generated and also progress bar is not visible, Please help.

[@letcode]

Y , any error message?

[@KarunyaGowda-w4d]

@@letcode no error message

[@letcode]

Is script failed?

[@KarunyaGowda-w4d]

@@letcode no, it is passed.

[@KarunyaGowda-w4d]

"scripts": { "test": "cucumber-js test", "posttest": "npx ts-node src/helper/report.ts" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@cucumber/cucumber": "^9.0.1", "@playwright/test": "^1.31.2", "@types/jquery": "^3.5.16", "multiple-cucumber-html-reporter": "^3.3.0", "ts-node": "^10.9.1" } posttest is not getting invoked

[@bfrkovich]

Hi, when the test is failed, don't run the script "npx ts-node src/helper/report.ts"

[@letcode]

If the test fail the next posttest doesn't execute that's y we have || true. But it will work with git terminal.

[@venkateshtumpuru4]

@@letcode Didn't get you, How to overcome that?

[@cristhiamguerrero1700]

I am following the steps, but for some reason, the process never gets concluded, steps Passed, but I must need to press ctrl + C to conclude the process, no index Html file by the moment. no Error, what did I do wrong?

[@cristhiamguerrero1700]

I could fix it.

[@letcode]

Great, what was the issue?

[@cristhiamguerrero1700]

@@letcode a line duplicated in the hook file

[@letcode]

@ramkumars9378 r u using git bash?

[@miguelmorgado3705]

Hi any news on how to fix the need to ctrl + c after the process conclusion?@ramkumars9378 @letcode

[@educesportshubmusic8503]

How to add tike stamp... Each scenario time... Execution time?

[@letcode]

I guess that is shown by default.

[@roharizwan4111]

i used || true in the script to generate the report when the test fails but i am getting below error: scenarios (1 failed, 1 passed) 3 steps (1 failed, 2 passed) 0m05.823s (executing steps: 0m04.891s) 'true' is not recognized as an internal or external command,operable program or batch file. I added exit 0 but still report is not generating

[@letcode]

What terminal r u using?

[@roharizwan4111]

@@letcode i installed gitbash and tried to run the command npm test i am getting missing script error. in the windows terminal it is running.

[@roharizwan4111]

i closed the vscode and opened it again . and ran the command and it is working .

[@letcode]

Pls share screenshot in discord, link should on the description or channel page.

[@letcode]

Great

[@gautammanda086]

How to generate allure report

[@letcode]

I haven't used allure with bdd playwright, I'll check

[@AnjaliAnilKumar-q6b]

​@@letcode please share the video fast . It would help us a lot. Thank you

[@bfrkovich]

the sentence "cucumber-js test || true " does not recognize me

[@letcode]

Use git bash as terminal

[@andrewpoganovsky4937]

Or another way, replace "true" with "exit 0", the line will look like this: "cucumber-js test || exit 0"

[@csatheeshkumar4205]

Awesome.

[@letcode]

Thanks 😊

[@Ashokkumar-uv4fs]

Hi Koushik, i am getting this error ( page.goto: net::ERR_NAME_NOT_RESOLVED at ) while running in pipeline, how to resolve this

[@letcode]

Hi, Is the url is https?

[@Ashokkumar-uv4fs]

@@letcode if i use http also i am getting this error.

[@Ashokkumar-uv4fs]

Getting time out error while running in playwright.

[@letcode]

Not sure about it.

[@shilpatiwari1939]

Hi Kaushik , thankyou for your videos. I need your help. I want to print proper data in console. I am not able to share screeshot here could you please share your email. I am trying to do coding for this but its not working.

[@letcode]

You can share in the discord, link is in the description and channel page.