Test Automation with Cypress

What is Cypress and Why Cypress?

How to install Cypress?

Installing cypress
Installing cypress
  1. Create a package.json file
  1. Navigate to the project folder in a terminal
  2. Install the dependencies in the local node_modules folder

cypress.json

This is the Cypress configuration file and the main entry point to a Cypress project. In order to use the below-mentioned folder structure, you must add the following custom configurations in this file after the initial Cypress installation.

"pluginsFile": "test/functional/framework/plugins/index.js",     "supportFile": "test/functional/framework/support/index.js",     "fixturesFolder": "test/functional/fixtures",     "integrationFolder": "test/functional/tests",     
"testFiles": "**/*.spec.js",
"videosFolder": "test/functional/results/videos", "screenshotsFolder": "test/functional/results/screenshots", "video": false,

Opening Cypress

$ yarn run cypress open
$ npx cypress open

Sample Project Structure

Sample folder structure
Sample folder structure

Sample test file

// cypress/integration/login.spec.js
describe('login', () => {
beforeEach(() => {
visitLoginPage()
})

it('A User logs in and sees a welcome message', () => {
loginWith('michael@example.com', 'passsword')

expect(cy.contains('Welcome back Michael')).to.exist
})

it('A User logs off and sees a goodbye message', () => {
loginWith('michael@example.com', 'password')
logout()

expect(cy.contains('Goodbye! See you soon!'))
})
})

const visitLoginPage = () => {
cy.visit('http://localhost:3000')
}

const loginWith = (email, password) => {
cy.get('[name="email"]').type(email)
cy.get('[name="password"]').type(password)
cy.get('button').click()
}
const logout = () => {
cy.get('button').click()
}

Test Execution

  1. GUI Mode
Test execution window
Test execution window
$ ./node_modules/.bin/cypress run — spec “test/functional/test_file_name.spec.js”
Test report with the execution using the tesrminal
Test report with the execution using the tesrminal

Errors

Error Window
  1. Error message: This generally tells you what went wrong. It can vary in length.
  2. Learn more: Some error messages contain a Learn more link that will take you to relevant Cypress documentation.
  3. Code frame file: This is usually the top line of the stack trace and it shows the file, line number, and column number that is highlighted in the code frame below. Clicking on this link will open the file in your preferred file opener and highlight the line and column in editors that support it.
  4. Code frame: This shows a snippet of code where the failure occurred, with the relevant line and column highlighted.
  5. View stack trace: Clicking this toggles the visibility of the stack trace.
  6. Print to console button: Click this to print the full error to your DevTools console. This will usually allow you to click on lines in the stack trace and open files in your DevTools.

Debugging

Your Cypress test code runs in the same run loop as your application. This means you have access to the code running on the page, as well as the things the browser makes available to you, like document, window, and debugger.

Debug using debugger
Debug using then()
Debug using debug()

Frequently Installed Together

Below are some useful npm packages that most users install together with Cypress:

References

Senior Quality Engineer @ SyscoLABS