测试场景中的 Cypress 和脚本注入

Question

我对 Cypress 还很陌生，目前我正在尝试测试使用我创建的浏览器扩展的网页。此扩展仅向网页注入一组 JS 和 CSS 文件，我想在集成测试中模拟相同的事情，以便能够注入库并测试行为。我想知道是否有一种方法可以从 Cypress 测试访问文档对象，以将 CSS 或 JavaScript 注入到网页的头部。

Answer 1

就在这里。Cypress 实际上是在浏览器中运行的，尽管命令是异步排队的，但您可以将要运行的本机 JS 代码排队，如下所示：

cy.get("html").then(() => {
    document.querySelector("div.myDiv").innerHTML = "...";
    // ...
});

如果您尝试定位或修改特定元素，您可以通过 Cypress 获取它，以利用自动重试等待该元素存在，然后再对其进行操作：

cy.get("div.myDiv").then(elem => {
    elem.innerHTML = "...";
    // ...
});