Cypress Promise e Cypress Assíncrono: 13 Fatos Importantes

by

No nosso anterior artigo, vimos as configurações no Cypress e várias opções que podem ser configuradas em arquivos JSON. Este artigo vai entender Promessa de Cipreste e Cipreste Assíncrono comportamento com implementação prática e exemplos em nosso projeto. Também discutiremos como incorporar awaits em nosso código assíncrono e algumas funções essenciais, como wrap() e task(). Vamos começar!

Cypress Promise e Cypress Asynchronous:

Promessa de Cipreste e Cipreste Assíncrono natureza são alguns dos conceitos essenciais. Como qualquer outro framework Javascript, Cypress também gira em torno de Assíncrono e Promessas. Cypress lida com todo o comportamento assíncrono internamente e é escondido do usuário. Nós vamos usar .then() para lidar com promessas manualmente em nosso código. Existem pacotes externos como o Cypress-promessa no npm, onde podemos manipular o comportamento assíncrono do Cypress. Discutiremos cada um desses tópicos em detalhes.

Cypress Promise e Cypress Asynchronous
Promessa de Cipreste

Conteúdo

Cipreste Assíncrono

Como sabemos, o Cypress é baseado em Nó JS. Qualquer estrutura escrita a partir de Node.js é assíncrono. Antes de entender o comportamento assíncrono do Cypress, devemos saber a diferença entre a natureza síncrona e assíncrona.

Natureza síncrona

Em um programa síncrono, durante a execução de um código, somente se a primeira linha for executada com sucesso, a segunda linha será executada. Ele espera até que a primeira linha seja executada. Ele é executado sequencialmente.

Natureza assíncrona

O código é executado simultaneamente, espera que cada etapa seja executada sem incomodar o estado do comando anterior. Embora tenhamos escrito nosso código sequencialmente, o código assíncrono é executado sem esperar a conclusão de qualquer etapa e é completamente independente do comando / código anterior.

O que é assíncrono no Cypress?

Todos os comandos do Cypress são assíncronos por natureza. O Cypress tem um invólucro que entende o código sequencial que escrevemos, os enfileira no invólucro e é executado posteriormente quando executamos o código. Então, Cypress faz todo o nosso trabalho que está relacionado à natureza assíncrona e promessas!

Vamos entender um exemplo disso.

 it('clique na opção de tecnologia para navegar até a URL da tecnologia', function () { cy.visit('https://techiescience.com/') // Nenhum comando é executado //clique na opção de tecnologia cy. get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img' ) // Nada é executado aqui também .click() // Nada acontece ainda cy.url() // Nenhum comando é executado aqui também .should('include', '/technology') // Não, nada. }); // Agora, todas as funções de teste foram executadas // Cypress colocou todos os comandos na fila e agora eles serão executados em sequência

Isso foi muito simples e divertido. Agora entendemos como os comandos Cypress Asynchronous funcionam. Vamos mergulhar mais fundo em onde estamos tentando misturar código de sincronização e código assíncrono.

Combinando comandos Cypress Synchronous e Asynchronous

Como vimos, os comandos do Cypress são assíncronos. Ao injetar qualquer código síncrono, o Cypress não espera que o código de sincronização seja executado; portanto, os comandos de sincronização são executados primeiro, mesmo sem esperar por nenhum comando Cypress anterior. Vejamos um pequeno exemplo para entender melhor.

 it('clique na opção de tecnologia para navegar até o URL da tecnologia', function () { cy.visit('https://techiescience.com/') //clique na opção de tecnologia cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() // Nenhum comando executado aqui também .should('include', '/technology') // Não, nada. console.log("Isso é para verificar o log") // Log para verificar o comportamento assíncrono }); });
captura de tela 1 do registro
Execução síncrona do comando log

O log é adicionado ao final do código, que é um comando de sincronização. Quando executamos o teste, você pode ver que o log foi impresso antes mesmo de a página ser carregada. Desta forma, o Cypress não espera pelo comando síncrono e o executa antes mesmo de executar seus comandos.

Se quisermos que eles sejam executados conforme o esperado, devemos envolvê-los dentro do .then() função. Vamos entender com um exemplo.

it('clique na opção de tecnologia para navegar até o URL da tecnologia', function () { cy.visit('https://techiescience.com/') //clique na opção de tecnologia cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() // Nenhum comando executado aqui também .should('include', '/technology') // Não, nada. .then(() => { console.log("Isso é para verificar o log") // Log para verificar o comportamento assíncrono }); });
após registro de sincronização
Execução assíncrona com o comando .then ()

O que é Cypress Promise?

Como vimos acima, o Cypress enfileira todos os comandos antes da execução. Para reformular em detalhes, podemos dizer que Cypress adiciona promessas (comandos) em uma cadeia de promessas. Cypress soma todos os comandos como uma promessa em uma cadeia.

Para entender as promessas, compare-as com um cenário da vida real. A explicação também define a Promessa em natureza assíncrona. Se alguém te promete, eles também rejeitar or cumprir a declaração que eles fizeram. Da mesma forma, no modo assíncrono, promete rejeitar or cumprir o código que envolvemos em uma promessa.

No entanto, o Cypress cuida de todas as promessas e não é necessário manipulá-las com nosso código personalizado. Como programadores de Javascript, ficamos curiosos sobre como usar aguarda em nossos comandos. As APIs do Cypress são completamente diferentes do que estamos acostumados em geral. Veremos isso em uma parte posterior deste tutorial em profundidade.

Estados das promessas de cipreste

As promessas têm três estados diferentes com base nos comandos Cypress. Eles estão

  • Resolvido - Ocorre quando o passo / comando é executado com sucesso.
  • Pendente - Indique onde a execução foi iniciada, mas o resultado é incerto.
  • Rejeição - Ocorre quando a etapa falha.

Como um programador Javascript, temos a tendência de escrever promessas em nosso código e devolvê-las. Por exemplo,

//Este código é apenas para demonstração description('Exemplo Cypress ', function () { it('clique na opção de tecnologia para navegar até o URL da tecnologia', function () { cy.visit('https://techiescience. com/') //clique na opção de tecnologia cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl- conteúdo da foto > a > .fl-photo-img') .then(() => { return cy.click(); }) cy.url() .then(() => { return cy.should(' include', '/tecnologia') }) }); });

Aqui, estamos retornando promessas a cada um dos comandos. Isso não é necessário no Cypress. Felizmente, o Cypress cuida de todas as promessas internamente e não precisamos adicionar promessas a cada etapa. Cypress tem o capacidade de repetição opção, onde ele tenta novamente por um determinado período de tempo para executar o comando. Veremos um exemplo de código sem incluir promessas manualmente.

    it('clique na opção de tecnologia para navegar até o URL da tecnologia', function () { cy.visit('https://techiescience.com/') //clique na opção de tecnologia cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() .should('incluir', '/tecnologia') }); });
AMOSTRA
Comandos Cypress com promessas tratadas internamente

O código acima não é desajeitado e é fácil de ler e entender. Cypress lida com todo o trabalho de promessa, e é escondido do usuário. Portanto, não precisamos nos preocupar em lidar ou devolver as promessas em lugar algum!

Como você usa o await no Cypress?

Conforme discutido acima, o Cypress tem sua maneira de lidar com código assíncrono criando uma fila de comandos e os executando em sequência. Adicionando awaits aos comandos não funcionará conforme o esperado. Uma vez que Cypress está lidando com tudo internamente, eu recomendo não adicionar awaits ao código.

Se você precisar adicionar awaits, pode usar uma biblioteca de terceiros como Promessa cipreste isso muda a forma como o Cypress funciona. Esta biblioteca permitirá que você use promessas nos comandos e use aguardam no código

Vamos entender as maneiras de usar o Wait e como não usá-lo.

Você não deve usar o Wait assim

//Não use await desta forma description('Visite a página', () => { (async () => { cy.visit('https://techiescience.com/') await cy.url(). deveria('incluir', '/tecnologia'); })() })

Em vez disso, você pode usar assim

descreva('Visite a página', () => { cy.visit('https://techiescience.com/').then(async () => aguarde cy.url().should('include', ' /tecnologia') ()) })

Isso funcionará para qualquer comando Cypress.

Envoltório de Cipreste

wrap() é uma função no Cypress que produz qualquer objeto que seja passado como um argumento.

Sintaxe

cy.wrap(subject)
cy.wrap(subject, options)

Vejamos um exemplo de como acessar wrap() em nosso código.

const getName = () => { return 'Cavalo' } cy.wrap({ nome: getNome }).invoke('nome').should('eq', 'Cavalo') // true

No exemplo, estamos envolvendo o getName e invoque o nome para ele.

Promessa de Cipreste

Podemos quebrar as promessas que são retornadas pelo código. Os comandos irão esperar que a promessa seja resolvida antes de acessar o valor gerado e. em seguida, prossiga para o próximo comando ou asserção.

const customPromise = new Promise((resolve, rejeitar) => { // usamos a função setTimeout() para acessar o código assíncrono. setTimeout(() => { resolve({ type: 'success', message: 'Apples and Oranges' , }) }, 2500) }) it('deve esperar que as promessas sejam resolvidas', () => { cy.wrap(customPromise).its('message').should('eq', 'Apples and Oranges' ) });

Quando o argumento em cy.wrap() é uma promessa, vai esperar que a promessa seja resolvida. Se a promessa for rejeitada, o teste falhará.

Cypress-promessa npm

Se quisermos manipular as promessas do Cypress, podemos usar adicionalmente uma biblioteca ou pacote chamado Promessa cipreste e incorporá-lo em nosso código. Este pacote permitirá que você converta um Comando Cypress em uma promessa e permite que você aguarde ou assíncrona no código. No entanto, essas condições não funcionarão before or beforeEach os blocos. Inicialmente, devemos instalar o pacote em nosso projeto passando o seguinte comando no terminal.

npm i cypress-promise

Depois de instalado, o terminal se parecerá com isto.

Captura de tela 2021 08 11 às 9.43.42hXNUMX
Cypress-promessa de instalação

Após a instalação, devemos importar a biblioteca para nosso arquivo de teste.

import promisify from 'cypress-promise'

Com essa biblioteca, você pode criar e substituir a promessa nativa do Cypress e usar awaits e async no código. Você deve acessar a promessa com o promisify palavra-chave. Vejamos um exemplo para o mesmo.

import promisify from 'cypress-promise' it('should run tests with async/await', async () => { const apple = await promisify(cy.wrap('apple')) const oranges = await promisify(cy.wrap ('laranjas')) expect(maçã).to.equal('maçã') expect(laranjas).to.equal('laranjas') });
Captura de tela 2021 08 11 às 9.49.02hXNUMX
Promisify in Cypress - promessa

Isso foi muito simples e divertido de aprender! Dessa forma, você pode atribuir código assíncrono no Cypress.

Tarefa Cypress Async

task() é uma função no Cypress que executa o código no Node. Este comando permite que você alterne do navegador para o nó e execute comandos no nó antes de retornar o resultado para o código.

Sintaxe

cy.task(event)
cy.task(event, arg)
cy.task(event, arg, options)

task() retorna um valor ou promessa. task() irá falhar se a promessa for devolvida como undefined. Dessa forma, ajuda o usuário a capturar erros de digitação em que o evento não é tratado em alguns cenários. Se você não precisa retornar nenhum valor, então passe null valor.

Perguntas Frequentes

O Cypress é síncrono ou assíncrono?

Cypress é Assíncrono retornando os comandos enfileirados em vez de esperar pela conclusão da execução dos comandos. Embora seja assíncrono, ele ainda executa todas as etapas de teste sequencialmente. O Cypress Engine lida com todo esse comportamento.

É possível pegar a cadeia de promessa em Cypress?

O Cypress foi projetado de uma forma que não seremos capazes de cumprir as promessas. Esses comandos não são exatamente promessas, mas parecem uma promessa. Dessa forma, não podemos adicionar manipuladores explícitos como catch.