- [Instructor] Cypress can either be installed
as a local dependency in your application
or globally on your system.
For this exercise, we'll be installing Cypress
on the development dependency in our application.
To follow along with this video,
make sure you're on the 05_02 branch of the project.
Cypress is available as an NPM package.
Thus, we can install it using NPM.
This might take awhile so you might want to come back
when installation is done.
Once Cypress is installed,
you can run it through its binary content
in the node modules folder.
This can be achieved by running the binary file directly
by accessing it in the .bin folder
of the node modules folder and calling its open command.
Once this command completes,
Cypress will add a Cypress folder
at the root of the application
and a pop up dialog displaying the contents
of the newly added folder.
This folder contains sample tests
that you can run to confirm that Cypress is running fine.
We would be running all of that.
Let's go ahead and write our own test.
We'll be writing a test that will test the login process
of our application.
To begin, let's go ahead and create our test file.
Go into the integrations folder of the Cypress folder
and create a new file, login.spec.js.
Cypress tests use the Mocha library for writing test cases
and charge js as the assertion library.
This will reflect in the syntax
of the test we would be writing.
Let's begin by writing the describe block for our test.
Next, let's write our test case for the login test.
Great, a good practice when writing test cases
is to write out the steps in the testing process.
For this test, we first have to load the page.
Once the page is loaded,
we want to enter the login credentials.
The next step is to click on the login button to login.
Lastly, we want to assert that we land on the profile page
once logged in.
These comments will form a guide
to make sure we cover all steps required for our test case.
Let's now begin to write the code
that will make this happen.
Before we begin, ensure that your app is running.
If your app is not running,
make sure you get this started before running your tests.
First, using the Cypress global cy object,
we can use the visit function
to load the root URL of the app.
We can actually run this test at this point.
But first, let's delete the existing sample tests
in the integration folder.
Now, save this file
and let's head back to the command line to run Cypress.
Previously, we run the Cypress command
by pointing to it inside the .bin folder
inside node modules.
In recent versions of NPM,
you can actually use the MPX tool
to directly run binarys contained
in the node modules folder.
Simply type NPX Cypress open to run the test we just wrote.
This will pop open the Cypress tool.
From the Cypress tool,
you can then run the test we just wrote
by double clicking on the test file.
This will open up an instance of the Chrome browser
and you can literally see the address you just provided
entered into the address bar and the homepage loaded.
How cool is that?
On the left-hand side, you can see your test cases
and the steps involved in the test.
Now that we have the homepage loaded
and we have confirmed that Cypress runs fine,
let's write the other steps for testing our login process.
To populate our form fields,
we use the get method on the cy objects
to target the form elements, using their CSS selectors.
In the home.vue component,
we see that the form fields now have unique classes
to directly target them,
and same for the button.
Using the get method, let's target the email field.
Then use the type method to fill in the required value.
Good, let's go ahead and do the same for the password field.
Next, we targeted the login button, but before that,
I need to add a dot here as we are using CSS selectors.
Now we target the button.
Then call the click button on it
to log into the application.
Now that we have logged in on this line,
the final step is to assert that we are now
on the profile page.
This can be done with the combination of the URL
and should methods on the Cypress object.
The should method takes in a comparison type
on what you're comparing against.
For this test, we'll be using the include comparison type
and telling it to match the forward slash profile route.
Now save the file and let's run the test once again.
This time, with Cypress running the entire login process.
Our test passed because our assertions are right.
If any of the assertions have been wrong
or Cypress cannot look at an element on the screen,
tests will fail indicating that we have a bug
in our login flow.
The beauty of this process is that once these tests
have been written,
you no longer need to manually perform the tests.
You can run them as many times as you want
and get detailed reporting from Cypress.