Hoje em “pitadas de Cypress”, aprenda como criar código reutilizável

Muita gente vem me pedindo para falar sobre “Page Objects ou App Actions?”

Aos que querem entender melhor sobre o assunto, além da fonte oficial (blog do Cypress.io), recomendo a tradução do Jonas Davila, e a live #15 do canal TAT.

Neste post não vou me ater em Page Objects versus App Actions. O foco aqui será em Comandos Customizados, onde alguns deles podem ser considerados App Actions. A comparação entre Page Objects e App Actions vai ficar para outra publicação.

Para explicar, vou usar como exemplo o repositório do projeto wlsf82/gitlab-cypress.

Neste projeto, resolvi separar os comandos customizados entre comandos que ocorrem à nível de API (os quais podem ser considerados App Actions), e os que ocorrem via GUI (os quais são só comandos customizados).

Ou seja, dentro do diretório cypress/support/ tenho a seguinte estrutura de arquivos.

cypress/support/
  api_commands.js
  gui_commands.js
  index.js

E a partir do arquivo cypress/support/index.js, importo ambos arquivos api_commands.js gui_commands.js.

import './api_commands'
import './gui_commands'

Beleza até aqui?

Agora quero adicionar um teste que valida a criação de um projeto com sucesso (via API).

Vejamos a implementação do teste.

const faker = require('faker')

describe('Create project', () => {
  after(() => cy.api_deleteProjects()) // Falarei do método after em outro post.

  it('successfully', () => {
    const project = {
      name: faker.random.word() // Vou aboardar o uso do faker em outro post também, explicando seu uso.
    }

    cy.api_createProject(project).then(response => {
      expect(response.status).to.equal(201)
      expect(response.body.name).to.equal(project.name)
    })
  })
})

E a implementação da App action (ou do comandos customizado que cria tal recurso via chamada de API).

const accessToken = Cypress.env('gitlab_access_token')

Cypress.Commands.add('api_createProject', project => cy.request({
  method: 'POST',
  url: `/api/v4/projects/?private_token=${accessToken}`,
  body: { name: project.name }
})

Ok, a parte de testes de API está coberta.

Agora, vejamos um exemplo de um teste de GUI, também para a criação de um projeto.

const faker = require('faker')

describe('Create project', () => {
  beforeEach(() => cy.gui_login())

  after(() => cy.api_deleteProjects())

  it('successfull', () => {
    const project = {
      name: faker.random.uuid(),
      description: faker.random.words(5)
    }

    cy.gui_createProject(project)

    cy.url().should(
      'be.equal',
      `Cypress.config('baseUrl')${Cypress.env('user_name')}/${project.name}`
    )
    cy.contains(project.name).should('be.visible')
    cy.contains(project.description).should('be.visible')
  })
})

E a implementação do comando customizado gui_createProject.

Cypress.Commands.add('gui_createProject', project => {
  cy.visit('projects/new')

  cy.get('#project_name').type(project.name)
  cy.get('#project_description').type(project.description)
  cy.get('.qa-initialize-with-readme-checkbox').check()
  cy.contains('Create project').click()
})

Pronto! Agora temos a funcionalidade de criação de projeto coberta tanto à nível de API, como de GUI!


Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.


O que está achando da série?

Aguardo teu feedback.


Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy.

3 comentários em “Como criar comandos customizados com Cypress

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s