Cypress é uma ferramenta de automação de testes end-to-end (ponta a ponta) voltado para aplicações web. É executado diretamente no navegador, permitindo interações como clicar em botões, preencher formulários e verificar o conteúdo da página. Neste artigo listaremos alguns códigos básicos mais utilizados no Cypress, categorizados para facilitar seu entendimento. Existe também alguns hacks que aumentarão sua produtividade no Cypress, você pode ler aqui.
Comandos de Acesso à URL e Interceptação
cy.visit('http://localhost:3000'): Navega para a URL especificada. Este é geralmente o primeiro comando de qualquer teste.cy.intercept('GET', '/api/users'): Intercepta e controla requisições HTTP. É muito útil para simular dados de uma API (mocking) e evitar que os testes dependam de um servidor real.
Comandos de Seleção de Elementos
Estes comandos são a base para interagir com elementos da página. O Cypress usa seletores CSS para encontrar os elementos.
cy.get('.nome-da-classe'): Encontra um ou mais elementos com a classe CSS.nome-da-classe.cy.get('#id-do-elemento'): Encontra um elemento com o ID#id-do-elemento.cy.get('button'): Encontra todos os elementosbuttonna página.cy.contains('Texto do Botão'): Encontra um elemento que contenha o texto especificado.
Comandos de Ação
Depois de selecionar um elemento, você usa esses comandos para interagir com ele.
.click(): Clica no elemento..type('seu-texto'): Digita texto em um campo de formulário..clear(): Limpa o conteúdo de um campo de formulário..check(): Marca um checkbox ou radio button..uncheck(): Desmarca um checkbox..select('valor-da-opcao'): Seleciona uma opção em um dropdown (<select>).
Os comandos do Cypress são usados para escrever testes de ponta a ponta (end-to-end) de aplicações web. Eles operam diretamente no navegador, permitindo interações como clicar em botões, preencher formulários e verificar o conteúdo da página.
Aqui estão os comandos mais usados do Cypress, categorizados para facilitar o entendimento.
Comandos de Acesso à URL e Interceptação
cy.visit('http://localhost:3000'): Navega para a URL especificada. Este é geralmente o primeiro comando de qualquer teste.cy.intercept('GET', '/api/users'): Intercepta e controla requisições HTTP. É muito útil para simular dados de uma API (mocking) e evitar que os testes dependam de um servidor real.
Comandos de Seleção de Elementos (Similar ao jQuery)
Estes comandos são a base para interagir com elementos da página. O Cypress usa seletores CSS para encontrar os elementos.
cy.get('.nome-da-classe'): Encontra um ou mais elementos com a classe CSS.nome-da-classe.cy.get('#id-do-elemento'): Encontra um elemento com o ID#id-do-elemento.cy.get('button'): Encontra todos os elementosbuttonna página.cy.contains('Texto do Botão'): Encontra um elemento que contenha o texto especificado.
Comandos de Ação
Depois de selecionar um elemento, você usa esses comandos para interagir com ele.
.click(): Clica no elemento..type('seu-texto'): Digita texto em um campo de formulário..clear(): Limpa o conteúdo de um campo de formulário..check(): Marca um checkbox ou radio button..uncheck(): Desmarca um checkbox..select('valor-da-opcao'): Seleciona uma opção em um dropdown (<select>).
Comandos de Verificação (Assertions)
As asserções são cruciais para verificar se a aplicação se comporta como esperado. O Cypress usa a biblioteca Chai, então você verá a sintaxe should.
.should('be.visible'): Verifica se o elemento está visível na tela..should('have.text', 'Texto Esperado'): Verifica se o texto do elemento é o esperado..should('have.class', 'classe-esperada'): Verifica se o elemento tem uma classe CSS..should('have.length', 3): Verifica se um grupo de elementos (por exemplo, uma lista) tem o número esperado de itens..should('not.have.class', 'classe-nao-esperada'): Verifica que o elemento não tem uma classe específica.
