How I use Cypress.io for repetitive tests in large forms

May 08, 2020

Who make web systems know that many times testing form is a problem, because:

  • Live reload can back to the initial point, making you write all data every time
  • Many developers have a disease-related with spending a lot of hours on the computer
  • If the form is too large, your day turns on a tedious
Cypress is a tool Javascript open-source that you install for testing, they call End to End because you can apply techniques of TDD, testing UI, record screenshots, all run in a fast environment.

Install

You can install just running the command below:

npm install cypress --save-dev

Creating your first test

Before, you need to create your file test, do it in the folder cypress > integration > test-login.spec.js

context('Login test', () => {     beforeEach(() => {         cy.visit('http://localhost:4200/')     })       it('Insert user and password', () => {         cy.get('[name=user]').type("user1")         cy.get('[name=password]').type("123456")     } })

Now, when I execute my test, it will go:

  1. Open the browser
  2. Navigate to http://localhost:4200/
  3. Entry with user and password in inputs HTML

Running (Windows)

After you need access to the client in node_modules, let's look at how we can do this:

node_modules\.bin\cypress open

Running (Linux or macOS)

./node_modules/.bin/cypress open

For running your test you can just click in the file created for Cypress to open the browser and execute the test, amazing!

Now, every time you make a change in your project, you can execute the test, can't enter many times the same data to test your form, and does the computer work for you.

And you, how you test your apps?

Read More: https://www.cypress.io/