Create feature, steps & config | Playwright & Cucumber - Typescript | Part 1
HTML-код
- Опубликовано: 18 авг 2024
- Hello guys, In this video, we will explore how to use cucumber with TypeScript. Cucumber is a popular behavior-driven development (BDD) tool that allows developers and stakeholders to collaborate on defining and testing application requirements in a human-readable format. TypeScript is a powerful superset of JavaScript that adds optional static typing, making it easier to catch errors before runtime. By combining these two tools, we can create more reliable and maintainable tests.
By the end of this video, you will have a solid understanding of how to use Cucumber with TypeScript to write robust and maintainable tests for your applications. Whether you are a seasoned developer or just getting started with testing, this video will give you the knowledge and skills you need to be successful. So, grab your favorite beverage, and let's get started!
Git: github.com/ort...
Timestamp:
0:00 Introduction
0:52 Installation
3:07 Project structure
4:36 feature file
7:27 Cucumber config
8:36 npm test
9:10 Configuring steps mapping
10:48 dry run
13:09 Create step definitions
16:22 Quick recap
17:18 Configuring steps mapping
All about Cucumber - Java: • Cucumber + Selenium Java
---------------------------------------------------------------------
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
Thanks for this great video. Just a humble suggestion: In such tutorial videos, I think, the less music the better.
Sure, other videos only intro music is there.
Thanks bro it helped me alot in creating TS with playwright framework.
Glad 😊
this is what I want all the time cant wait the other parts !
Glad to know
Wow! So cool!
Thanks 👍
Thakns a lot Koushik, you so help me with your videos.
Just keep going and more successful for you.
Glad to hear that
Thanks bro for starting this series...waiting for you start it since a longer time....In the later videos of this series can you please add the CICD intergration part of this Cucumber framework also...I will be waiting for that as well???
Yeah sure
Hi Kaushik
Is there a way i can get examples table values at run time in hooks and not in step defination
Hi. No.
Thank you kaushik bhai... Was waiting for this from long... Appreciate ur efforts... Thnx a lot!!!!
Welcome bro 😀
Hi, Can we create different feature wise testcase folders under feature folder? If yes, what are the configuration changes to be done? Also other than terminal npm test , Can we run the folder level testcases from the VS code UI?
Yes features files can be segregated in folders, providing the path within the path of the config file.
From vs code ui not possible.
You installed playwright test but you never use it, how can I implement this code to use the extension test from playwright?
I use the page and expect from the playwright test.
Hello Koushik, i am not able to install the browser, it's getting 'failed to install browser' SELF_SIGNED_CERT_IN_CHAIN .
how to fix this issue.
Hey, solution is here
github.com/microsoft/playwright-java/issues/1397
Thanks for doing this. Can you also talk about debugging cucumber playwright scripts
Sure, I'll do that.
Hi bro what is your vs code extension ? for displaying these folders please tell
ruclips.net/video/1mJbq4oJpQ0/видео.htmlsi=r4McK9Srk_LEXWK1
I am using JS with playwright. I followed PageFixture file with page property undefined and importing it to loginsteps.js as "const { pageFixture } = require('../../hooks/pageFixture');
" and i get this error "TypeError: Cannot read properties of undefined (reading 'page') unable to get page functionalities.Can you help me resolve it
The import may be different in js, check how to import/export class objects.
Nice information .. tq for the video
Welcome 🙂
Thanks for this tutorial amigo!
Welcome 🤗
Hi Koushik, could you please make a video on cucumber BDD + Playwrite Python
I'm not good at python, maybe in the future.
Hello, thanks for the detailed steps. I followed the steps for Playwright JS instead of TS, but my step definitions are still not recognized. Please help to implement Playwright JS with Cucumber JS. Thanks!
Hi, that is related to the cucumber extension.
I have shown that settings in the first video.
Could you please share tutorials for selinum with c# in visual studio code
I don't know c# bro
hello Kaushik. Thank you for the information. Btw can you share how we can run it in HEADED mode in playwright with viewing trace viewer?
You mean to debug a test with a playwright inspector?
@@letcode No i mean running the playwright test in UI mode
Oh ok, that is only applicable to playwright test runner, cucumber runner do not support that.
not able to run the playwright cucumber in headless mode with your framework
Yes , an issue is there, Directly set the value it will work.
When run the test ,Im getting 1 scenario (1 skipped)
6 steps (6 skipped) . Please help me on this . I have configured correct paths to feature and steps file in cucumber.json. Any help on this is highly appreciated
I have explained skip means.
nice series, i follow every steps, but after generated the steps, and copy one to my steps.ts, and try to run "npm test"
I get an error
> ui@1.0.0 test
> cucumber-js test
Error: Cannot find module 'typescript'
what should i do?
Have you installed all the packages and tsconfig is done?
Hi sir,may i know why we are getting yellow lines in feature file?
If it's not mapped to the step definition.
Hi Koushik
For me cloud report is not at all enabled from the begining
How to make it enable?
Which version you are using?
it got resolved, I have added following in cucumber.json
"publish":true,
Great
Hi, I can't able use imports, it's saying cannot use import outside the module, and am using typescript can you please help me this
Hi is the tsconfig added
Thankyou for your reply, yeah added tsconfig file with content(target is es6 and module is commonjs)@@letcode
Hey kaushik, if we want to work with javascript with cucumber, instead of npm i ts-node -D what command should we need to give? Please reply 🙏
Npn i is enough to install all the dependencies
very informative video...
Thanks a lot
Hi Kaushik, Thank you for your videos which is making us to learn with short period of time. I have doubt related to cucumber configuration file. What is the difference between cucumber.json file and cucumber.js file? with the latest version it will support only cucumber.js file?
Both serve the same purpose, I started with json but then I changed to . Js as I want to pass tags.
Thank you sharing playwright knowledge , How we can run and add debug and trace viewer logs while running as cucumber test case ,Please suggest me how to achieve this
Welcome 🙂
I have to add videos for debug and trace
I am asking with cucumber runner can you provide link here , not able to find
@@letcode
Hi Koushik, Thank you very much for your sharing. I have a question and hope you reply. If you use the Playwright + Cucumber framework to automate for APIs, should we use Rest Assured or the Playwright test for API?
Playwright has its own api testing support.
So you can go with that, cucumber also possible.
@@letcode Can we combine writing automated UI tests using (Playwright + Cucumber) with API tests using Playwright? Hope you answer my question, plzzz 🙏
Yes we can.
Great videos! Do any of your videos go over scenario context? Currently trying to build a framework with playwright and cucumber and need to store values throughout the steps. Thanks!
Thanks, if you meant sharing data across the scenario then unfortunately that is not covered yet.
hi
i converted the stepts, copied to ts file but all time i get this:2 scenarios (2 undefined)
12 steps (12 undefined)
tried dryrun false/=true
{
"default":{
"formatOptions":{
"snippetInterface": "async-await"
},
"paths": ["tests/features/*.feature"]
},
"dryRun": true,
"require": ["tests/steps/*.ts"],
"requireModule":[
"ts-node/register"
],
"format": [
"summary",
"progress-bar"
]
}
what i the problem do u suggest something?
Seems to be path issue only, make sure all the methods have been implemented, even if there is a extra space it will give undefined.
Hello Koushik, all my cucumber steps where skipped untill I made this change dryrun:false
That is expected, dryrun means it won't execute.
Hi, can we use this with cypress and typescript?. Thank you.
I don't think so, as they cypress support JS.
hi Koushik do you know how we can use the playwright UI mode with cucumber and also run tests in a headed mode to see the tests running
Head mode is possible, UI mode is not supported in cucumber.
Which theme you are using bro, looks good
Here is my vs code setup bro.
ruclips.net/video/1mJbq4oJpQ0/видео.htmlsi=9q7911Ze4l6GQU8o
Hi Koushik, How to setup suites in playwright cucumber? and i want to run specific suite and multiple suites ? please help
Hi, complete the playlist i have covered that.
Please help me i am getting message as “Cucumber can run only on Node.js versions 18 || >=20. This Node.js version is v16.13.0
What cucumber version is compatible?
Update the node version tik 18 it should work
hello any way u can upload your settings.json file ? i am not able to link features with stepDefinition no matter what i do
All the files are in git, the link is in the description. Continue with the video, there is an workaround I have mentioned in one video.
Hi bro ,when can we expect playwright to be popular like selenium?
It is already gained so much popular, but like selenium it might take another 5 to 10 years.
Hi Koushik, Can you share multiple window handling with cucumber-playwright. Aware about the playwright listening to event popup. But how the design should be with Cucumber-Playwright
Ok, I'll update the git or make a video.
Thank you very much bro
🤗
Hi kaushik please help me, please replay me if I type await page it automatically taking pageoffset how to correct it please help am in middle of my project please reply 🙏🙏🙏🙏
I didn't understand
Please help me bro am in middle of my project
Am using playwright with javascript today suddenly what happened I don't know if I type await page, instead page it is giving autosuggestion pageXoffset
Is it possible to contact?
Please don't neglate I have lot of test case to automate
I'm getting a ""Error: Cucumber expected a CommonJS module but found an ES module" after adding the require and requireModule to cucumber.json
Install tsnode
@@letcode I have, version 10.9.2 . Do I need to use it somewhere for it to work?
Ok, you need ts config, I believe I have explained in the upcoming video.
@@letcode I've figured it out so wanted to leave the solution here in case anyone is using ESNext as their module, you need to use import and loader instead of require and requireModule, and ts-node/esm instead of ts-node/register
Cool, I'm not aware of this.
Is there any way to give a default env value inside this. I would like to setup a script npm run test env=$ENV and would like a default env to be set. Also can we set parallel to one in local and 3 in CI , as this config is coming up from json I am finding it hard to change them
Yes, as it is Json we can't do it like that.
We can convert this json file to mjs and then you can achieve that
Hi i am getting error page.waitForURL: Navigation failed because page was closed!, my page take much time some time, how to solve this issue
You can increase the timeout, i have discussed in the upcoming videos. Pls go through the playlist.
Hi i am tired to validate toaster message but i am getting timeout 12000 ms waiting for expect (received). Tovisible(). That toaster message is only available 5 sec in that page. Please help me slove this issue
Is await used properly? And is the locator is correct?
I am learning about playwright and following your tutorial. When I create a feature file then it shows these errors. Do you know how to fix it?
[Error - 5:30:39 PM] Server initialization failed.
Message: Request initialize failed with message: abort(Assertion failed: bad export type for `tree_sitter_c_sharp_external_scanner_create`: undefined). Build with -s ASSERTIONS=1 for more info.
Code: -32603
[Error - 5:30:39 PM] Cucumber Language Server client: couldn't create connection to server.
Message: Request initialize failed with message: abort(Assertion failed: bad export type for `tree_sitter_c_sharp_external_scanner_create`: undefined). Build with -s ASSERTIONS=1 for more info.
Code: -32603
Is this error from typescript code ?
@@letcode It is an error from Cucumber. I fixed it already. Thanks.
@@nguyenthiloan2029 how did you fix it? I'm facing the same
@@AlonaLos I opened the folder .vscode/extensions and deleted the related cucumber folder.
How did you fix ?
After the execution, it says skipped
Sample Console.log statememts are not printed to the console
How to fix ? Thanks
Is dry run false?
Nope it was set to true
It worked after setting to false
Thanks
How to add playwright with cucumber code into release pipeline, please share any video link
ruclips.net/video/1KPSIwbiyNQ/видео.htmlsi=_-In5EwnSfh1iKtt
Thank you very good
Welcome 😊
Bro do you have tamil vieo of this ?
No bro
Hello my friend, again thanks for this great course, there is away to use Trace Viewer in this project? Thanks a lot
Thanks, yes we can add that too, I'll update the code.
@@letcode Thanks friend, do you have a snippet code for do that?
Once I'm done with the code I'll update GitHub.
@@letcode Thanks friend, you are the best.
Hi Koushik, I am following your video to learn cucumber with TS. All steps are defined. But feature file is not mapped with Step Definition file.
Scenarios are failed when I execute the steps. settings.json file is also configured with feature path and step definition path before execute the file.
Please advise some idea where it went wrong?
Pls do the configuration properly
I have same issue. Were you able to resolve it?
I have covered this issue in the upcoming video.
@@letcode Thank you for the recordings. I've watched the Part 1 video and followed the instructions provided. However, while reviewing the Part 2 video, I couldn't locate any particular setting to emphasize the step definition. Could you please provide further guidance on this?
I have below extensions in my VS code.
alexkrechik.cucumberautocomplete
CucumberOpen.cucumber-official
formulahendry.code-runner
iteratec.bdd-power-tools
ms-vscode.vscode-typescript-next
rioj7.vscode-bdd-gotostep
ritwickdey.LiveServer
stevejpurves.cucumber
xabikos.JavaScriptSnippets
Settings.json for Cucumber extension has below settings.
"cucumber.features": [
"bdd/features/*.feature",
"relative path/Feature1.feature"
],
"cucumber.glue": [
"relative Path/*.ts"
],
I have created a brand new project with the steps mentioned in this video and Step Definition is clickable now in .feature file. I will figure out why Step Definition is not clickable in my own project. Thanks again Koushik for the great content.
Getting this after running npm test
0 scenarios
0 steps
0m00.000s
followed the same step, help me plz....
Is dry run false ?
I am getting following error message, Error: function timed out, ensure the promise resolves within 5000 milliseconds
Timeout is covered in the upcoming videos
nice one with music, really well explained, helps me at work
Thanks 😊
After changing/updating the cucumber setting json file when i mouse hover on the feature file gherkin steps it not showing up the definition and also I am not able to navigate to step definition file from feature file.
I believe you have changed the glue and also the feature file path
@@letcode HI Koushik , I have changed glue and feature file path in setting.json file but still not able to navigate to step definition file from feature file.
"cucumberautocomplete.formatConfOverride": {
} ,
"cucumber.features" : [
"src/test/features/*.feature" ,
] ,
"cucumber.glue" : [
"src/test/steps/*.js"
],
Pls restart vs code and check, make sure the file paths are set properly in the settings.json
I'm getting Cucumber Language Server client: couldn't create connection to server. Do you know how to go about it?
Hi, I'm not sure about it, i haven't faced it anytime.
There was a bug in VS Code 1.78. So downgrading to v-1.68 and setting Update: Mode to manual (instead of default) resolved this issue.
@@AlonaLos great 👍
Hi bro,
I have doubts about step definition file now calling other class properties. But that time error is appearing. Please help me to fix that issue.
How r u calling other properties.
Hi can you explain why you don't config with file playwright.config.ts
That is for the playwright test runner, here I'm using cucumber so it should be handled by a cucumber runner.
@@letcode , but we are missing real features of Playwright. Which is best playwright test runner or cucumber runner.
@@user-ds8vx7xx9u I'm not a fan of cucumber 🥒 so test runner is obviously recommended
i am receiving Cannot use import statement outside a module when adding import given
already added type module in package.json but not working
In the json file, you have to add that as mentioned in the video.
@@letcode found it. waiting for part 2!
I am getting the same error. What needs to be added where?
In the tsconfig file.
Please rewatch the video.
I'm having the same issue even with "requireModule" added. Could you advise on how to fix it?
Music is disturbing to listen your steps. But Thanks a lot for ur effort!!!
Music is there only in the intro, if u still feel bad I'm sorry.
I am getting error locator.textContent: Timeout 30000ms exceeded how can i slove this issue
double check the value of the specific locator where the error resides, i might be a typo or somrthing, hope that helps.
@@sherxdavid it's works some time, but some time failed.
Is await used properly?
If u r doing assertion then use playwright web first assertion so that auto timeout will be applicable.
I did the config changes for steps mapping given in the last section and now I can not see any steps being run - it says 0 scenarios
0 steps
0m00.000s (executing steps: 0m00.000s)
Is the feature file path are set properly?
@@letcode yes bro fixed it
😊
because you have a tag in line 3 of the cucumber.json file
I am also facing the same issue, can you help me with it bro?!
I tried all the steps as it is but the linkage is not working plus while executing it is considered as skipped. If possible please help!
Is dryrun false?
@@letcode no it was true, and after making it false it started running - skipped cases are passed.
But still linkage between feature file and step file is not working.
Any suggestions?
@@drona8813 that is extension problem, i have updated that in the latest video.
Latest video? Which one? Could you please help me with the link.
Thanks
ruclips.net/video/zYUZujrURq0/видео.html
Same framework with Allure ??
Better reporting is available
@@letcode can you say which reporting you think is better?
I already posted a video.
Pls check the playlist.
How to execute only one scenario in the feature file. I have tried using @focus...but not working. Can you help me?
Continue with the playlist, i have explained
By changing in path in cucumber.json?
ruclips.net/video/nlYf3M0z6UM/видео.html
Sir only 0 scenarios and 0 steps view how to solve that please reply me sir
Is dry run false?
Yes I write scenarios but excute o steps
stop the music its disturbing.
Other videos will have only intro music.
npm ERR! Missing script: "test"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
hi sir getting this above error please help
npm run test
@@letcode still getting the same error sir
Do you have script tag within package.json?
@@letcode hey i did not saved the .feature file and .json files.
after saving the files its working fine.
thanks for the reply
😎
Sir i need u r help sir
Replied on previous comment.
When executing getting following error:
D:\Playwright_TypeScript_Cucumber\src\test\steps\loginSteps.ts:1
import { Given } from "@cucumber/cucumber";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1288:20)
at Module._compile (node:internal/modules/cjs/loader:1340:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
at tryRequire (D:\Playwright_TypeScript_Cucumber
ode_modules\@cucumber\cucumber\lib\try_require.js:11:16)
at D:\Playwright_TypeScript_Cucumber
ode_modules\@cucumber\cucumber\lib\api\support.js:24:35
PS D:\Playwright_TypeScript_Cucumber>
when I change from
// import { Given, When, Then, setDefaultTimeout } from "@cucumber/cucumber";
To below then it started working
const { Given, When, Then } = require('@cucumber/cucumber');
for this I added "requireModule": ["ts-node/register"], under default in cucumber.json
Working now?
@@letcode yes, thank you
I am also facing above Issue if I add "requireModule": ["ts-node/register"] Then observing error as Cucumber expected a CommonJS module at 'src\test\steps\loginstep.ts' but found an ES module. Either change the file to CommonJS syntax or use the --import directive instead of --require. Please help if anyone have solution
Please reply kaoishik please
What's up?
Please help me bro
yes