Criando funções da página no cypress

O que são funções auxiliares?

Testing Vue web applications with Vuex data store & REST backend

Este exemplo é voltado a vuejs mas pode ser utilizado angularjs e reactjs.

Como implementar em um projeto

Abaixo irei listar com boas práticas como seria interessante em implementar isso em um projeto.

• Primeiro passo é criar uma pasta dentro do cypress, ou com o nome de utils genérica ou com functions para as de função;
• Deixe sempre bem claro o nome dos campos, de preferencia, crie data-testid no projeto do front;

Exemplo de como fazer:

Normalmente quando vamos capturar um campo no cypress ele nos mostra o seguinte:

cy.get(‘').type(‘teste@teste.com’)

Aconselho a deixar o cy.get como o cypress sugere de boa prática, como:

cy.get(‘[data-testid=”email’).type(‘teste@teste.com’)

Com isso já organizado, vamos para

Na estrutura de arquivos do cypress, temos uma pasta com o nome de fixtures, nessa pasta você irá criar um arquivo com o nome que desejar e lá dentro deverá colocar as seguintes linhas:

export const cyGetById = (testId: string) => cy.get(`[data-testid=”${testId}”]`);

export const cyTypeById = (testId: string, type: string) => cyGetById(testId).type(type);

Dai você vai no seu arquivo de login.spec.js e adiciona:

import { cyTypeById } from ‘cypress/fixtures/cy-variables’;

cyTypeById(‘email’, ‘teste@teste.com’);