Cypress 12中为Chrome配置剪贴板权限失败，该如何解决？

1. 修正cypress.config.js的浏览器启动配置 #

在Cypress 10+版本中，需在cypress.config.js里配置Chromium系浏览器的启动参数，强制启用剪贴板权限：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          launchOptions.args.push('--enable-clipboard-read');
          launchOptions.args.push('--enable-clipboard-write');
          launchOptions.args.push('--use-fake-ui-for-media-stream'); // 绕过手动权限弹窗
          launchOptions.args.push('--allow-clipboard-access');
        }
        return launchOptions;
      });
    },
  },
});

2. 修正测试代码中的权限授权与验证逻辑 #

原代码存在两处关键问题：origin参数取值错误、剪贴板读取方法调用错误，修正后的代码如下：

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

describe('w3schools 剪贴板测试', () => {
    
    it('测试复制到剪贴板功能', () =>{
        const targetOrigin = 'https://www.w3schools.com';
        cy.visit(`${targetOrigin}/howto/howto_js_copy_clipboard.asp`);

        // 授予剪贴板权限到目标网站上下文
        cy.wrap(
            Cypress.automation('remote:debugger:protocol', {
                command: 'Browser.grantPermissions',
                params: {
                  permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
                  origin: targetOrigin, // 明确指定目标网站origin
                  browserContextId: Cypress.browser.contextId // 绑定到当前测试上下文
                },
            }),
        );
                  
        // 点击复制按钮
        cy.get('.tooltip > .w3-button').click();

        // 验证剪贴板内容（原代码错误调用了navigator.permissions，需改用navigator.clipboard）
        cy.window().its('navigator.clipboard')
          .invoke('readText')
          .should('eq', 'Hello World'); // 匹配页面中预设的复制文本
    }) 
})

3. 核心注意点 #

• 权限授权需明确指定目标网站的origin，避免使用window.location.origin（该值在Cypress Node环境中并非测试页面的origin）。
• 必须将权限绑定到当前测试的浏览器上下文，添加browserContextId参数确保权限生效范围正确。
• 剪贴板读取方法属于navigator.clipboard对象，而非navigator.permissions，需修正调用路径。

内容的提问来源于stack exchange，提问作者Abhishek