在Cypress TypeScript中模拟粘贴事件遇阻，求有效解决方案

问题背景 #

在Cypress + TypeScript环境下，模拟用户「点击Copy按钮后将内容粘贴到文本框」的行为时，尝试了多种从JavaScript转译的方案均无效，需排查问题并找到可行的TypeScript实现方案。

已尝试的无效方案 #

方案1：自定义paste命令（添加至commands.ts） #

paste(input: string | { pastePayload: string; pasteType: string }): Chainable<JQuery<HTMLElement>>,

Cypress.Commands.add('paste', { prevSubject: true }, (subject, pasteInput) => {
    const isSimpleText = typeof pasteInput === 'string';
  
    const pastePayload = isSimpleText ? pasteInput : pasteInput.pastePayload;
    const pasteType = isSimpleText ? 'text/plain' : pasteInput.pasteType || 'text/plain';
  
    const data = pasteType === 'application/json' ? JSON.stringify(pastePayload) : pastePayload;
  
    const clipboardData = new DataTransfer();
    clipboardData.setData(pasteType, data);
  
    const pasteEvent = new ClipboardEvent('paste', {
      clipboardData
    });
    subject[0].dispatchEvent(pasteEvent);
  
    return subject;
  });

使用示例：

cy.window().then(win => {
    win.navigator.clipboard.readText().then(classCodeFromClipboard => {
        let classCode = classCodeFromClipboard
        element.paste(classCode)
    })
})

方案2：直接触发paste事件 #

element.trigger('paste')

方案3：通过调试协议授权剪贴板权限 #

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

cy.get('@copiedClassCode').then(copiedClassCode => {
    let copyClass = String(copiedClassCode)
    cy.window().its('navigator.permissions').invoke('query', {name: 'clipboard-read'}).its('state').then(cy.log)
    cy.window().its('navigator.clipboard').invoke('readText').should('eq', copyClass)
})

方案4：模拟快捷键粘贴 #

element.type('{ctrl}', {release: false}).type('v')

方案5：自定义paste命令（另一种实现） #

Cypress.Commands.add('paste', { prevSubject: true }, (selector: any, pastePayload: any) => {
    cy.wrap(selector).then($destination => {
      const pasteEvent = Object.assign(new Event("paste", { bubbles: true, cancelable: true }), {
        clipboardData: {
          getData: () => pastePayload
        }
      });
      $destination[0].dispatchEvent(pasteEvent);
    });
  });

使用示例：

cy.window().then(win => {
    win.navigator.clipboard.readText().then(classCodeFromClipboard => {
        let classCode = classCodeFromClipboard
        element.paste(classCode)
    })
})

可行解决方案（TypeScript版本） #

1. 修复自定义paste命令的核心问题 #

之前的方案失效多因元素未聚焦、事件参数不完整或TypeScript类型缺失，以下是修正后的命令：

首先在commands.ts中完善类型声明与逻辑：

// 扩展Cypress全局类型，避免类型报错
declare global {
  namespace Cypress {
    interface Chainable {
      paste(pastePayload: string, pasteType?: string): Chainable<JQuery<HTMLElement>>;
    }
  }
}

Cypress.Commands.add('paste', { prevSubject: true }, (subject, pastePayload: string, pasteType = 'text/plain') => {
  // 必须先让目标元素获得焦点，否则粘贴事件无法被捕获
  cy.wrap(subject).focus();

  const data = pasteType === 'application/json' ? JSON.stringify(pastePayload) : pastePayload;
  const clipboardData = new DataTransfer();
  clipboardData.setData(pasteType, data);

  // 构造符合DOM规范的粘贴事件，添加冒泡与可取消属性
  const pasteEvent = new ClipboardEvent('paste', {
    clipboardData,
    bubbles: true,
    cancelable: true
  });

  subject[0].dispatchEvent(pasteEvent);
  return cy.wrap(subject);
});

2. 正确使用paste命令 #

无需访问真实剪贴板（Cypress沙箱环境下该API受限制），直接传入待粘贴内容即可：

// 先模拟点击复制按钮
cy.get('[data-testid="copy-btn"]').click();

// 提取复制的内容（可从页面元素获取或直接用预期值）
cy.get('[data-testid="copy-content"]').invoke('text').then(copiedText => {
  // 聚焦输入框并执行粘贴
  cy.get('[data-testid="paste-input"]').paste(copiedText);
});

3. 简化方案（无需模拟粘贴事件） #

若测试仅需验证最终结果，可直接设置输入框值：

cy.get('[data-testid="paste-input"]').invoke('val', copiedText).trigger('input');

关键注意事项 #

• 粘贴前必须确保目标元素处于聚焦状态，否则事件无法被页面监听器捕获；
• Cypress沙箱环境限制navigator.clipboard API，建议直接传入内容而非读取真实剪贴板；
• 必须扩展Cypress的TypeScript类型声明，否则自定义命令会出现类型错误；
• 构造ClipboardEvent时需添加bubbles: true和cancelable: true，确保事件符合DOM事件规范。

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