In this lecture, we are going to write our first end to end test.
You'll be surprised by how easy it is.
Learning a new testing tool is like learning a new programming language.
It's easier the second time around.
A lot of the concepts we've learned with Jasmine are applicable to Cypress.
The API for writing a test will be familiar to you.
This is because most testing tools adopt similar features and syntax.
Let's explore a test by writing one.
The very first test we'll write will be a sanity test.
A sanity test is a test that should always pass.
The purpose of a sanity test is to check if the tools are correctly configured.
If the test fails, we'll know that there's something wrong with our tools and not our tests.
In your editor, open the spec dot c why dot test file in the cypress slash e to e directory.
This file is an example test file the CLI plugin has generated for us.
Immediately you will notice some similarities to Jasmine in the file.
The described function is being called to create a test suite.
There are two arguments the identifier and an arrow function inside it.
The ID function is called to create a test block.
There are two arguments the description and function.
Other than that, everything else will be new to you.
Let's update the tests first.
The description will be updated to the following sanity test.
As for the describe Block's description, we'll leave it alone.
Next.
Let's empty the contents of the test block.
We're going to start fresh.
The test will right will be similar to the original test.
There are two things we'll do in the test.
First, we'll visit the home page of the application.
Secondly, we'll verify if the home page is rendering by checking if it contains some texts.
Cypress will launch a browser.
We can interact with the browser by using a set of global functions defined by Cypress.
The functions can be accessed with the C y object.
The first step was to visit the home page.
We'll call the visit function.
This function will tell the tool to visit a page we can pass in the URL to the function.
The CLI plugin has configured Cyprus to allow relatively URL's to the application.
We don't have to pass in a full URL.
We'll pass in a forward slash character.
Next, let's verify the home page was rendered by checking the logo.
Open the navigation template file.
In the template, there's an HTML comment that says apt name.
Under this comment, we have an anchor element for navigating to the home page.
Our test will select this element and check the inner text.
If the inner text gets rendered.
We can safely assume that Cypress is loading our application.
Head back to the test file below the visit.
Function run a function called see dot contains.
This function will search the current document for a selection of tests.
There are two arguments.
The first argument is a valid CSS selector.
Let's set the selector to the following hash header.
Text 3xl.
The navigation menu is wrapped with a header element assigned with an ID called header.
There are dozens of anchor elements on the document.
This selector will allow us to accurately select the logo.
We can start adding the second argument, which is the text to search for.
Let's pass and the following value clips.
Great.
Our test is ready.
Let's open Cyprus.
If you haven't already launch this program, it should always be running.
After opening Cyprus open the browser.
In the browser, a list of specification test files are listed on the page.
Let's click on our test to run it.
After a few moments, the page will load our application in a frame the test should have passed successfully.
The result is indicated by the Checkmark Icon next to the name of the test.
Interestingly, we can hover our mouse over each step in the test to view a screenshot generated by
Cyprus.
If we have our mouse over the contains function, the element selected by our query gets highlighted
on the page.
That's great.
This information gives us key insight into our tests.
There may be other logs in the test.
Typically Cyprus will inform us of HTTP requests performed by our application.
We're not interested in these requests.
You can safely ignore them.
Cyprus allows us to time travel between each point in the test.
You can click on each step to further inspect the action during the test.
This feature can help you better understand what's going on.
As you can see, Cyprus is extremely powerful.
It gives you all the information you'll need to debug a test.
If the test took a while to finish, that's completely fine.
Keep in mind the duration of the test is not an indicator of how long the app takes to load.
Cyprus is performing additional tasks during the test, such as taking screenshots and logging data.
This is one of the downsides of using E to E testing.
They take a while to run.
Even for a simple test like this.
The sanity test has passed.
We can confirm that Cyprus is properly installed.
We can begin to test our application.