有什么想法如何在 Cypress 中与 React 捆绑在一起模拟 粘贴 操作吗?
我的测试应该在粘贴操作后立即检查值。
我发现很少solutions基于 DOM 操作,因为正如作者所说,它将更改直接粘贴到 DOM 输入字段,然后调用 change 事件。
我尝试过cy.get(selector).invoke('val', '复制粘贴文本').trigger('change');
这些解决方案无法按预期工作,因为 React 会自行操作 DOM,因此通过建议的方式“粘贴”会将更改直接推送到输入值,并且违反了 React 工作流程。
谢谢
最佳答案
我认为这段代码可以帮助你:
添加到命令:
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版本。
关于javascript - 在reactjs项目中粘贴cypress测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60111777/