Learn how to set up an end-to-end testing framework Cypress Automation Testing Tutorial in an angular app. Also, visit the Github code to set up the project.

1. Cypress
Automation
Testing
Tutorial
(Part 1)
www.bacancytechnology.com

2. Introduction

3. We build a good website using different
technologies such as React, Angular, and
other modern technologies. In terms of
testing, the client wants to do either Unit or
End-to-end testing. So in this blog: Cypress
Automation Testing Tutorial, you will learn
how to set up an end-to-end testing
framework called CYPRESS in an angular
application and some basic test cases.

4. What is
Cypress?

5. Cypress is an end-to-end automation
testing framework for website testing. If
your project needs to do automation
testing, you can start with cypress. The use
of JavaScript makes Cypress automation
especially attractive to developers.

6. Tutorial Goal:
Angular
Cypress
Automation
Testing

7. Before developing an application, let’s see
what we will build. Watch the below video
to understand what our demo app looks
like.

8. Does it take a hard time for
you to trust when
beginning with your web
app development?
Angular gives you the authentication to feel
secure. Hire Angular Developer to resolve
all your trust issues

9. Cypress
Automation
Testing
Tutorial:
Steps to
Implement

10. Install cypress
First, we need to add cypress in our
application, so use the below command to
add cypress in our master branch.
ng add @cypress/schematic
The above command will set up the basic
required configuration with some files and
create one sepc.ts file as a sample cypress
testing file.

11. npm run cypress:open
The above command will help open a
chrome browser to check the cypress test
cases like the below screen.

12. Click on the spec.ts file, and it will run the
cypress test cases for that file.
npm run cypress:run
It will run in a terminal and share the spec
success and failure report.

14. We will now see how to write the actual
cypress test cases using cypress and their
methods. So I hope now you are good with
the setup of this project along with the
cypress, and let’s make our hands dirty on
the cypress.
There are various methods in cypress by
which we can visit a particular URL of our
application. We can pick the element, such
as how we pick the HTML element using a
document.getElementById methods and
check the assertions on that.
This is similar to Unit testing in terms of
writing the spec like we need to write
descriptions, and inside that, we need to
write the spec using its method as displayed
below.

15. describe('My First Test', () =>{
it('Visits the initial project page', () =>{
cy.visit('/')
cy.contains ('Welcome')
cy.contains ('sandbox app is running!')
})
})
But here, one important thing is you don’t
need to import anything such as service or
any dependency, which we generally do in
the unit testing.
For the unit testing in Angular, you can visit
the previous blog, which can be very helpful
for you. Unit testing in Angular using
Jasmine and Karma (Part 1) and Unit testing
in Angular using Jasmine and Karma (Part 2)

16. First Test Case: Should Visit
the Login Page
// specs.ts
describe( 'My First Test', () =>{
it('Should visit the login page', ()={
cy.visit('/login');
cy.url().should('includes', 'login')
cy.get('#loginFormTitle').should
('be.visible');
cy.get('#loginFormTitle').should
('have.text', 'Login Form');
})
})
If we modify our existing test case mentioned in
the above image and click on spec.ts as taught
earlier in the blog, it will give output like the
below image with success test cases.

17. Explanation
What is the meaning of what we have
written in the test cases?
cy.visit(‘/login’);
➡It will visit/redirect to the given URL. For
example, cy.visit(‘/registration’); will visit
automatically to the registration page.

18. cy.url().should(‘includes’, ‘login’)
➡It will check whether the page where it
should redirect that URL includes the login
as a keyword or not. For example, if we will
use cy.url().should(‘includes’, ‘login1’);
instead of what was mentioned, then it will
give an error like the below image.
And then it will stop the execution of that
spec.

19. cy.get(‘#loginFormTitle’).should(‘be.visible’);
Using cy.get() method we can get the
element the way we access it using
“document.getelementbyid(#id)” in JS.
We can access a particular element using
class, id. A better practice is to get the
element using id only.
I that element will be in the DOM, then it
will be visible, and we can check cypress
assertions on it using the should() method
like .should(‘be.visible’); if it does not exist
in the dom then we can use
.should(‘not.exist’); For example, How
adding not.exit for the below image.

20. // specs.ts
describe('My First Test', () =>{
it('Should visit the login page', () =>{
cy.visit('/login');
cy.url().should('includes', 'login');
cy.get('#loginFormTitle').should('be.visible')
;
cy.get('#loginFormTitle').should
('have.text', 'Login Form');
cy.get('#loginFormEmailInputValue').shoul
d('not.exist');
cy.get('#loginFormPasswordInputValue').sh
ould ('not.exist');
})
});

22. Second Test Case: Should
Enter Valid Email and
Password. Redirect to the
Dashboard
// specs.ts
it Should enter valid email and password
and redirect to the dashboard', ()>{
cy.visit('/login');
cy.url().should ('includes', 'login');
cy.get('#loginFormEmailInput').type('parth
agmail.com);
cy.get('#loginFormPasswordInput').type(
'Parth@123');
cy.get('#loginFormSubmitButton').click();

23. cy.get('#loginFormEmailInputValue').should
'be.visible');
cy.get
('#loginFormEmailInputValue').should(
'have.text', 'Email: parth@gmail.com');
cy.get
('#loginFormPasswordInputValue').should(
'be.visible');
cy.get('#loginFormPasswordInputValue').sh
ould( 'have.text', 'Password: Parth@123');
});
Now, since you are very familiar with this
type() and click() method, I don’t need to
explain it, Isn’t it?

24. Github
Repository:
Angular
Cypress
Example

25. Just visit below the repository and set up
the project.
Github source code: angular-cypress-
example
Open a terminal and run the below
command to set up the demo app in your
local system.
git clone https://github.com/bacancy-
parthsardhara/cypress-testing-angular.git
cd cypress-testing-angular
npm install
ng s -o

26. Conclusion

27. So this is the basics of the Cypress test
cases. I hope the Cypress Automation
Testing Tutorial helped you to get started
with testing your Angular app. Feel free to
write us back your suggestions and
feedback. You can visit Cypress’s official
site and check the API. We will be back in
the next part on how to write efficient
cypress test cases.

28. Thank You
www.bacancytechnology.com