{"id":26402,"date":"2022-05-09T12:31:16","date_gmt":"2022-05-09T12:31:16","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=26402"},"modified":"2024-12-27T08:25:51","modified_gmt":"2024-12-27T08:25:51","slug":"angular-cypress-example-part-1","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/angular-cypress-example-part-1","title":{"rendered":"Angular Cypress Example: Test Angular App using Cypress"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>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 today\u2019s Angular Cypress example, you will learn how to set up an end-to-end testing framework called CYPRESS in an angular application and write some basic test cases.<\/p>\n<h2>What is Cypress?<\/h2>\n<p>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.<\/p>\n<h2>Tutorial Goal: Cypress with Angular 12<\/h2>\n<p>Before developing an application, let\u2019s see what we will build. Watch the below video to understand what our demo app looks like.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/FlRLKZV2ttc\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\"><strong><i><span style=\"font-size:22px; color:#000;\">Does it take a hard time for you to trust when beginning with your web app development?<\/span><br \/>\nAngular gives you the authentication to feel secure. <a href=\"https:\/\/www.bacancytechnology.com\/angular-js-development\" target=\"_blank\" rel=\"noopener\">Hire Angular Developer<\/a> to resolve all your trust issues<\/strong><\/i><\/p>\n<h2>Angular Cypress Example: Project Set-Up<\/h2>\n<p>Before we start with our angular cypress example and start writing the test cases, we will clone the repository. The repository consists of the boilerplate to which we will add code to test the app later. If you wish, you can use your project as well.<\/p>\n<pre>git clone https:\/\/github.com\/bacancy-parthsardhara\/cypress-testing-angular.git\r\ncd cypress-testing-angular\r\nnpm install\r\nng s -o<\/pre>\n<p>Open a terminal and run the below command to set up the project in your local system.<\/p>\n<h2>Install Cypress in Angular Project<\/h2>\n<p>First, we need to add cypress in our application, so use the below command to add cypress in our master branch.<\/p>\n<pre>ng add @cypress\/schematic<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Install-cypress-min.png\" alt=\"Install cypress\" width=\"1092\" height=\"374\" class=\"aligncenter size-full wp-image-26415\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Install-cypress-min.png 1092w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Install-cypress-min-300x103.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Install-cypress-min-1024x351.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Install-cypress-min-768x263.png 768w\" sizes=\"auto, (max-width: 1092px) 100vw, 1092px\" \/><\/p>\n<p>The above command will set up the basic required configuration with some files and create one <strong>sepc.ts<\/strong> file as a sample cypress testing file.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/sample-cypress-testing-file-min.png\" alt=\"sample cypress testing file\" width=\"1100\" height=\"609\" class=\"aligncenter size-full wp-image-26416\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/sample-cypress-testing-file-min.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/sample-cypress-testing-file-min-300x166.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/sample-cypress-testing-file-min-1024x567.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/sample-cypress-testing-file-min-768x425.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p><strong>To check the Cypress test cases<\/strong><\/p>\n<pre>npm run cypress:open\/<\/pre>\n<p>The above command will help open a chrome browser to check the cypress test cases like the below screen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/check-the-cypress-test-cases-min.png\" alt=\"check the cypress test cases\" width=\"1100\" height=\"801\" class=\"aligncenter size-full wp-image-26417\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/check-the-cypress-test-cases-min.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/check-the-cypress-test-cases-min-300x218.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/check-the-cypress-test-cases-min-1024x746.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/check-the-cypress-test-cases-min-768x559.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>Click on the <strong>spec.ts<\/strong> file, and it will run the cypress test cases for that file.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/run-the-cypress-test-cases-min.png\" alt=\"run the cypress test cases\" width=\"1100\" height=\"589\" class=\"aligncenter size-full wp-image-26418\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/run-the-cypress-test-cases-min.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/run-the-cypress-test-cases-min-300x161.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/run-the-cypress-test-cases-min-1024x548.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/run-the-cypress-test-cases-min-768x411.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p><strong>To share the spec success\/failure report<\/strong><\/p>\n<pre>npm run cypress:run<\/pre>\n<p>It will run in a terminal and share the spec success and failure report.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/run-in-a-terminal-min.png\" alt=\"run in a terminal\" width=\"1100\" height=\"835\" class=\"aligncenter size-full wp-image-26419\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/run-in-a-terminal-min.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/run-in-a-terminal-min-300x228.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/run-in-a-terminal-min-1024x777.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/run-in-a-terminal-min-768x583.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/share-the-spec-success-and-failure-report-min.png\" alt=\"share the spec success and failure report\" width=\"1100\" height=\"897\" class=\"aligncenter size-full wp-image-26420\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/share-the-spec-success-and-failure-report-min.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/share-the-spec-success-and-failure-report-min-300x245.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/share-the-spec-success-and-failure-report-min-1024x835.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/share-the-spec-success-and-failure-report-min-768x626.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<h2>Testing Angular Application Using Cypress<\/h2>\n<p>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\u2019s make our hands dirty on the cypress.<\/p>\n<p>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 <mark>document.getElementById<\/mark> methods and check the assertions on that.<\/p>\n<p>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.<\/p>\n<pre>describe('My First Test', () =>{\r\n  it('Visits the initial project page', () =>{\r\n    cy.visit('\/')\r\n    cy.contains ('Welcome')\r\n    cy.contains ('sandbox app is running!')\r\n  })\r\n})\r\n<\/pre>\n<p>But here, one important thing is you don\u2019t need to import anything such as service or any dependency, which we generally do in the unit testing.<\/p>\n<p>For the unit testing in Angular, you can visit the previous blog, which can be very helpful for you. <a href=\"https:\/\/www.bacancytechnology.com\/blog\/unit-testing-in-angular-application-using-jasmine-and-karma-part-1\" target=\"_blank\" rel=\"noopener\">Unit testing in Angular using Jasmine and Karma (Part 1)<\/a> and <a href=\"https:\/\/www.bacancytechnology.com\/blog\/unit-testing-in-angular-application-using-jasmine-and-karma-part-2\" target=\"_blank\" rel=\"noopener\">Unit testing in Angular using Jasmine and Karma (Part 2)<\/a><\/p>\n<p>We will be writing the following two test cases in our cypress angular example:<\/p>\n<ul class=\"bullets text-left\">\n<li>To visit the Login page.<\/li>\n<li>To enter a valid email address and password, later redirect to the dashboard. <\/li>\n<\/ul>\n<h3>First Test Case: Should Visit the Login Page<\/h3>\n<pre>\/\/ specs.ts\r\n\r\ndescribe( 'My First Test', () =>{\r\n  it('Should visit the login page', ()={\r\n    cy.visit('\/login');\r\n   cy.url().should('includes', 'login')\r\n    cy.get('#loginFormTitle').should ('be.visible');\r\n    cy.get('#loginFormTitle').should ('have.text', 'Login Form');\r\n  })\r\n})\r\n<\/pre>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/success-test-cases-min.png\" alt=\"success test cases\" width=\"1100\" height=\"376\" class=\"aligncenter size-full wp-image-26422\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/success-test-cases-min.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/success-test-cases-min-300x103.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/success-test-cases-min-1024x350.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/success-test-cases-min-768x263.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p><strong>Explanation<\/strong><br \/>\n\u2022 What is the meaning of what we have written in the test cases?<br \/>\ncy.visit(&#8216;\/login&#8217;);<\/p>\n<p> \u27a1 It will visit\/redirect to the given URL. For example, <mark>cy.visit(&#8216;\/registration&#8217;);<\/mark> will visit automatically to the registration page.<\/p>\n<p><mark>cy.url().should(&#8216;includes&#8217;, &#8216;login&#8217;)<\/mark><\/p>\n<p>  \u27a1  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 <mark>cy.url().should(&#8216;includes&#8217;, &#8216;login1&#8217;);<\/mark> instead of what was mentioned, then it will give an error like the below image.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/detect-error-min.png\" alt=\"detect error\" width=\"1100\" height=\"466\" class=\"aligncenter size-full wp-image-26423\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/detect-error-min.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/detect-error-min-300x127.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/detect-error-min-1024x434.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/detect-error-min-768x325.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>And then it will stop the execution of that spec.<\/p>\n<p><mark>cy.get(&#8216;#loginFormTitle&#8217;).should(&#8216;be.visible&#8217;);<\/mark><\/p>\n<ul class=\"bullets text-left\">\n<li>Using <strong>cy.get()<\/strong> method we can get the element the way we access it using <mark>\u201cdocument.getelementbyid(#id)\u201d<\/mark> in JS.<\/li>\n<li>We can access a particular element using class, id. A better practice is to get the element using id only.<\/li>\n<li>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 <mark>.should(&#8216;be.visible&#8217;);<\/mark> if it does not exist in the dom then we can use <mark>.should(&#8216;not.exist&#8217;);<\/mark> For example, How adding not.exit for the below image.<\/li>\n<\/ul>\n<pre>\/\/ specs.ts\r\n\r\ndescribe('My First Test', () =>{\r\n it('Should visit the login page', () =>{\r\n    cy.visit('\/login');\r\n    cy.url().should('includes', 'login');\r\n    cy.get('#loginFormTitle').should('be.visible');\r\n    cy.get('#loginFormTitle').should ('have.text', 'Login Form');\r\n    cy.get('#loginFormEmailInputValue').should('not.exist');\r\n    cy.get('#loginFormPasswordInputValue').should ('not.exist');\r\n })\r\n});\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/My-first-test-is-successful-min.png\" alt=\"My first test is successful\" width=\"1100\" height=\"519\" class=\"aligncenter size-full wp-image-26424\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/My-first-test-is-successful-min.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/My-first-test-is-successful-min-300x142.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/My-first-test-is-successful-min-1024x483.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/My-first-test-is-successful-min-768x362.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<h3>Second Test Case: Should Enter Valid Email and Password. Redirect to the Dashboard<\/h3>\n<pre>\/\/ specs.ts\r\n\r\nit Should enter valid email and password and redirect to the dashboard', ()>{\r\n  cy.visit('\/login');\r\n  cy.url().should ('includes', 'login');\r\n  cy.get('#loginFormEmailInput').type('parthagmail.com);\r\n  cy.get('#loginFormPasswordInput').type( 'Parth@123');\r\n  cy.get('#loginFormSubmitButton').click();\r\n  cy.get('#loginFormEmailInputValue').should 'be.visible');\r\n  cy.get ('#loginFormEmailInputValue').should( 'have.text', 'Email: parth@gmail.com');\r\n  cy.get ('#loginFormPasswordInputValue').should( 'be.visible');\r\n  cy.get('#loginFormPasswordInputValue').should( 'have.text', 'Password: Parth@123');\r\n});<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Redirect-to-the-Dashboard.-min.png\" alt=\"Redirect to the Dashboard\" width=\"1100\" height=\"550\" class=\"aligncenter size-full wp-image-26425\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Redirect-to-the-Dashboard.-min.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Redirect-to-the-Dashboard.-min-300x150.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Redirect-to-the-Dashboard.-min-1024x512.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Redirect-to-the-Dashboard.-min-768x384.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>Now, since you are very familiar with this type() and click() method, I don\u2019t need to explain it, Isn\u2019t it?<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Smile-Single-Image-min-300x55.jpg\" alt=\"Smily Image\" width=\"300\" height=\"55\" class=\"alignnone size-medium wp-image-28860\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Smile-Single-Image-min-300x55.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Smile-Single-Image-min-1024x186.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Smile-Single-Image-min-768x140.jpg 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/05\/Smile-Single-Image-min.jpg 1100w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h2>Github Repository: Cypress with Angular Tutorial <\/h2>\n<p>Just visit below the repository and set up the project.<\/p>\n<p>Github source code: <a href=\"https:\/\/github.com\/bacancy-parthsardhara\/cypress-testing-angular\" target=\"_blank\" rel=\"noopener\">angular-cypress-example<\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>So this is the basics of the Cypress test cases in the Angular application. I hope the Angular Cypress example helped you start testing your Angular app. Feel free to write us back your suggestions and feedback. You can visit <a href=\"https:\/\/www.cypress.io\/\" target=\"_blank\" rel=\"noopener\">Cypress\u2019s official site<\/a> and check the API. We will be back in the next part on how to write efficient cypress test cases.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction 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 today\u2019s Angular Cypress example, you will learn how to set up an end-to-end testing framework called CYPRESS in an angular application and [&hellip;]<\/p>\n","protected":false},"author":37,"featured_media":28848,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[989],"tags":[],"coauthors":[1580],"class_list":["post-26402","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs"],"acf":[],"modified_by":"Binal Prajapati","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/26402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=26402"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/26402\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/28848"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=26402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=26402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=26402"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=26402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}