如何在 cypress 12 中授予 Chrome 剪贴板权限

Question

我正在使用 Javascript 测试“复制到剪贴板”在 Cypress 中的工作原理，为此我使用了 w3schools 网站。

这是代码：

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

我尝试使用以下视频授予 Chrome 浏览器剪贴板权限 https://www.youtube.com/watch?v=4eEc3x24D64&t=210s

但是，cypress 错误消息显示该权限仍未授予。 未授予剪贴板权限。我是否错过了一些额外的设置或调整？那里的答案不起作用，因为 cypress.json 文件被替换为 cypress.config.js

Answer 1

如果您使用的是最新的 Cypress 版本 12.9.0，该invoke()命令已更改为查询，从而改变了其工作方式。我认为这导致了你的错误。

你可以代替.then()。

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

同时将 CDP 移至顶部 - 完整结构：

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

Answer 2

您可以使用cy.stub()或cy.spy()来捕获剪贴板活动。

请注意，应用程序还有其他方式与剪贴板交互，因此这仅限于您正在测试的特定页面。

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