HTML Report with charts | Playwright & Cucumber - Typescript | Part 5
HTML-код
- Опубликовано: 8 сен 2024
- Hello, in this video, we'll learn how to generate an HTML report with Cucumber and Playwright.
Reference: github.com/Was...
Code: github.com/ort...
---------------------------------------------------------------------
Tamil RUclips Channel:
@kurimurai
---------------------------------------------------------------------
🎁Just in case you want to support me ☺️ donation might be helpful.
BuyMeCoffe: www.buymeacoff...
GPay: koushik350-1@okaxis
-------------------------Thank you--------------------------
Thanks for watching, if you like the video, give it a thumbs up 👆.
Sharing is caring, kindly share the video with your friends and colleagues.
Don't forget to subscribe and hit the bell 🔔 notification.
-------------------------------SOCIAL-------------------------------
📝Test Practice Site: letcode.in/
🐦Discord: / discord
📸Instagram: / letcode.in
🎓 LinkedIn: / ortoni
⛳️ XPath Extension: bit.ly/2T5EUCu
Join our WhatsApp group (Only for Channel Members)
bit.ly/3cSPCpm
Zerodha referral link: zerodha.com/?c...
#letcode #playwright #cucumber
Thank you so much for your videos. Really helped me lot when I stuck so many places while implementing complete new framework.
Welcome and awesome 👍
Thankyou so much for this BDD- playwright videos
Welcome :)
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.
I can't that's my mom 😁.
Thanks 👍
Thanks kaushik , for this video
Welcome
Very good explanation 👍
Thank you 👍
Amazing reports
Yes it is ❤️
Thank you so much, hope to see more tutorial like this
More to come!
Great Report! thanks
Cool 😎
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?
Hi, this command won't work with windows default terminal, you have to use gitbash as terminal.
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
Now it works with this "test": "cucumber-js test || (exit 0)",
@@lucbsilva Thank you for the update, fixed my problem.
@@lucbsilva Grande, muchas gracias por la solución... ya me genera el reporte cuando hay escenarios fallidos.
Awesome.
Thanks 😊
Hi Koushik, Can we generate extent report also. If so pls do one video for extent report
I don't think the extent report is available for Js/TS.
Hi Koushik, you've made things easier for us👍🏼
Is there any way to add time duration for features and scenarios?
Thank you :), I guess execution time is visible on report.
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.
9:00 i hope you followed all the steps properly.
Hi Koushik..! It is good to see your video, can you post pdf validation with playwright...?
Sure, I'll try
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?
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.
Thank you very much for the video.... Can you please make a video on HOW TO READ AND WRITE AND UPDATE INTO CSV files in Playwright using typescript?
sure
@@letcode Thank you very much
Hey Koushik, thank you for your videos, very helpful.
I am observing that with Cucumber & Playwright has slow start? How can I fix this?
Hi, a slowness of 5 or lesser seconds is expected. Is it slower than that?
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.
Please check the official docs for more information.
I'm not sure as I don't use it in my current project.
You are boss mate ! :)
Thanks 😎
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.
Sure, check once if u had followed all the steps .
Is it possible to group the failures based on where it failed. If yes how , can you please explain?
It gives on the failure, no grouping.
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
Is the video available on your local folder?
@@letcode. I solve that actually I missed fs now its working fine. Thankyou
Glad you figured it out.
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
It should be the same bro, I have explained
@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
Hi, will you please make video on cicd for cucumber playwright
Yes, I'll try my best.
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
Not sure
Hi @koushik
The donot chart in the report is going veribig and its covering the entire page
Must be a css issue.
You have to report on their GitHub.
@@letcode thanks
can I use previous version of multiple-cucumber-html-reporter?
Give it a try
@@letcode tried same isue.
something I am doing wrong?
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 .
I'm sure it's possible, but I'll look into it and confirm you.
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.
Welcome.
You have to use the path package, import it and it should work.
@@letcode How and where to import path and please let me know where to use it?
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.
It is specific to the report.
With a custom report we can implement but that will be challenging
"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
It should work, what is the version u r using?
@@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"
}
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
u can use - node filename.js
It worked.Thanks a lot Koushik😊
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.
I didn't understand
HI Hari did you got any solution for this issue.
That is related to the reporter issue.
You have to create a bug in their git, they can provide a solution.
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
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.
@@letcode i added exit 0 instead true now its working fine.
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
Did you mean it's not giving a single index html file?
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
Try this script: "test": "cross-env ENV=test cucumber-js test || exit 0",
Hi, Is there any way we can implement allure reports with bdd and playwright?
Maybe, I'm not sure.
But this report is better than allure.
@@letcode i have a requirement of allure only
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
Yes, that is expected only.
Don't delete any files or folders.
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.
You can ask in the discord.
Link is available in the description.
I asked on discord under #playwright, please reply.
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 ?
I don't remember, but it's possible i guess.
Hi koushik , can we generate a standalone report which can be shared across
If it has attachment then you have to share the data folder also.
@@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
Yes it should be, are you facing any issue?
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....
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?
If the execution is successful, it should show the result.
No, new report is not generating when I use the command npx cucumber-js
@@nandaraja5804 continue with the playlist, i have covered those
By the way thanks for taking time to clear all our doubts👍🏼😁
How to run the test cases in responsive view ,can you provide the details for this
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
I will upload a video on this soon.
I am unable to get the report even i mentioned format in cucumber.json
Is the test ran?
hello brother,
I am getting this error. How can I fix this? TIA
What error?
why when some steps are failed results not save in index.html, when all tests pass is ok
You might have missed await in some steps.
|| exit 0 helped
@@user-to4ny7yf5d It's right!
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.
I'm not sure, I have to check.
@@letcode I ate it now I was unsuccessful
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
},
Monochrome is changed in this version, I have covered it in the later videos.
@@letcode wow thanks
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
Welcome.
I don't think that option is available in the report.
@@letcode Thanks :)
How we can add request and reponse of api in the same report
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.
@@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
Cucumber and playwright runner are different, so this config will not work for that.
@@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.
Getting true is not recognised as an internal or external command in package.json .when scenario getting failed .kindly help
Your terminal should be git bash
@@letcode how to change that
Install git bash and use as your terminal within vs code.
Or another way, replace "true" with "exit 0", the line will look like this: "cucumber-js test || exit 0"
@@andrewpoganovsky4937 Thanks for your answer!
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.
Thanks.
Proper way means it is showing wrong info or assertion is missing?
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
I don't know how to reproduce, kindly send screenshots on our discord server.
Can you please share with me information about discord like how I can connect with you as I don’t know about it
discord.gg/ZJbzwBEV
How to generate allure report
I haven't used allure with bdd playwright, I'll check
Hi, when the test is failed, don't run the script "npx ts-node src/helper/report.ts"
If the test fail the next posttest doesn't execute that's y we have || true.
But it will work with git terminal.
@@letcode Didn't get you, How to overcome that?
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?
I could fix it.
Great, what was the issue?
@@letcode a line duplicated in the hook file
@ramkumars9378 r u using git bash?
Hi any news on how to fix the need to ctrl + c after the process conclusion?@ramkumars9378 @letcode
How to add tike stamp... Each scenario time... Execution time?
I guess that is shown by default.
"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.
Y , any error message?
@@letcode no error message
Is script failed?
@@letcode no, it is passed.
"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
the sentence "cucumber-js test || true " does not recognize me
Use git bash as terminal
Or another way, replace "true" with "exit 0", the line will look like this: "cucumber-js test || exit 0"
Will this work in selenium as well?
Yes
@@letcode okay thank you i will try to implement
Sorry, not for Java.
You can refer to this
ruclips.net/video/P43b7UqXk-w/видео.html
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
What terminal r u using?
@@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.
i closed the vscode and opened it again . and ran the command and it is working .
Pls share screenshot in discord, link should on the description or channel page.
Great
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.
You can share in the discord, link is in the description and channel page.
Hi Koushik, i am getting this error ( page.goto: net::ERR_NAME_NOT_RESOLVED at ) while running in pipeline, how to resolve this
Hi, Is the url is https?
@@letcode if i use http also i am getting this error.
Getting time out error while running in playwright.
Not sure about it.