cyclope

ciclope

Instantâneos Cypress DOM e comparação consistente de imagens na nuvem

Postagens de blog

• Salve a página em caso de falha no teste

Vídeos

• Cyclope: salve uma página inteira com estilos se um teste Cypress falhar

• Use LocalStorage do Cypress Test para definir os dados iniciais

• Testar arrastar itens

• Introdução ao comando cy.session

Aulas do curso

Testando a loja de brindes

• Bônus 39: Salve a página HTML inteira em caso de falhas no teste

Instalar

Adicione este plugin ao seu projeto. Supondo que Cypress seja uma dependência de desenvolvimento

 $ npm i -D ciclope# ou se preferir fio$ fio adicione -D ciclope

Inclua o plugin do seu arquivo de suporte ou de um arquivo de especificação individual

 // em cypress/support/index.js// https://github.com/bahmutov/cyclopeimport 'ciclope'

Incluir o plugin do arquivo de configuração no Cypress v10

 //cypress.config.jsconst { defineConfig } = require('cypress')module.exports = defineConfig({
  e2e: {setupNodeEvents(on, config) { // https://github.com/bahmutov/cyclope require('cyclope/plugin')(on, config) // IMPORTANTE para retornar o objeto de configuração // com qualquer alteração variáveis ​​de ambiente retornam configuração},
  },})

Incluir o plugin do arquivo de plugins no Cypress v9

Inclua o plugin do seu arquivo de plugins

 //cypress/plugins/index.jsmodule.exports = (on, config) => {
  // https://github.com/bahmutov/cyclope
  require('ciclope/plugin')(on,config)

  // IMPORTANTE para retornar o objeto de configuração
  // com quaisquer variáveis ​​de ambiente alteradas
  retornar configuração}

Salvar a página atual

Se você precisar salvar a página atual do aplicativo Web, incluindo quaisquer recursos

 //cypress/integration/spec.jsit('salva a página', () => {
  // comandos normais do Cypress
  cy.contains('.some-selector', 'some text').should('be.visible')// quando o aplicativo atingir o estado desejado// salve a página na pasta "page".savePage(' página')})

Todos os recursos locais, como imagens e CSS, devem ser salvos como arquivos locais. Você pode criar um arquivo zip

 // use a extensão .zip para compactar a pasta em um filecy.savePage('page.zip')

Ao salvar o zip, a função produz um objeto com propriedades de nome de arquivo, largura e altura.

Opções

• removeIframes (false por padrão) remove todos os elementos <iframe> da página antes de salvar

 cy.savePage('nome', { removeIframes: true })

• ignoreFailedAssets (falso por padrão) ignora a falha caso parte dos ativos não possa ser carregada

 cy.savePage('nome', { ignoreFailedAssets: true })

Salve a página com falha

Este módulo inclui uma função utilitária para salvar a página se o teste falhar. Você pode usar esta função como gancho afterEach , provavelmente do arquivo de suporte, para que ela se aplique a todos os testes.

 // em cypress/support/index.js// https://github.com/bahmutov/cyclopeimport { savePageIfTestFailed } de 'cyclope'afterEach(() => {
  savePageIfTestFailed()
  // caso parte dos ativos do seu projeto esteja quebrada
  savePageIfTestFailed({ ignoreFailedAssets: true })})

Por padrão, a página é salva apenas no modo não interativo cypress run . Se você quiser salvar a página mesmo executando no modo cypress open , use a opção saveInteractive

 savePageIfTestFailed({ saveInteractive: true })

Todas as páginas são salvas na pasta cypress/failed/<spec name>/<test name> .

Dica: armazene o cypress/failed como um artefato de teste no CI. Se um teste falhar, baixe e abra a folder/index.html para inspecionar a estrutura da aplicação no momento da falha.

ciclope

Alias clope

Gera imagem PNG consistente usando serviço de imagem Cyclope externo. Requer variáveis ​​de ambiente CYCLOPE_SERVICE_URL e CYCLOPE_SERVICE_KEY ao executar o Cypress. Suporta pairar

 cy.get('#theme-switcher').realHover().cyclope('hover-over-sun.png')// salva a imagem "hover-over-sun.png" gerada// equivalentecy.get(' #theme-switcher').realHover()cy.clope()

Se você quiser simplesmente pular o upload do DOM e a geração de imagens se o serviço Cyclope não estiver configurado, defina a opção de ambiente Cypress, por exemplo, usando o arquivo cypress.json

 { "env": {"ciclope": { "skipUploadWithoutUrl": verdadeiro}
  }
}

Depuração

Você pode ativar mensagens detalhadas de depuração no terminal usando o módulo de depuração executando os testes com a variável de ambiente DEBUG=cyclope

$ DEBUG=cyclope npx cypress run

Exemplos

• aplicativo de tarefas para ciclope

• módulo sudoku-mock

Letras pequenas

Autor: Gleb Bahmutov <[email protected]> © 2021

• @bahmutov

• glebbahmutov.com

• blog

• vídeos

• apresentações

• cipreste.dicas

Licença: MIT - faça qualquer coisa com o código, mas não me culpe se não funcionar.

Suporte: se você encontrar algum problema com este módulo, envie um e-mail/tweet/abra o problema no Github

Licença MIT

Copyright (c) 2021 Gleb Bahmutov <[email protected]>

É concedida permissão, gratuitamente, a qualquer pessoa que obtenha uma cópia deste software e dos arquivos de documentação associados (o "Software"), para negociar o Software sem restrições, incluindo, sem limitação, os direitos de usar, copiar, modificar, mesclar , publicar, distribuir, sublicenciar e/ou vender cópias do Software e permitir que as pessoas a quem o Software seja fornecido o façam, sujeito às seguintes condições:

O aviso de direitos autorais acima e este aviso de permissão serão incluídos em todas as cópias ou partes substanciais do Software.

O SOFTWARE É FORNECIDO "COMO ESTÁ", SEM GARANTIA DE QUALQUER TIPO, EXPRESSA OU IMPLÍCITA, INCLUINDO, MAS NÃO SE LIMITANDO ÀS GARANTIAS DE COMERCIALIZAÇÃO, ADEQUAÇÃO A UM DETERMINADO FIM E NÃO VIOLAÇÃO. EM HIPÓTESE ALGUMA OS AUTORES OU DETENTORES DE DIREITOS AUTORAIS SERÃO RESPONSÁVEIS POR QUALQUER RECLAMAÇÃO, DANOS OU OUTRA RESPONSABILIDADE, SEJA EM UMA AÇÃO DE CONTRATO, ATO ILÍCITO OU DE OUTRA FORMA, DECORRENTE DE, OU EM CONEXÃO COM O SOFTWARE OU O USO OU OUTRAS NEGOCIAÇÕES NO SOFTWARE.