gpt4 book ai didi

cypress - 如何更改被测应用程序 (AUT) 的文档 HTML?

转载 作者:行者123 更新时间:2023-12-04 13:17:34 26 4
gpt4 key购买 nike

我正在尝试重写整个测试页面以包含本地内容。我试图获取 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 上设置 HTML 属性的方法( document.documentElement ) 元素。

(旁注:jQuery 来自哪里?Cypress 将从基于 DOM 的 Cypress 命令产生的 DOM 元素包装到 jQuery 对象中,以便您可以进一步对这些元素使用 jQuery 方法。实际上,cy.get(selector) 使用 jQuery 进行选择,因此您可以在 cy.get 命令中使用任何与 jQuery 兼容的选择器)。

设置其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>';
});

关于cypress - 如何更改被测应用程序 (AUT) 的文档 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58720705/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com