我正在尝试重写测试中的完整页面以包含本地内容。我试图抓住 html 元素并将其全部替换。我有要为图像添加的 Base64 数据，但我希望看到文本作为开始。
访问本地 HTML 文件不起作用。寻找解决方法。
cy.visit('/')
cy.get('html')
.invoke('attr', 'innerHTML', '<head></head><body><h1>Hello</h1><body>')
注意：如果您只是想测试本地文件系统上的文件，请查看设置一个简单的静态文件服务器，例如http-server，并在运行 Cypress 之前启动它。
话虽如此，这里有一个如何在测试期间手动更改 HTML 的答案，这对于某些场景可能仍然有用。
.invoke('attr')调用 jQuery 的方法，该方法在( ) 元素上attr()设置 HTML属性。htmldocument.documentElement
（旁注：jQuery 从哪里来？Cypress 将基于 DOM 的 Cypress 命令生成的 DOM 元素包装到 jQuery 对象中，以便您可以进一步在这些元素上使用 jQuery 方法。事实上，使用 jQuery 进行cy.get(selector)选择，因此您可以使用任何命令中的 jQuery 兼容选择器cy.get）。
要设置它innerHTML，你不想设置一个属性，而是设置它的 DOM属性——因此调用 jQuery 的prop方法：
cy.get('html').invoke('prop', 'innerHTML', '<head></head><body><h1>Hello</h1><body>');
或者更好的是，使用 jQuery 的html方法：
cy.get('html').invoke('html', '<head></head><body><h1>Hello</h1><body>');
顺便说一句，如果您最终需要更多控制，您还可以在没有jQuery 的回调中操作文档 HTML ：
cy.document().then( document => {
document.documentElement.innerHTML = `
<style>.item { color: red }</style>
<body>
<div class="item">hello</div>
</body>
`;
});
话虽如此，如果您只设置内容，我会操作body元素：
cy.get('body').invoke('html', '<div>oi!</div>');
// or
cy.document().then( document => {
document.body.innerHTML = '<div>hello</div>';
});
| 归档时间： |
|
| 查看次数： |
2985 次 |
| 最近记录： |