Mais conteúdo relacionado


Cypress for Testing

  1. JavaScript End To End Testing Framework Pooja Singh 1-Jul-2020
  2. Topic Outline ● Introduction ● Selenium Vs Cypress Architectural Difference ● Cypress Ecosystem ● How Cypress is different than other tools ● Features of Cypress ● Limitations ● Installation Steps ● Running Cypress Test from CLI ● Cypress Project Structure ● Writing Tests
  3. Introduction ● Cypress is a next generation front end testing tool built for the modern web application. ● Cypress is an Open Source, Free, Fast, Reliable and Easy to use library that allows end to end automation testing. ● Cypress uses JavaScript to write automated tests. ● Cypress addresses the key pain points from other automation tools. ● Cypress built on Node.js, it uses JavaScript for writing tests. But 90% coding can be done using cypress inbuilt commands which are easy to understand. ● Cypress makes our tests very simple when we compared with other tools. ● Cypress is having different Architecture when we compare with selenium.
  4. Selenium vs Cypress Architectures ● Most Test tools like selenium, operate by running outside of browser and executing remote commands across the network ● But Cypress engine directly operates inside the browser. In other words it is the browser that is executing your test code. ● This enables Cypress to listen and modify the browser behaviour at run time by manipulating DOM and altering Network requests and responses on the fly.
  5. Cypress Ecosystem Cypress is open source tool and consist of 1. Test Runner (Open Source Component. Locally installed) helps you set up and start writing tests. 2. Dashboard (Recording Tests). The Dashboard provides you insight into what happened when your test ran.
  6. 7 ways Cypress is different ● Cypress does not use selenium. ● Cypress focuses on using end to end testing well. ● Cypress works on any front-end framework or website. ● Cypress tests are only written in javascript. ● Cypress is all in one. ● Cypress is for developers and QA Engineers. ● Cypress run much, much faster.
  7. Features
  8. Limitations ● Support Limited set of browser - Chrome, Electron. ● Tough to read data from files. ● Third Party Reporting tool integration is limited.
  9. Installation Steps Steps Step 1 Step 2 Step 3 Step 4 Step 5 Install Node.js Update NPM Install Visual Studio Code Generate package.json file npm Install Cypress Description Node.js is JavaScript runtime environment. NPM is a package manager and it makes installing a tool easy IDE that comes with inbuilt support for JavaScript. package.json file holds various metadata and libraries relevant to the project. Cypress is node based tool Link/ Command n/ npm install npm https://code.visu wnload npm init npm install cypress --save- dev
  10. Running Cypress Tests From CLI Details Cypress CLI To open cypress test runner node_modules/.bin/cypress open To run all the test cases node_modules/.bin/cypress run To run specific test case node_modules/.bin/run -- --record —spec "cypress/integration/examples/test1.js To run tests in a headed mode node_modules/.bin/cypress run --headed To run tests in a specific browser node_modules/.bin/cypress run --browser chrome
  11. Cypress Project Structure ● Fixtures: it is where we keep the test data. ● Integration: it is where we write the test cases. ● Plugins: it is where we can alter the default cypress configuration ● Support: it is where we keep reusable methods of customized commands ● Videos: it is where the recording of the tests run is saved. ● NPM Modules: it is where npm installs all the project dependencies. ● Cypress.json: it is used to store different configurations. E.g., timeout, base URL… ● package.json: it holds various metadata and libraries relevant to the project.
  12. Writing Tests ● Cypress Constructs/Hocks ● Intelligent Code Completion ● Cypress Link Navigation ● Cypress get Command ● Cypress Assertion ● Cypress Selector Playground
  13. Cypress Constructs/Hocks ● describe(): It is is simply a way to group our tests. It takes two arguments, the first is the name of the test group, and the second is a callback function. describe('My First Cypress Test Suite', function() { }) ● it(): We use it for an individual test case. It takes two arguments, a string explaining what the test should do, and a callback function which contains our actual test. it('My First Cypress Test Case', function() { }) ● before(): It runs once before all tests in the block. before(function() { //runs once before all tests in the block }) ● after():It runs once after all tests in the block. after(function() { // runs once after all tests in the block }) ● beforeEach(): It runs before each test in the block. beforeEach(function() { // runs before each test in the block }) ● afterEach(): It runs after each test in the block. afterEach(function() { // runs after each test in the block })
  14. Intelligent Code Completion Cypress get Command Cypress Assertion Cypress Link Navigation /// <reference types="Cypress" /> cy.get('.brand').should('have.text' , 'SHIVOM') cy.visit(""); cy.get('#usernameId) visit() should()get()
  15. Cypress Selector Playground Use the browser built-in selector to generate cypress selector syntax
  16. Reference ● ● ● ● e=emb_title
  17. Thank You