在 Cypress Typescript 中模拟剪贴板粘贴

Question

当我试图寻找在 Cypress Typescript 中模拟粘贴事件的解决方案时，我遇到了一些问题。我找到的大多数解决方案都是用 JavaScript 编写的，但到目前为止还没有一个有效。 :/

场景：用户单击“复制”按钮，然后将值粘贴到文本字段中。

我尝试了以下方法，但它们不起作用（这些在 JS 中，但我需要它在 TS 中）。有什么我想补充的吗？目前没有一个起作用，我已经被困在这个问题上好几天了。谢谢！

试用1：（不起作用，在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;
  });

用法1：

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

试用2：（不起作用）

element.trigger('paste')

试用3：（不起作用，从这里尝试过https://www.youtube.com/watch?v=4eEc3x24D64）

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：（不起作用）

Cypress.Commands.add('paste', { prevSubject: true }, (selector: any, pastePayload: any) => {
    // https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
    cy.wrap(selector).then($destination => {
      const pasteEvent = Object.assign(new Event("paste", { bubbles: true, cancelable: true }), {
        clipboardData: {
          getData: () => pastePayload
        }
      });
      $destination[0].dispatchEvent(pasteEvent);
    });
  });

用法5：

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

Answer 1

你不能再这样做了（参见 Gleb 的评论）。

但是，如果您只需要验证值是否已正确复制，则可以使用存根。

cy.visit(myUrl, {
  onBeforeLoad: (win) => {
    cy.stub(win.navigator.clipboard, 'writeText').as('writeText')
  },
})
cy.contains('Copy text').click()
cy.get('@writeText').should(
  'have.been.calledOnceWith',
  Cypress.sinon.match.string,
)