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/e2e/copyToClipboard.cy.js.
it('copies input field text to the clipboard', () => {
cy.visit('./index.html')
cy.contains('button', 'Copy to clipboard')
.focus()
.click()
cy.assertValueCopiedToClipboard('Hello World')
cy.get('#copy-to-clipboard-input-field')
.clear()
.type('Foo bar baz')
cy.contains('button', 'Copy to clipboard')
.focus()
.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), foco 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, foco e clico novamente 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(), e 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.
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 os cursos da Escola TAT.
- Cypress, do Zero à Nuvem
- Cypress intermediário
- Cypress avançado
- Boas práticas em automação de testes com Cypress
- Testes end-to-end com Cypress
👋 Até a próxima e bons testes!
Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.
TALKING ABOUT TESTING 
Muito boa dica, mas está retornando um erro de “NotAllowedError: Document is not focused.”. Você sabe como contorná-lo?
Realmente isso acontece ao rodar no Chrome, no Electron não percebi ocorrer.
Corrigi focando no botão antes do clique.
cy.contains(‘button’, ‘Copy to clipboard’)
.focus()
.click()
Inclusive, acabei de ajusta o conteúdo e o código no repositório do mesmo.