javascript - 在reactjs项目中粘贴cypress测试

Question

有什么想法如何在 Cypress 中与 React 捆绑在一起模拟 粘贴 操作吗？

我的测试应该在粘贴操作后立即检查值。

我发现很少solutions基于 DOM 操作，因为正如作者所说，它将更改直接粘贴到 DOM 输入字段，然后调用 change 事件。

我尝试过cy.get(selector).invoke('val', '复制粘贴文本').trigger('change');

这些解决方案无法按预期工作，因为 React 会自行操作 DOM，因此通过建议的方式“粘贴”会将更改直接推送到输入值，并且违反了 React 工作流程。

谢谢

Answer 1

我认为这段代码可以帮助你:

添加到命令:

Cypress.Commands.add("paste", { prevSubject: true }, (selector, pastePayload) => {
  // 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);
  });
});

用法:

cy.getByTestId("some-input-test-id").paste('some text');

此示例与互联网上的其他示例之间的主要区别在于，您的插件可能在捕获“真正”粘贴的内容时遇到问题。所以即在blueprint中回调onItemsPaste不会捕获任何东西。 Original版本。