How to give Chrome clipboard permissions in cypress 12

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

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')

You can use cy.stub() or cy.spy() to catch the clipboard activity.

Note, there are other ways for the app to interact with the clipboard, so this is limited to the particular page you are testing.

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', {
  onBeforeLoad: (contentWindow) => {
    cy.spy(contentWindow.navigator.clipboard, 'writeText').as('writeText')
  }
})
  
cy.contains('button', 'Copy text').click()

cy.get('@writeText')
  .should('have.been.calledWith', 'Hello World')

On v12.7.0, you can use the following to grant clipboard permissions.

cy.window()
  .its('navigator.clipboard')
  .then((clipboard) =>
    cy
      .stub(clipboard, 'writeText')
      .resolves()
      // @ts-ignore
      .as('writeText'),
  )

then you can check the clipboard with

cy.get('@writeText')
  .should('have.been.calledOnce')
  .its('firstCall.args.0')
  .should('equal', expected)