Download as PDF, PPTX
Uploaded byKnoldus Inc.
Getting Started With Cypress
The document presents an introduction to Cypress, a JavaScript-based automation testing tool designed for modern web applications. It covers various aspects such as the architecture of Cypress, installation steps, and comparisons with Selenium, highlighting its fast and reliable testing capabilities. It emphasizes the importance of etiquette during sessions and provides guidance on writing tests, using locators, and navigating the Cypress dashboard.
More Related Content
Similar to Getting Started With Cypress
More from Knoldus Inc.
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Getting Started With Cypress
- 1. Presented By: SparshBhardwaj Getting Started With Cypress
- 2. Lack of etiquetteand manners is a huge turn off. KnolX Etiquettes Punctuality Respect Knolx session timings, you are requested not to join sessions after a 5 minutes threshold post the session start time. Feedback Make sure to submit a constructive feedback for all sessions as it is very helpful for the presenter. Silent Mode Keep your mobile devices in silent mode, feel free to move out of session in case you need to attend an urgent call. Avoid Disturbance Avoid unwanted chit chat during the session.
- 3. Our Agenda 01 Introductionto Cypress 02 Architecture of Cypress 03 Installation, Test Runner, Locators, Dashboard 04 Cypress Vs. Selenium 05 Demo
- 4. Introduction to Cypress ●What is Cypress? Cypress is a next generation fortend Automation testing tool built for the modern web applications written in JavaScript. ● “Fast,easy and reliable testing for anything that runs in a browser" - from Cypress official documentation. ● A basic understanding of JavaScript is enough to write a test script in cypress. One may not need to be proficient in the JS to work upon cypress.
- 5. Why Cypress? ● Thepeople behind cypress must have strong reasons to put this statement on their official documentation - “Fast,easy and reliable testing for anything that runs in a browser”. ● In a nutshell, why cypress? They are claiming that cypress address the key main points that dev or qa may face when testing modern applications. ● Like synchronization issues, flaky or inconsistent output from test cases. ● All these points makes cypress more desirable as an automation tool. ● But to understand these pain points, we would have to have a understanding of Cypress architecture first.
- 6. Architecture of Cypress ●Most testing tools, say selenium, operates by running outside of the browser and executing remote commands through the network. Selenium Architecture is given below.
- 7. Continued... ● On theother hand, the cypress engine directly operates inside the browser, no middleware. In other words, it is the browser only that is executing your test code.
- 8. Continued... ● Moving on,Cypress has two main components. ○ Test Runner ○ Cypress Dashboard. ● Test Runner - Cypress runs tests in a unique interactive runner that allows you to see commands as they execute while also viewing the application under test. ● Cypress Dashboard - It is an optional web-based companion to the Test Runner. It provides timely, simple and powerful insights on all your tests run at a glance. ● We will cover the dashboard and test runner in the upcoming slides.
- 9. Installation ● The prerequisitefor installation is node.js. Since Cypress is JavaScript test automation tool, we would require node.js and npm(node package manager). ● Steps for installation ● npm -i init , this will create a package.json file. ● npm install cypress --save-dev, this will fetch the latest version of cypress that can be downloaded. ● node_modules/.bin/cypress open, we can use this command to open the cypress runner.
- 10. Running Cypress ● Oncethe cypress runner is open, you may notice that a new folder has been created in your project named “cypress”. ● Cypress documentation recommends to follow the default folder structure. This structure does makes our life easier. ● Folder structure, inside cypress folder there are ○ fixtures - here we put all our test data files. ○ integration - all test scripts will be here only ○ plugins - As cypress is also a node process, we can integrate multiple plugins here. ○ support - Reusable methods or custom command can be put here. ● To run test from the terminal, we can use the command. ○ node_modules/.bin/cypress run | This will run all test inside the integration folder
- 11. Cypress Test Runner ●Cypress runs tests in a unique interactive runner that allows you to see commands as they execute while also viewing the application under test. ● This is where test are executed and it provide the following features :- ○ Test Status - Shows the summary of the test, showcasing the number of passes and failed test cases. ○ Command Logs - It shows all the logs that we get while interacting with the web elements ○ URL preview - shows the URL and helps to track the URL routes ○ App Preview – Shows the real-time interaction with the web application
- 13. Writing a testin cypress ● As we are writing our test in javaScript, we need to follow the standards of at least one javaScript test framework. Be it, chai, Jasmine or Mocha. ● To make our test runnable, we need to inject our test into one of the testing framework. It is the same as in selenium, where we use TestNg or Junit to make our test runnable. ● It is recommended to use mocha with Cypress. ● We need not to download mocha separately, mocha comes bundled with the cypress library. a a ● Here, describe keyword can be considered as a test suite and “it” can be considered as test case. Both of these keywords comes from mocha.
- 14. Locators ● Unlike otherautomation tools, cypress doesn’t provide many options for creating a locator strategy. ● In short, cypress only supports CSS locators only. ● However, with the help of an external plugin, cypress can also support Xpath locators as well, but it doesn’t comes a default behaviour.
- 15. Cypress Dashboard ● TheCypress Dashboard Service is an optional web-based companion to our cypress test runner. It basically, provides a timely, simple and powerful insights on all our tests run at a glance. ● In simple words, one may define it as an overview portal/dashboard which contains almost all the pieces of information about our test and its execution. ● The most admirable thing about the dashboard is its showcase of test summary. ● Here, we have recorded videos of test execution. For the failed test, we also have a screenshot of the instance where they have failed. All this information is available on the cypress dashboard.
- 17. Cypress over Selenium ●Positives ○ It manipulates the browser to run the test execution. ○ It takes screenshots automatically on failure, or record videos of your entire test suite when running from the CLI. ○ With Cypress, there is no need to put explicit waits or sleeps to your tests. It automatically waits for commands and assertions before proceeding. ○ It can take snapshots of the application when the tests are running. Then as a tester, we can hover over each command in the Test Runner panel to see what happened at each step. ● Negatives ○ It is relatively new, and it does not have the vast community that Selenium does ○ There is no support for multiple browser tabs. ○ Cypress only supports JavaScript for creating test cases. Cypress Vs. Selenium
- 18. Selenium over Cypress ●Positives ○ Provides QAs the flexibility to select the programming language of their choice like Java, Ruby, Python, etc. ○ Cypress doesn’t provide support for browsers like Safari and IE at the moment. While selenium does. ● Negatives ○ Handling page load or element load is difficult. ○ Limited support for testing images. ○ Creating test cases is time-consuming. ○ Difficult to set up test environment as compared to Cypress. Cypress Vs. Selenium
- 19.
- 20.
- 21.