How to give Chrome clipboard permissions in cypress 12

Question

I am testing how "copy to clipboard" works in Cypress using Javascript and I used w3schools website for this.

Here is the code:

/// <reference types="Cypress" />

describe('w3schools', () => {
    
    it.only('using clipboard', () =>{
        cy.visit('https://www.w3schools.com/howto/howto_js_copy_clipboard.asp');

        cy.wrap( //to give permision to read write from clipboard 
            Cypress.automation('remote:debugger:protocol', {
                command: 'Browser.grantPermissions',
                params: {
                  permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
                  origin: window.location.origin,
                },
            }),
        );
                  
        cy.get('.tooltip > .w3-button').click()
        
        cy.window().its('navigator.permissions').invoke('readText')        
    }) 
       
  })

I tried to give chrome browser clipboard permissions using the following video https://www.youtube.com/watch?v=4eEc3x24D64&t=210s

However, cypress error message says the permission is still not granted. Clipboard permission not granted. Did I miss some additional settings or tweaks? The answers there did not work as cypress.json file is replaced with cypress.config.js

Answer 1

If you're using the latest Cypress version 12.9.0, the invoke() command has been changed to a query which changes the way it works. I think this is causing your error.

You can substitute .then() instead.

cy.window().its('navigator.clipboard')
  .then((clip) => clip.readText())
  .should('equal', 'Hello World')

Also move the CDP to the top - the full structure:

Cypress.automation('remote:debugger:protocol', {
  command: 'Browser.grantPermissions',
  params: {
    permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
    origin: window.location.origin,
  },
})

cy.visit('https://www.w3schools.com/howto/howto_js_copy_clipboard.asp')

cy.contains('button', 'Copy text').click()

cy.window().its('navigator.clipboard')
  .then((clip) => clip.readText())
  .should('equal', 'Hello World')