Skip to main content

Introduction to Cypress

Pre-Requisites​

  • Course link: https://testautomationu.applitools.com/cypress-tutorial/
  • My GitHub repository: https://github.com/smarigowda/tau-intro-cypress-giltayar
  • Node js (ex: v12.16.1)
  • VS Code Editor
  • Cypress js

Chapter 1: Setting Up​

  • Clone my GitHub repository
    • git clone git@github.com:smarigowda/tau-intro-cypress-giltayar.git
    • npm install

Chapter 2: Writing First Test​

  • Open test runner
    • npm run open
  • Run the test using Cypress Test Runner, by clicking on the test spec

Chapter 3: Accessing and Interacting with Elements​

  • Turn off Watch functionality by adding the following into cypress.json

    • "watchForFileChanges": false

  • Add timeout query param to the URL while creating a New To Do. This will simulate backend delay

  • Test with 3 sec timeout. Test passes

  • Test with 5 sec timeout. Test fails, becaue default Command Timeout in Cypress is 4 sec

  • Pass an option to cy.get() command to increase the Default Command Timeout for this specific action

  • Remove the new to do delay

  • Mark the to do as complete

  • Clear all completed using cy.contains(''). Partial string will also work

Chapter 4: Validations​

  • Validate the first to do

  • Ctrl+Space to get intellisense

  • Check that the toggle checkbox is initially unchecked

  • Validate the line through after toggle, by checking css property text-decoration-line

  • Direct access to css properties

  • Validate after clearing all todos. Using should not have descendents

Chapter 5: Grouping Tests with Mocha​

  • Separate the test into 3 steps

    • Adding a To Do
    • Toggling a To Do
    • Clearing completed To Dos

  • Group all the 3 tests together using describe

  • Make each test independent, by placing all the common actions required into before each block

  • Add more tests to cover the filtering capability

    • Ability to filter all, completed or not completed
    • Create a new spec todomvc-filtering-spec.js
    • Rename the previous test to todomvc-actions-spec.js
    • Create 3 to dos before each test and toggle second to do in the list
    • Add a test to filter Active to dos
    • Validate that there are only 2 todos in the list
    • Add 2 more tests and validations

Chapter 6: Cypress CLI​

  • Run Cypress tests non interactively using npx cypress run

  • or create an npm command ex: npm run cy:run

  • Run one test spec

    • npx cypress run --spec cypress/integration/todomvc-actions.spec.js

Chapter 7: Page Objects in Cypress​

  • Page Objects help to abstract the page/ components into objects

  • A design pattern proven to reduce code duplication, increase modulatity, decrease maintainance

  • Makes test code comprehensive

  • Provides flexibility to accomodate any changes ex: DOM structure change

  • Exposes clear and minimum interface to the end user (the user writing the test spec)

  • Create a page object class for TodoPage

  • Add the following methods

    • setTodoIndexTo
    • getToDo
    • addToDo
    • navigateTo
    • setTodoIndexTo
    • verifyText
    • shouldNotBeChecked
    • toggle
    • shouldHaveLineThrough
    • clearCompleted
    • verifyTodoItemsCount
    • shouldNotHaveLineThrough

Chapter 8: Visual Validation​

  • Visual validation using Applitools Eyes tool. Tool is free for open source projects. Concurrency is limited to 1 for free tier, which means the processing is going to take longer time.

  • It has Test Manager where all the test results are available - https://eyes.applitools.com

  • Create an account for Applitools - https://applitools.com/

  • Get the APPLITOOLS_API_KEY and set it in your environment

  • Install Eyes SDK for cypress

    • npm install @applitools/eyes-cypress

  • Run the setup command

    • npx eyes-setup

  • Write a new test spec with following Visual Checks addded

    • Take a screenshot of empty todo list
    • Take screenshot after adding 2 totods
    • Take a screenshot after marking one of the todo as completed

  • Test spec todomvc-visual.spec.js

  • Test ran without any issues. Test results appeared in Applitools Test Manager.

  • Introduce a bug using url http://todomvc-app-for-testing.surge.sh/?different-title-color

  • Applitools hangs some times, gets stuck in Running state

  • Takes long time to process (this may be because of concurrency = 1 for Free Account)

  • Test with multiple browsers and resolutions. Test passes, Applitools shows all the results.

Notes:​

  • Link to the course

    • https://testautomationu.applitools.com/cypress-tutorial/

  • Test runs in the browser itself, hence too fast, intelligent waiting

  • No Selenium

  • Mocha test runner

  • Can test using Electron, Chrome, Firefox and Edge browsers

  • Can be used for Unit, Integration and End 2 End testing

  • Cypress creates folder structure when the Cypress test runner is opened for the first time

    • npx cypress open

  • To Do MVC App

    • http://todomvc-app-for-testing.surge.sh/

  • Mocha Test Runner

    • https://mochajs.org/

  • Tripple slash directive for autocomplete support

    • /// <reference types="cypress" />

  • cy global object is the gateway to all Cypress functionality

  • Time travel debugging