Cypress 如何更改文档'；正在测试的应用程序的HTML（AUT）？_Cypress

Cypress 如何更改文档'；正在测试的应用程序的HTML（AUT）？

cypress

Cypress 如何更改文档'；正在测试的应用程序的HTML（AUT）？,cypress,Cypress,我试图重写测试中的完整页面，以包含本地内容。我试图抓住html元素并将其全部替换。我要为图像添加base64数据，但我希望看到文本作为一个开始访问本地HTML文件无效。正在寻找解决办法 cy.visit('/') cy.get('html') .invoke('attr', 'innerHTML', '<head></head><body><h1>Hello</h1><body>') cy.visit（'/'））

我试图重写测试中的完整页面，以包含本地内容。我试图抓住html元素并将其全部替换。我要为图像添加base64数据，但我希望看到文本作为一个开始

访问本地HTML文件无效。正在寻找解决办法

cy.visit('/')
cy.get('html')
    .invoke('attr', 'innerHTML', '<head></head><body><h1>Hello</h1><body>')

cy.visit（'/'））
cy.get（'html'）
.invoke（'attr'，'innerHTML'，'Hello'）

注意：如果您只是尝试在本地文件系统上测试文件，请查看设置一个简单的静态文件服务器，例如，在运行Cypress之前启动它

话虽如此，这里给出了一个如何在测试期间手动更改HTML的答案，这对于某些场景可能仍然很有用

.invoke（'attr'）

调用jQuery的方法，该方法在

HTML

（

document.documentElement

）元素上设置HTML属性

（旁注：jQuery从何而来？Cypress将基于DOM的Cypress命令生成的DOM元素包装到jQuery对象中，以便您可以在这些元素上进一步使用jQuery方法。事实上，

cy.get（选择器）

使用jQuery进行选择，因此您可以在

cy.get

命令中使用任何与jQuery兼容的选择器）

要设置它的

innerHTML

，您不需要设置属性，而是要设置它的DOM属性——因此调用jQuery的方法：

cy.get（'html'）。调用（'prop'，'innerHTML'，'Hello'）；

或者更好地使用jQuery的方法：

cy.get（'html'）.invoke（'html'，'Hello'）；

顺便说一句，如果您最终需要更多的控制，您也可以在回调中操作文档HTML，而无需jQuery：

cy.document（）.then（document=>{
document.documentElement.innerHTML=`
.项目{颜色：红色}
你好
`;
});

也就是说，如果您只设置内容，我将操作

body

元素：

cy.get（'body'）.invoke（'html'，'oi！'）；
//或
cy.document（）。然后（document=>{
document.body.innerHTML='hello'；
});

使用.invoke（'prop'，'innerHTML'）功能强大，因为它可以让您访问要保存或检查的文档的整个HTML。