Testing copy to clipboard with Cypress

#cypress #testing #clipboard #automation

Learn how to read information saved in the browser window, such as what is held in the clipboard

Imagine a simple application with only a text input field, with a default value of Hello world, and a button called copy to clipboard, which, when clicked, copies the input text to that area, as the name suggests.

When clicked as soon as the application is visited, the text copied is Hello world.

However, when such a field is cleared, another text is typed, and the button is clicked again, the new text is copied.

And then you ask yourself.

How to test these scenario with Cypress?

Glad you asked because that's what I'm going to show you in this “Pinch of Cypress.”

The application code is summarized in the following index.html file.

<!DOCTYPE html>
<html lang="en">
  <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>

And the test code in the following file cypress/integration/copyToClipboard.spec.js.

it('copies the 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)
    })
  })
})

In the test, I first visit the application under test, i.e., the index.html file.

Then, I find the button with the text Copy to clipboard and click on it.

When the button is clicked, the default text of the input field must be copied to the clipboard, and therefore, I verify that the correct value has been copied through a custom command, which I will explain later.

Then I clear the input, type a different value and click the button again.

Finally, I verify that the new value has now been copied to the clipboard, replacing the previous one.

Now, let me explain in detail the custom command that verifies that the value was correctly copied to the clipboard.

The command receives as an argument the value to be compared, that is, the expected result.

In its implementation, I execute the cy.window() command, in which I chain the .then() command, passing to it a callback function, which takes the browser window (win) as an argument.

With access to the window (win), I access the navigator property, from there I access the clipboard property, and then I use the readText() function to read the text copied to the clipboard, where I chain another .then(), where in this case, the callback function receives the text contained in the clipboard as an argument, allowing me to check that the text is equal to the expected value.

And this is how I can test the value copied to the browser clipboard with Cypress.

See the test running in the gif below.