Conteúdo

• O que é Cypress Commands?
• Comandos de interação da interface do usuário fornecidos pelo Cypress
• Comando de clique com o botão direito do Cypress
• Comando de duplo clique do Cypress
• Comando de clique de cipreste
• Comando Cypress Trigger
• Comando do tipo Cypress
• Comando Cypress Select
• Comando Cypress Check
• Comando de limpeza de cipreste
• Os comandos Cypress são assíncronos?
• Comandos personalizados do Cypress
• Encadeando comandos de asserção no Cypress
• Sobrescrever comandos Cypress existentes
• Comandos Cypress Chainable
• Comando pai personalizado no Cypress
• Comando personalizado filho no Cypress
• Comando duplo personalizado no Cypress
• Comandos personalizados do Cypress com exemplo
• Comandos de importação do Cypress
• Cypress Comando Personalizado IntelliSense

O que é Cypress Commands?

Cypress nos fornece APIs e métodos para interagir com a UI do aplicativo. Eles são conhecidos como Cypress Commands e auxiliam na interação da aplicação web. Todos os comandos disponíveis têm métodos embutidos e só invocaremos os métodos em nossos casos de teste. Os comandos Cypress simularão uma ação semelhante a um usuário tentando realizar operações no aplicativo.

Comandos de interação da IU fornecidos pela Cypress

Existem diferentes comandos fornecidos pelo Cypress que interagem com a IU. Veremos a lista de todos os comandos em detalhes.

• .clique()
• .dblclick ()
• .clique com o botão direito ()
• .modelo()
• .Claro()
• .Verifica()
• .uncheck ()
• .select ()
• .acionar()

Comando de clique de cipreste

.clique() - Este comando é para clique qualquer elemento no DOM.

A seguir estão as sintaxes para o comando de clique

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

Como você pode ver acima, o clique aceita parâmetros como opções, posição, e coordenadas.

Opções

As opções possíveis que podem ser passadas para clicar são

Posições

Os diferentes tipos de posições que podem ser passadas para .click () são

• Centro (omissão)
• esquerda
• certo
• topo
• superiorEsquerda
• canto superior direito
• fundo
• inferior esquerdo
• canto inferior direito

Exemplo

cy.get('btn').click() //clicando no botão cy.get('btn').click({ force: true }) //clicando no botão passando a opção 'force' como true cy. get('btn').click('bottomRight') // clicando no botão na posição inferior direita cy.get('btn').click(10, 70, { force: true }) // clicando no botão com valor de posição e forçar verdadeiro

Comando de duplo clique do Cypress

O clique duplo pode ser obtido usando dblclick() sintaxe em Cypress.

Sintaxe

.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)

Opções

.dblclick() aceita todas as opções que são aceitas por .click(). Você pode encontrar as opções na seção acima.

Posições

Todas as posições possíveis que são especificadas em .click() também estão disponíveis para dblclick(). A lista dos cargos pode ser encontrada na seção acima.

Exemplo

cy.get('button').dblclick() // Duplo clique no botão cy.focused().dblclick() // Duplo clique no elemento com foco cy.contains('Home').dblclick() // Duplo clique no primeiro elemento contendo 'Home' cy.get('button').dblclick('top') // Clique duas vezes no botão na posição superior cy.get('button').dblclick(30, 10) // Dê um duplo clique nas coordenadas de 30 e 10

Comando de clique com o botão direito do Cypress

Este comando Cypress clica com o botão direito do mouse no elemento DOM .rightclick() o comando não abre os menus de contexto do navegador.rightclick() é usado para testar o tratamento de eventos relacionados ao clique com o botão direito no aplicativo, como contextmenu.

Sintaxe

.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

Opções

Como vimos acima, todas as opções aceitas por .click() o comando pode ser configurado com .rightclick() comando também.

Posições

Todas as posições possíveis que podem ser passadas para o .rightclick() é o mesmo que o .click() Mencionado acima.

Exemplo

cy.get('.welcome').rightclick() // Clique com o botão direito em .welcome cy.focused().rightclick() // Clique com o botão direito no elemento com foco cy.contains('January').rightclick() / / Clique com o botão direito no primeiro elemento contendo 'January' cy.get('button').dblclick('topRight') // Clique duas vezes no botão na posição superior direita cy.get('button').dblclick(80, 20 ) // Clique duas vezes nas coordenadas de 80 e 20

Comando do tipo Cypress

.type() comando insere valor em um elemento DOM.

Sintaxe

.type(text)
.type(text, options)

Argumentos

.type() aceita string como argumento. Valores passados ​​para .type() pode incluir qualquer uma das sequências de caracteres especiais fornecidas a seguir.

Opções

Podemos passar os objetos como opções para modificar o comportamento padrão do .type()

Exemplo

Vamos ver exemplos para .type() comando

cy.get('textarea').type('Hey there') // insira o valor na área de texto cy.get('body').type('{shift}') //habilita a tecla shift cy.get ('body').type('{rightarrow}') //tipo seta para a direita do evento 

Comando de limpeza de cipreste

O comando Limpar irá limpar os valores na área de entrada ou no campo de texto.

Sintaxe

A sintaxe para o comando claro é a seguinte.

.clear()
.clear(options)

Opções

Veremos as opções que podem ser passadas para o .clear() comando.

Exemplo

Vejamos os exemplos para um comando claro

cy.get('[type="text"]').clear() // Limpar entrada do tipo text cy.get('textarea').type('Welcome!').clear() // Limpar textarea cy .focused().clear() // Limpa a área de entrada/texto focada

Comando Cypress Check

O comando de verificação irá verificar ou, em palavras mais simples, marcar as caixas de seleção ou botões de rádio. Você pode desmarcar as caixas de seleção ou botões de opção usando o .uncheck() comando.

Sintaxe

Vamos entender a sintaxe do comando de verificação no Cypress.

//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)

//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)

Opções

As opções possíveis que podem ser passadas para marcar / desmarcar os comandos são as mesmas do comando limpar listado acima

Exemplo

Veremos o exemplo de como podemos usar os comandos check e uncheck.

cy.get('[type="checkbox"]').check() // Verifica o elemento checkbox cy.get('[type="radio"]').first().check() // Verifica o primeiro rádio element cy.get('[type="radio"]').check('Male') //Verifica o elemento de rádio que tem Male cy.get('[type="checkbox"]').uncheck() / /Desmarque o elemento de caixa de seleção cy.get('[type="radio"]').uncheck() //Desmarque o primeiro elemento de rádio cy.get('[type="checkbox"]').uncheck('Breakfast') // Desmarca o elemento café da manhã

Comando Cypress Select

O comando select Cypress permite que você selecione elementos dentro de um marcação.

Sintaxe

A seguir está a sintaxe para o comando select

.select(value)
.select(values)
.select(value, options)
.select(values, options)

Opções

Podemos passar as opções para modificar o comportamento padrão do comando select.

Exemplo

Vejamos exemplos para o comando select

cy.get('select').select('butterfly') // Seleciona a opção 'butterfly' cy.get('select').select(0) // seleciona o elemento com índice 0 cy.get('select ').select(['parrot', 'peacock']) //seleciona a opção papagaio e pavão

Comando Cypress Trigger

O comando Trigger ajuda a acionar qualquer evento no elemento.

Sintaxe

Vamos examinar a sintaxe para acessar o comando de gatilho

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)

Opção

O comando Trigger aceita todas as opções mencionadas para .clear() comando. Além disso, existem algumas opções que podemos configurar listadas abaixo.

Exemplo

Vamos diferentes maneiras de usar .trigger() no código.

cy.get('a').trigger('mouseover') // Aciona o evento mouseover em um link cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown acionado em button 0 cy.get('button').trigger('mouseup', topRight, { bubbles: false }) //mouseup acionado na posição topRight com a configuração de bolha como false

Os comandos do Cypress são assíncronos?

Todos os comandos Cypress são assíncronos. Eles são enfileirados para execução em um momento posterior e não aguardarão a conclusão dos comandos. O comando Cypress não faz nada no momento de sua invocação, em vez disso, eles o salvam para execução posterior. Você pode entender o comportamento assíncrono do Cypress SUA PARTICIPAÇÃO FAZ A DIFERENÇA

Comandos Cypress Chainable

No Cypress, podemos usar uma série de comandos para interagir com elementos no DOM. É fundamental entender como o encadeamento de comandos funciona internamente. Se estivermos encadeando comandos em uma linha específica, o Cypress irá lidar com uma promessa baseada na cadeia de comandos e produzirá um comando baseado no assunto para o próximo comando, até que a cadeia de comandos termine ou um erro tenha ocorrido.

Cypress nos permite clicar em um elemento ou digitar em elementos usando o .click() or .type() comandos obtendo os elementos usando cy.get() or cy.contains(). Vejamos um exemplo simples de comandos de encadeamento

cy.get('textarea').type('Como você está?')

No exemplo acima, cy.get() é um comando Cypress e .type() é outro comando, onde estamos encadeando o .type() comando para o cy.get() comando, dizendo-lhe para digitar o assunto que é gerado a partir do cy.get() elemento. Da mesma forma, podemos encadear todos os comandos que discutimos acima.

Encadeando comandos de asserção no Cypress

Semelhante ao encadeamento de vários comandos usando o Cypress, também podemos encadear asserções com comandos. Asserções são comandos que permitem descrever o esperado estado ou comportamento do aplicativo. O Cypress irá esperar até que os elementos atinjam o estado esperado, e o teste irá falhar se as asserções não passarem. Veremos como podemos usar comandos de encadeamento para declarar um elemento.

cy.get('button').should('be.disabled') //espera se o botão deve ser desabilitado cy.get('form').should('have.class', 'form-vertical') / /espera se o formulário deve ter classe como 'form-vertical' cy.get('input').should('not.have.value', 'Name') // afirma se a entrada não deve ter o valor 'Name '

Conforme listado acima, estamos usando o cy.get() comando e encadeando-o com o .should() comando assertion para esperar o comportamento com base no resultado. Dessa forma, podemos usar a cadeia comandos de asserção no Cypress.

Comandos personalizados do Cypress

Cypress nos fornece APIs para criar comandos com base em nossos requisitos. O comando personalizado Cypress é semelhante aos comandos padrão que são pré-existentes, exceto que é usuário definido. Com comandos personalizados, podemos brincar com os comandos e encadeá-los com base em nosso caso de uso. Os comandos personalizados do Cypress são úteis em nosso fluxo de trabalho se você precisar reutilizá-los continuamente nos testes.

Vamos ver a sintaxe para criar um novo comando personalizado no Cypress.

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

onde os argumentos são os seguintes

nome - O nome do comando na string que queremos adicionar ou substituir

retorno de chamadaFn - Esta função recebe um argumento passado para o comando

opções - Passe qualquer objeto de opções para definir o comportamento do comando

Note : as opções são suportadas apenas para os comandos add e não suporta os comandos de substituição

As opções que prevSubject aceita são os seguintes

• false - ignorar assuntos anteriores (comando dos pais)
• true - aceitar os assuntos anteriores (comando filho)
• optional - transmita se você deseja iniciar uma nova cadeia ou usar uma cadeia existente (comando duplo)

Comando pai personalizado no Cypress

Veremos como adicionar um comando personalizado pai no Cypress. O comando pai sempre iniciará uma nova cadeia de comandos, mesmo que você tenha encerrado um comando anterior. O comando encadeado anteriormente será ignorado e um novo comando será sempre encadeado. Alguns dos comandos principais são cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()

Exemplo

Veremos um exemplo de como escrever um comando personalizado pai no Cypress

Cypress.Commands.add('clickLink', (label) => { cy.get('a').contains(label).click() }) //clicando no link "Comprar agora" cy.clickLink('Comprar Agora')

No exemplo acima, 'cliqueLink'é o nome do nosso comando personalizado. Ele irá procurar pelo rótulo. Na linha 2, o comando obtém 'a'e procure o link que contém o rótulo e clique no elemento. cy.clickLink() irá executar a ação no arquivo de teste e clicar no botão “Compre Agora" ligação.

Comando personalizado filho no Cypress

Os comandos filhos personalizados no Cypress são encadeados a partir de um comando pai ou de outro comando filho. O assunto do comando anterior será transferido para a função de retorno de chamada.

Alguns dos comandos Cypress que podem ser encadeados como um comando filho são .click(), .trigger(), .should(), .find(), .as()

Exemplo

Veremos um exemplo de como encadear um comando personalizado filho

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => { // envolve o assunto existente e faz algo com ele cy.wrap(subject).click({force:true }) }) //acessando o forceClick no arquivo de teste cy.get("[data-test='panel-VALUES']").forceClick();

No exemplo acima, estamos nomeando nosso comando personalizado como 'forçarClick'. Estamos passando o argumento prevSubject para o elemento e envolvendo o assunto existente. Com cy.wrap(), somos forçados a clicar no assunto. Então, no arquivo de teste, estamos acessando o comando personalizado, 'forçarClick' com um cy.get() comando.

Comandos personalizados duplos no Cypress

Os comandos personalizados duplos são híbridos entre um comando pai e filho. Você pode iniciar uma nova cadeia de comandos ou desativar um comando existente. Comandos duplos são úteis se quisermos que nosso comando funcione de maneiras diferentes com ou sem o assunto existente.

Alguns dos comandos que podem ser usados ​​para comandos duplos são cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()

Exemplo

Vejamos um exemplo de como usar comandos personalizados duplos

Cypress.Commands.add('getButton', { prevSubject: 'opcional' }, (assunto) => { if (assunto) { cy.get(assunto).get('btn').its('button'); } else { cy.get('btn').its('button'); } })

Em alguns casos, precisaremos obter o botão do texto usando getButton que irá adquirir todo o botão do elemento. Agora podemos usar getButton para encadear o com o elemento pai ou encadear o elemento filho, onde pode invocar os elementos do pai.

Uma vez que o prevSubject é opcional, podemos passar o assunto como um argumento ou invocar o comando sem o assunto no arquivo de teste como abaixo

cy.getButton() // sem o assunto cy.get('#loginBtn').getButton() // com o assunto

Sobrescrever comandos Cypress existentes

Podemos substituir os comandos Cypress já existentes e modificar o comportamento para evitar a criação de outro comando que tentará usar o comando original no final.

Alguns dos comandos originais do Cypress que podem ser substituídos são cy.visit(), cy.type(), cy.screenshot(), cy.contains()

Exemplo

Vamos ver um exemplo de como podemos substituir o Cypress existente comando.

Cypress.Commands.overwrite('contains', (originalFn, subject, filter, text, options = {}) => { // determina se um argumento de filtro foi passado if (typeof text === 'object') { options = texto texto = filtro filtro = indefinido } options.matchCase = false return originalFn(assunto, filtro, texto, opções) } )

Como vimos acima, estamos usando o Cypress.Commands.overwrite para modificar o comando Cypress existente. Estamos nomeando nosso comando personalizado como contains e estamos passando argumentos para determinar se o argumento do filtro foi aprovado.

Comandos de importação do Cypress

Nesta seção, vamos entender como importar comandos Cypress.

Devemos criar nossos comandos personalizados Cypress no cypress / support / commands.js Arquivo. Devemos adicionar os comandos personalizados no arquivo command.js e importar em nosso arquivo de caso de teste para usá-lo.

Comandos personalizados do Cypress com exemplo

Vamos entender como criar um comando personalizado e usá-lo em nosso arquivo de especificações com exemplo em tempo real.

Como vimos acima, temos que adicionar novos comandos personalizados no comandos.js Arquivo. Nesse arquivo, vamos adicionar um comando personalizado para uma função de login

Cypress.Commands.add("login", (username, password) => { //adicionando um novo comando chamado login cy.get('[id=Email]').clear(); cy.get('[id =E-mail]').type(nome de usuário); cy.get('[id=Senha]').clear(); cy.get('[id=Senha]').type(senha); cy.get( '[tipo=enviar]').click(); });

No código acima, estamos nomeando nosso comando personalizado como entrar. Dentro do comando personalizado, adicionamos as etapas de limpar o campo de nome de usuário e inserir o valor no campo de texto. Da mesma forma, estamos limpando o campo e adicionando a senha no campo de senha. Mais tarde, estaremos clicando no botão enviar. Este é um comando personalizado simples que aceita dois argumentos: nome de usuário e senha. Estaremos passando o valor para o nome de usuário e senha em nosso arquivo de especificações.

Agora vamos criar um arquivo de especificação chamado customCommand.spec.js sob a pasta de integração. Nosso arquivo de especificações conterá o seguinte código

descreva("Exemplo de comandos personalizados", () => { it("deve fazer login usando os comandos personalizados", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .Conecte-se("[email protegido]", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Como vimos acima, estamos acessando nosso comando personalizado como cy.login() , onde estamos passando os valores de nome de usuário e senha.

Comandos personalizados Cypress IntelliSense

O IntelliSense fornece sugestões de código inteligentes no IDE ou editor de código diretamente enquanto estamos escrevendo testes. Isso ajuda a mostrar um pop-up que exibe a definição do comando, link para a página de documentação e exemplos de código. Se estivermos usando qualquer editor de código moderno, como Visual Studio Code ou IntellJ, o IntelliSense será muito útil.

O IntelliSense usa Typescript para compreender e exibir a sintaxe. Se escrevermos comandos personalizados e fornecermos definições de TypeScript para os comandos personalizados, podemos usar barras triplas para exibir o IntelliSense, mesmo se nosso projeto usar apenas JavaScript.

Para configurar o IntelliSense, precisamos descrever o código em cypress / support / index.d.ts arquivo.

// definições de tipo para o objeto Cypress "cy" /// declare namespace Cypress { interface Chainable { /** * Login com credenciais * @example * cy.login(username,password) */ login(username: String, password: String): Chainable } }

Agora, devemos deixar nossos arquivos de especificação saberem que existem algumas definições de Typescript no index.d.ts Arquivo. Portanto, no início de nosso arquivo de especificações, adicione o código abaixo para permitir que o IntelliSense forneça sugestões para nós.

// definições de tipo para comandos personalizados como "login" // serão resolvidos para "cypress/support/index.d.ts" //

Como vimos acima, o IntelliSense nos fornece o argumento que fornecemos em nosso arquivo command.js e ajuda no preenchimento automático.

Aishwarya Lakshmi

Olá… eu sou Aishwarya Lakshmi, concluí meu B.Tech e tenho quase 2+ anos de experiência na área de testes. Sou um entusiasta de testes e apaixonado por testes e adoro explorar coisas novas em minha área e compartilhá-las com meus colegas. Gosto de escrever blogs durante meu tempo livre da maneira mais simples, mas eficaz. Como testador, gosto de ter as coisas perfeitas, por isso desejo que meus leitores tenham um entendimento perfeito da tecnologia. Eu me mantenho atualizado com as novas tecnologias relacionadas a testes e passo tempo entendendo-as. Fico feliz em ajudar os alunos a compreender os conceitos dos testes.