Testing copy to clipboard with Cypress
Tags: cypress, testing, clipboard, automation
Published: 2022-09-09 13:12:02

## 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**](https://cypress.io/)?

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.

```html
<!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`.

```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()`](https://on.cypress.io/window) command, in which I chain the [`.then()`](https://on.cypress.io/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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mq65tpjf2jsaxnwcgz11.gif)

Also, see the complete code on [**GitHub**](https://github.com/wlsf82/copy-to-clipboard).

Take the opportunity to leave it a ⭐!

___

**Reference:** https://www.w3schools.com/howto/howto_js_copy_clipboard.asp.

___

Did you like the content? Leave a comment.

___

Curious and want to learn more about **Cypress Testing Automation**? Check out my courses on [**Udemy**](https://udemy.com/user/walmyr).

___

👋 Until next time, and happy testing!

___

This post was originally published in Portuguese at the [**Talking About Testing**](https://talkingabouttesting.com/2022/06/06/testando-a-copia-para-a-area-de-transferencia-com-cypress/) blog.