Hoje em “pitadas de Cypress”, aprenda como criar App Actions

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 #5 do canal TAT, que rolou na última segunda-feira.

Neste post não vou me ater em Page Objects ou App Actions? Vai ser só App Actions. Esse outro assunto, vai ficar para outra publicação.

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, e os que ocorrem via GUI.

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 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.

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 da app action 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 foi 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.

Aproveite os cupons de desconto abaixo.

https://www.udemy.com/course/testes-automatizados-com-cypress-basico/?couponCode=CFD6F4BB4D62C6F8C565

https://www.udemy.com/course/testes-automatizados-com-cypress-intermediario/?couponCode=501DB7CCF1C3063F60B5

https://www.udemy.com/course/testes-automatizados-com-cypress-e-percy-basico/?couponCode=9757CA1F481F345910A3

Um comentário 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 )

Foto do Google

Você está comentando utilizando sua conta Google. 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