Introduction to Cypress

Cypress is a next-generation front-end testing tool built for the modern web. It offers a fast, easy, and reliable testing environment for anything that runs in a browser. With dozens of built-in APIs, Cypress stands out as an excellent choice for developers who want an all-in-one testing solution.

API Examples

Visit

To visit a web page, simply use the cy.visit() command:

  cy.visit('https://example.com')

Contains

The cy.contains() command checks if an element contains specific text:

  cy.contains('Submit')

Get

Use cy.get() to get a DOM element:

  cy.get('.header').click()

Type

To type into an input field, use cy.type():

  cy.get('input[name="username"]').type('myusername')

Click

Clicking a button or link is straightforward with cy.click():

  cy.get('button').click()

Assert

Assertions in Cypress are done with the should() command:

  cy.get('h1').should('contain', 'Welcome')

Intercept

You can intercept and mock network requests with the cy.intercept() command:

  cy.intercept('GET', '/api/users', { fixture: 'users.json' })

Wait

Force a wait with cy.wait():

  cy.wait(500)

Viewport

Set the viewport size:

  cy.viewport(1280, 720)

Screenshot

Take a screenshot:

  cy.screenshot()

Custom Command

Create custom commands to simplify your tests:

  Cypress.Commands.add('login', (username, password) => {
    cy.get('input[name="username"]').type(username)
    cy.get('input[name="password"]').type(password)
    cy.get('button[type="submit"]').click()
  })

Application Example

Consider a simple To-Do app test using some of these APIs:

  describe('To-Do App', () => {
    it('should add a new task', () => {
      cy.visit('https://example-todo.com')
      cy.get('input[name="new-task"]').type('Buy groceries{enter}')
      cy.contains('Buy groceries').should('be.visible')
    })

    it('should mark a task as completed', () => {
      cy.get('li').contains('Buy groceries').siblings('button').click()
      cy.get('li').contains('Buy groceries').should('have.class', 'completed')
    })
  })

With these examples, you can see the power and simplicity of Cypress for end-to-end testing in modern web applications.

Hash: 55f83af98ca9393690d40f656f7dd955d3a0e59c761a07974f213b300dc42aee