Testing with Cypress —

Pragmatic Software Testing

Cypress is used for Web application Testing. It is used for doing end to end testing, integration and unit testing. Browsers supported by Cypress are Electron, Canary, Firefox, edge and Chrome. Cypress by default uses Mocha framework.

• NodeJS & NPM
• Set up Environment Variable
• Install Visual code
• Install Cypress .Type this in your command prompt

npm install cypress --save-dev

To open Cypress you can type below line in your terminal(cmd prompt)

./node_modules/.bin/cypress open

First Test

Structure to write test cases :

describe('My First Test', () => {
 it('Does not do much!', () => {
 expect(true).to.equal(true)
 })
})

Now for your first test create new file and name it FirstTest.js

First test case:

cy.visit is to visit the website. cy.title() is to get the title and asserting the title with the actual one.

One Test Suite can contain many test cases. Now open your Terminal from here or cmd .

and type “ .\node_modules\.bin\cypress open “ to run test runner and then click on your FirstTest1.js will run your script.

In my case problem occured:

So I downgrade my npm by typing below command in my cmd prompt

npm i -g npm@5.3

and problem resolved.

Running again will open this window then click on your FirstTest1.js will run your script.

To run all the test cases under examples type “ .\node_modules\.bin\cypress run “

in your terminal . This command will run the script using Electron by default headlessly. And to run with head means seeing the application running with all the steps “ .\node_modules\.bin\cypress run -headed “ .

And to run specific test we need to type .\node_modules\.bin\cypress run -spec “cypress\integration\examples\FirstTest1.js It will run in headless mode.

And to run in chrome browser type “.\node_modules\.bin\cypress run -browser chrome” in terminal. Chrome is by default headed

Locators

By default Cypress support CSS Selectors for Locators.

CSS Selectors can be done by:

1.SelectorsHub extension/ Chropath extension,

2.Inspect way(i.e Right click on webElement and then selecting inspect and then going to the html page , then right click on the highlighted part , copy and then click on selector.)

3.From Test Runner as well.

Another example of test case