Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/darylducks17/cypress-tutorials

Learning Cypress for Web App Automation.
https://github.com/darylducks17/cypress-tutorials

cypress javascript mochajs test-automation

Last synced: about 1 month ago
JSON representation

Learning Cypress for Web App Automation.

Awesome Lists containing this project

README 

        
# Cypress



Learning Cypress for Web App Automation.



## What is Cypress?



- Front-end web automation testing tool.

- It is Developed for modern web application (latest Javascript frameworks) like React JS, AngularJS.

- Cypress allows us to automate any application which runs on browsers (Chrome, Edge, Firefox and Electron).

- Automation scripts are written in Javascript or in Typescript.

- Open-source but has many components - Cypress Dashboard (Paid) and TestRunner (Free)

- Cypress is built on Node.js and comes with Node Package Manager (npm) modules.

- Cypress is faster compared to Selenium as it runs inside the browser.



## Who can use and what kind of tests can be done in Cypress?



- Developers and QA Engineers can use it

- Automate end-to-end, integration, unit and API testing.



## Main features of Cypress



- *Time travel* - takes snapshot of every run and maintains history

- *Debuggability* - Cypress has access to all the dev tools since it is running internally on the browser. There is no need to rerun the code as you can immediately cross check the error

- *Automated (built-in) waits* - automatically waits for the certain element and do the action or page to load

- *Consistent Results* - no flakiness as you will get the same results no matter how many times you run the test script

- *Screenshot and videos* - Cypress will automatically capture screenshot and videos if there is an error when running the test.

- *Cross browser testing* - tests can be run on many browsers either locally or remotely



## Limitations of Cypress



- Cannot automate tests for Desktop or Mobile Apps.

- Limited broswers - Firefox, Chrome, Chromium.

- Cannot use languages other than Javascript/Typescript.

- Reading/writing data into file is difficult.

- Third party reporting tool integration is limited.

  

## Environment Setup - identical for Windows and Mac



1. Download and install Node.js, Visual Studio Code (VSCode)

2. Create a new folder for the project and open it in VSCode

3. Open CMD/Terminal and then exectue the following command which creates the package.json file (list of apps for the for it to run):

    ```npm -i init```

4. To install Cypress, use the following command:

   ```npm install cypress --save -dev```

5. To start the Cypress application, use:

   ```npx cypress open``` or ```node_modules/.bin/cypress open```



## Writing Tests



- Cypress uses Mocha framework to write the test scripts.



```

describe('TestSuiteName', () => {



    it('Does not do much!, () => {

        expect(true).to.equal(true)

    })

})

```



- ```describe``` is a keyword and can multiple ```it``` blocks

- ```('TestSuiteName'``` is the name of the test suite

- ```() =>``` represents the function which can be also written like ```function ()```

- ```('Does not do much!``` is the test case

- One spec file can have multiple number of test suites/```describe``` block and every ```describe``` block can have multiple ```it``` block.

- ```cy``` is the root module/package where one can access all the commands from Cypress.



## Executing Tests



- ```npx cypress open``` - opens the Cypress application where you can run the spec files.

- ```npx cypress run``` - terminal/cmd command to run all the spec files without launching the Cypress application (headless mode).

- ```npx cypress run --headed``` - terminal/cmd command to run all spec files directly on the browser

- ```npx cypress run --spec pathtofile.cy.js``` - terminal/cmd command to run the specific spec file (headless mode by default)

- ```npx cypress run --browser chrome``` - terminal/cmd command to run all the spec files (headless mode by default)

  

## Locators



- CSS Selectors - supported by Cypress

  - four types of supported CSS Selectors

    - #id 

    - .class

    - [attribute='value']

    - .class [attribute='value']

- XPath - need to install additional plugins

- ```cy.get('locator')```  method will locate the element

- ```cy.get('locator').type('value')``` this will go to the locator and type in the value provided

- ```cy.get('locator').contains('value')``` get the DOM element containing the text

- xpath plugin has been deprecated

- able to use Cypress TestRunner to capture the locators



## Assertions



- Assertions are the validations that are executed in the middle or end of the test cases to evaluate that the actual result is as expected.

- In Cypress there are two types of assertions:

  - Implicit

    - If an assertion is applicable to the object obtained from the parent command in a chain, it is known as the implicit assertion

    - These commands cannot be used as standalone. Generally, they are used when we have to verify multiple checks on a particular object.

    - ```cy.get('locator').should('value')``` & ```cy.get('locator').should('value').and('value')``` are the popular implicit assertions

    - These are the [keywords](https://docs.cypress.io/guides/references/assertions) you may want to include when doing assertions:

      - eq, contain, include, exist, have.length, have.value -> also have the negative equivalent

  - Explicit

    - If an assertion is applicable to an object directly, it is known as the explicit assertion.

    - ```cy.get('locator').assert('value')``` (TDD approch) & ```cy.get('locator').expect('value')``` (BDD approach) are the popular explicit assertions

- Default

- Handled internally and do not require to be invoked specifically.

  - ```cy.visit ()``` − expects the page to show the content with 200 status code

  - ```cy.request ()``` − expects the remote server to be available and sends a response.

  - ```cy.contains ()``` − expects the web element with its properties to be available in DOM.

  - ```cy.get()``` −expects the web element to be available in DOM.

  - ```cy.find ()``` − expects the web element to be available in DOM.

  - ```cy.type ()``` − expects the web element to turn to a type able state.

  - ```cy.click ()``` − expects the web element to turn to a clickable state.

  - ```cy.its ()``` − expects for a web element property on the existing subject.



## Folder Structure



- **downloads** - all downloaded files are stored here

- **e2e** - store all spec/test case files

- **fixures** - maintain static test data here

- **screenshots** - stores captured ** through automation

- **support** - contains all the reusable scripts

  - commands.js - store/create custom commands and override the current commands

  - e2e.js - code that loads before executing the spec files

- **videos**

  - recorded videos of the test cases are stored here

- **node_modules** - contains all cypress related modules

- **cypress.config.js** - cypress config file

- **package.json** - contains the dependencies



## Interacting with Elements



- Checking and unchecking radio buttons/checkboxes

  - ```.check()``` & ```.uncheck()```

- Cypress has only ```.get()``` method to get either single or multiple elements

- ```have.value``` assertion only works when dropdowns have the selector tag in the DOM. Use ```have.text``` instead.

- Cypress automatically closes JS alert windows by clicking the 'OK' button. Need to write code to automate to click the 'Cancel' button.

- Cypress cannot directly shift to a new tab and perform operations there. There are certain workarounds to combat this issue.

  1. Clicking on the link and removing the target attribute to open the child tab on the same page.

  2. jQuery function to capture the href of new tab and save it in a variable - One limitation is that the domain should be the same or the function will not function

- Cypress cannot handle iframes content if there are cross-origin restriction in place. It is security mechanism implemented by web browsers to prevent malicious behavior and protect user data.



  - The following property must be set in ```cypress.config.js``` file to access cross origin policy iframes.



```

const {defineConfig} = require('cypress');

module.exports = defineConfig ({

  chromeWebSecurity: false,

  e2e: {

    setupNodeEvents(on, config) {

      // implement node event listeners here

    },

  },

})

```



or



```

module.exports = {

  e2e: {

    chromeWebSecurity:false,

    setupNodeEvents(on, config) {

      // implement node event listeners here

    },

  },

};

```



- Hooks used to specify some prerequisite scripts before executing the tests.

- They are derived from mocha framework

  - ```before``` - execute before starting all the it blocks

  - ```after``` - only once after all the it block; can write anywhere as order is not important

  - ```beforeEach``` - multiple times before every it block

  - ```afterEach``` - multiple time after every it block

- Tags

  - ```skip``` - it block skipped during test run

  - ```only``` - runs only the specific it block

- Fixtures

  - files that contain test data which we can parametrise the tests

  - can use various formats e.g. JSON, TXT, CSV, HTML