Welcome back.
So in this lecture, let's get started with cucumber installation in our playwright project.
Okay, so for that, if you go to their official documentation, cucumber hyphen JS so which is maintained
for JavaScript cucumber needs.
If you scroll down, they have given nice instructions on how to install cucumber in your system.
You can see that NPM install have this command in place.
Go to your project level and then just right click paste.
So this will help you to install cucumber, right?
You can see that added one package and you can come back to your package.json any time to see if there
is an entry related to this cucumber.
Okay, Step one.
Done.
So step two, make sure you have cucumber plugin which is exposed by Visual Studio code.
So for that, go to files settings in Windows and in Mac, I think you need to go to preferences.
So for that you can simply go to extensions on the left side icon in your VS code.
And you see I have already installed one plugin called Cucumber.
Okay, so I want you to type this cucumber in this search box and you will get this window.
So here you will see install button as it's already there in my machine.
You can see uninstall, but go ahead, install it, restart your system so that you know cucumber plugin
will be attached to your VS code.
Okay.
So two simple things.
One you need to install cucumber packages.
Okay.
Cucumber js comes as one node module.
So that node module you are setting up in your project with this command and just have one plugin,
right?
So with that you are done with all the necessary setup.
What you need for your project to understand about cucumber.
Okay, so now the first step, what we can do here, scroll down and you see there is a feature written
here.
Okay.
So if you carefully observe in cucumber feature is more of like test suite.
Okay.
A test suite can contain multiple test cases, right?
It's like a folder which can hold multiple test cases.
So each scenario we treat as one test case in cucumber, that means a one feature file.
Okay.
If you want to write one file, you need to give this extension dot feature.
Okay.
One feature file can hold multiple scenarios.
That means a multiple test cases can be written in one single feature file.
So these are the keywords.
What are highlighted in red.
This is how you need to provide for cucumber to understand.
Now scenario.
This is the test case name and these are your steps given when then that's how you define your express
your test case In plain English gherkin language we call it as a gherkin.
When you write in form of cucumber style like this.
Okay, now our duty here is to create another layer of interface, right?
So again, I'm stressing that code will not change.
We are going to use the same code, but instead of writing these these looks, technical terms, right?
So instead we are writing another layer to write it in plain English and we are plugging back to same
code here.
Okay, we are not going to write any new code.
So for that first to write a feature file, what cucumber suggest us is in your project path.
Okay, this is your project path.
So in project level you need to create one folder called features right click new folder features.
When you have like this, cucumber recognizes it because cucumber by default checks for this folder
in your project path.
So inside this you can write all the code what you need for cucumber to identify.
Okay, so right click again new file and let's write as an e commerce test.
We have right dot feature.
Make sure you give dot feature extension.
Until last section we used to give dot JS extension because we are all dealing with JavaScript files,
but now we are writing a cucumber feature.
Another layer.
So that's the reason dot feature is the extension you need to give, right?
So first of all, simply copy this sample what they have given from here we can expand.
Okay, so this is a test suite stands for and the description, you can tell that.
All e-commerce validations we are doing here as part of this test suite.
Now, that particular test case, what you are doing, you can write a description.
So here we are placing the order.
Right.
Placing the order.
Perfect.
So as I said, cucumber needs to be expressed in these three terms.
Given when and then.
Okay.
See, as these are cucumber reserved keywords they are highlighting in the blue color.
Okay.
Feature scenario all these.
Right.
So first of all, in this lecture, let's try to express what our test case is, how we want to write
it so we know that when we want to handle this end to end test, by now we are very familiar that we
are logging in first.
We are searching for product, right?
And we are adding it to the cart and making sure that item is displayed in the cart.
And we are placing the order by giving the valid details.
Right.
And finally, we are verifying if order is present in the order history page.
So that's what we are doing.
So first of all, let's mention that in the feature file like this, given a login to e-commerce application,
okay, with some username and password.
So observe deeply here.
I am putting in double quotes here.
That means whatever username you write here, this username will be sent to your actual code.
Now in your actual code, if you want to write username, how are you doing it?
Get login page valid login right here where you are sending username from the JSON file, but from cucumber
you can data drive directly from feature file.
So that means if I provide it here from here it will actually go and plug in this way.
Okay, how to connect all that we will see in the upcoming lectures.
Right?
That's how you log into e-commerce application.
Step one In this line we are going to plug in the code of logging information of all these four lines.
Okay.
So after that, what we are doing, once we log in, we are adding an item to the cart.
So we know that item code three, right?
When you add that item to cart, you can write any English guys.
I mean, only thing, what you need to do is whatever you sentence you write, make sure you create
a respective step definition.
Exactly.
Matches that.
That's all.
So when you add it to the cart, then what happens?
Then just verify that this product code three is displayed in the cart page, right?
Because you added in the cart and our test case is also validating if that is displayed in the cart
page successfully done.
And next again you are entering something right to place the order you need to enter country name and
all that.
So when enter valid details and place the order simple, you enter whatever details you need and just
place the order.
And after you place the order, this is when when you do this action.
Okay, then what are you doing?
Then you are verifying that order from the order History page.
Remember, verify order is present in the order history.
So if you go back to your actual test case, what you have written, you are doing the same thing.
So you are checking out, You are validating, I mean entering all the details and submitting the order.
Once the order is placed, you are going to history page and verifying if that order is present.
So whatever we are doing technically, I mentioned in the plain English language using cucumber terminologies
of given when then?
Okay.
So in one scenario you can write multiple givens, multiple wins and multiple.
Then it's up to you.
Even you can put then here doesn't matter.
But overall, when somebody is reading, they should be able to grab and make the sense of what you
have written.
Okay.
When action is performed, then verify.
That's how you need to write.
When you are adding something, then you are verifying that is added in the cart.
Given what do you have right now to do all this?
I just have a login information with this username and password.
Okay.
Now you can give the actual user name which you want to login.
Don't worry.
In upcoming lectures I will show you how to parameterize these nicely instead of writing.
Here in this line, there are a lot of good things we will see in this section.
Okay, so this is our feature file.
It's all good.
Okay.
Next step is to create.
It a corresponding step definition file like this.
That means exactly with the tag, what you have used and the description.
And in the second argument you need to write actual code.
Okay, so one good thing here is you really need not write everything manually.
Cucumber.
Cucumber has something where it can auto generate all these step definition outer skeleton.
Okay.
Inside code you have to write.
But outer skeleton is something we can regenerate by default.
We'll see that in our next lecture.
Thank you.