Aprenda como ler informações salvas na janela do navegador, tal como o que é salvo na área de transferência

Imagine uma aplicação simples, a qual possui somente um input do tipo texto, com um valor padrão (por exemplo, Olá mundo) e um botão chamado copiar para a área de transferência, o qual quando clicado, copia o texto do input para tal área, como o nome sugere.

Quando clicado logo que a aplicação é visitada, o texto copiado é Olá mundo.

Porém, quando tal texto é apagado, outro texto é digitado e então o botão é clicado, o novo texto é copiado.

E aí você se pergunta.

E como testar estes cenários com Cypress?

Que bom que perguntou, pois é isso que vou te mostrar nesta “pitada de Cypress”.

O código da aplicação se resume ao seguinte arquivo index.html.

<!DOCTYPE html>
<html>
  <head>
    <title>Copy to clipboard example page</title>
    <style>
      * {
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Copy to clipboard sample</h1>
    <input type="text" value="Hello World" id="copy-to-clipboard-input-field">
    <button onclick="copyToClipboard()">Copy to clipboard</button>
    <script>
      function copyToClipboard() {
        const copyText = document.getElementById("copy-to-clipboard-input-field")

        copyText.select() // Select the text field
        copyText.setSelectionRange(0, 99999) // For mobile devices

        // Copy the text inside the text field
        navigator.clipboard.writeText(copyText.value)
      }
    </script>
  </body>
</html>

E o código do teste ao seguinte arquivo cypress/integration/copyToClipboard.spec.js.

it('copies input field text to the clipboard', () => {
  cy.visit('./index.html')

  cy.contains('button', 'Copy to clipboard').click()

  cy.assertValueCopiedToClipboard('Hello World')

  cy.get('#copy-to-clipboard-input-field')
    .clear()
    .type('Foo bar baz')

  cy.contains('button', 'Copy to clipboard').click()

  cy.assertValueCopiedToClipboard('Foo bar baz')
})

Cypress.Commands.add('assertValueCopiedToClipboard', value => {
  cy.window().then(win => {
    win.navigator.clipboard.readText().then(text => {
      expect(text).to.eq(value)
    })
  })
})

No teste, primeiro visito a aplicação em teste, ou seja, o arquivo index.html.

Então encontro o botão com o texto Copy to clipboard (copiar para a área de transferência em inglês) e clico nele.

Quando o botão é clicado, o texto padrão do input do tipo texto deve ser copiado para a área de transferência, e portanto, faço a verificação de que o valor correto foi copiado, por meio de um comando customizado, o qual explicarei logo mais.

Depois, limpo o input, digito um valor diferente e novamente clico no botão.

Por fim, verifico que o novo valor agora foi copiado para a área de transferência, substituindo o valor anterior.

Agora deixa eu te explicar em detalhes o comando customizado que verifica que o valor foi corretamente copiado para a área de transferência.

O comando recebe como argumento o valor a ser comparado (value), ou seja, o resultado esperado.

Em sua implementação, executo o comando cy.window(), no qual encadeio o comando .then(), passando à ele uma função de callback, a qual recebe como argumento a janela do navegador (win).

Com acesso a janela (win), acesso a propriedade navigator, a partir dela acesso a propriedade clipboard, e então uso a função readText() para ler o texto copiado ao clipboard, onde encadeio outro .then(), onde neste caso, a função de callback recebe como argumento o texto (text) contido na área de transferência, me possibilitando realizar a verificação de que o texto (text) é igual ao valor esperado (value).

E é assim que consigo testar com Cypress o valor copiado para a área de transferência do navegador.

Veja o teste executando no gif abaixo.

ezgif.com-gif-maker

E veja também o código completo no GitHub.

Aproveite pra deixar uma estrela!


Referência: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp.


Gostou dessa “pitada de Cypress”?

Deixa um comentário.


Ficou curioso(a) e quer aprender mais sobre automação de testes com Cypress? Conheça meus cursos no Udemy.


👋  Até a próxima e bons testes!

Um comentário em “Testando a cópia para a área de transferência com Cypress

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s