Cypress 9.6.0: Teste facilmente fluxos de trabalho que percorrem diferentes domínios com o comando cy.origin

Este conteúdo é uma tradução livre do blog post Cypress 9.6.0: Easily test multi-domain workflows with cy.origin, escrito pelo time do Cypress e publicado em 25 de Abril de 2022.

---

Hoje temos o orgulho de apresentar um recurso que muitos usuários do Cypress pediram: testar múltiplos super-domínios em um único teste! Com o comando experimental cy.origin(), novo na versão 9.6.0 do Cypress, você pode facilmente alternar entre origens para testar a autenticação sindicalizada, fluxos de trabalho de sistemas de gestão de conteúdo (CMS – Content Managment System) entre sites e muito mais.

O problema

Até agora, testar fluxos de trabalho entre vários domínios com Cypress exigia certas complexidades. Como o Cypress é executado dentro do navegador, os testes que executam comandos em vários super-domínios são executados na regra da mesma origem. Por exemplo, o teste a seguir falharia com um erro de origem cruzada:

it('navega entre super-domínios', () => {
  cy.visit('/')
  cy.get('h1').contains('Minha página inicial')
  cy.visit('https://www.xpto.com/historia/fundador')
  // Este comando vai falhar
  cy.get('h1').contains('Sobre o fundador, João XPTO')
})

Historicamente, isso criou problemas para usuários do Cypress que queriam escrever testes em serviços de login sindicados, como Auth0 ou GitHub. A solução recomendada sempre foi fazer login programaticamente, evitando assim o problema de interagir com telas de login de terceiros. Mas se você quisesse testar explicitamente todo seu fluxo de login como um usuário real, não tinha escolha a não ser contornar a limitação do mesmo domínio dividindo sua história de usuário em vários testes, assim:

it('autentica', () => {
  cy.visit('https//loginseguro.com')
  cy.get('input#password').type('Password123!')
  // Isto nos redireciona para a aplicação em teste
  cy.get('button#submit').click()
})

it('atualiza conteúdo', () => {
  // Agora estamos na aplicação em teste
  // Este teste só pode ser executado após o teste anterior ter criado a sessão
  cy.get('#current-user').contains('autenticado')
  cy.get('button#edit-1').click()
  cy.get('input#title').type('Título atualizado')
  cy.get('button#submit').click()
  cy.get('.toast').should('contain', 'Mudanças salvas!')
})

Mas isso viola o princípio de isolamento de teste e pode introduzir falhas difíceis de depurar, casos extremos estranhos e testes instáveis. Agora, o cy.origin() está aqui para salvá-lo de códigos de login com hacks desajeitados, frágeis e específicos para cada implementação!

A solução: testes em múltiplos domínios

Com o cy.origin() você pode executar comandos em quantos super-domínios precisar, tudo no contexto de um único caso de teste. Aqui está um exemplo trivial que corrige o teste que falhava, introduzido na seção anterior:

it('navega entre super-domínios', () => {
  cy.visit('/')
  cy.get('h1').contains('Minha página inicial')
  cy.origin('www.xpto.com', () => {
    cy.visit('/historia/fundador')
    cy.get('h1')
      .contains('Sobre o fundador, João XPTO') // 👍
  })
})

Nos bastidores, o Cypress injeta o tempo de execução do teste na origem secundária, envia o texto da função de callback especificada, executa essa função no domínio secundário e, finalmente, retorna o controle para a origem do teste original. Mas você não precisa saber tudo isso para usar o cy.origin(), apenas escreva seus comandos de teste de origem cruzada dentro do bloco!

Nem é preciso dizer que o comando cy.origin() pode ser usado em um comando customizado, para que você possa abstrair sua lógica de login, assim como faz com o login programático:

Cypress.Commands.add('login', (usuario, senha) => {
  // Passa dependências via um objeto de opções chamado args
  const args = { usuario, senha }
  cy.origin('loginseguro.com', { args }, ({ usuario, senha }) => {
    cy.visit('/login')
    cy.contains('Usuário').find('input').type(usuario)
    cy.contains('Senha').find('input').type(senha)
    cy.get('button').contains('Entrar').click()
  })
  cy.url().should('contain', '/home')
})

Nota sobre o uso da opção args – lembre-se de que o callback é transmitido para a origem secundária como texto, portanto, você precisa explicitamente passar quaisquer argumentos necessários pelo callback.

Use com o comando session

É claro que passar por um fluxo de login completo antes de cada teste pode adicionar muita sobrecarga até mesmo a um conjunto de testes de tamanho moderado. É por isso que projetamos o cy.origin() para emparelhar com o cy.session(), criando uma solução integrada completa para testar fluxos modernos de autenticação sindicalizados. Aprimorando o exemplo da seção anterior com o cy.session(), podemos armazenar em cache as informações da sessão entre os testes, melhorando o desempenho e evitando “conversas” desnecessárias via rede.

Cypress.Commands.add('login', (usuario, senha) => {
  const args = { usuario, senha }
  cy.session(
    args,
    () => {
      cy.origin('loginseguro.com', { args }, ({ usuario, senha }) => {
        cy.visit('/login')
        cy.contains('Usuário').find('input').type(usuario)
        cy.contains('Senha').find('input').type(senha)
        cy.get('button').contains('Entrar').click()
      }) 
      cy.url().should('contain', '/home')
    },
    {
      validate() {
        cy.request('/api/user')
          .its('status')
          .should('eq', 200)
      },
    }
  )
})

Para obter mais informações sobre o comando cy.session(), consulte este blog post e a documentação da API.

Habilitando o comando cy.origin

Depois de atualizar para o Cypress 9.6.0, você pode experimentar a nova funcionalidade definindo a nova opção de configuração experimentalSessionAndOrigin como true . Esta configuração também habilitará o comando cy.session() e substituirá a configuração experimentalSessionSupport anterior que foi removida e gerará um erro. Alternar essa configuração impõe o isolamento de teste e outras alterações potencialmente importantes, portanto, revise as informações de atualização na documentação da API do comando cy.origin().

Gostaríamos de ouví-lo(a)!

A equipe do Cypress tem trabalhado muito para oferecer essa experiência aprimorada. Estamos entusiasmados em trazer essas novas APIs para os(as) usuários(as) do Cypress e, como sempre, estamos ansiosos para ouvir seus comentários.

Você pode participar de discussões sobre o comando cy.origin() no GitHub ou conversar conosco no Discord. Especialmente enquanto esse recurso é experimental, os envios de problemas são críticos. Obrigado por seu apoio e bons testes!