如何在 Cypress 测试中重新加载样式，而无需停止 Cypress UI（打开）并重新运行它？

Question

我正在开发一系列项目，其中运行了一个观察程序，每次我更改某些内容时，它都会重新编译我的 JS 和 SCSS 文件。

但是当我进行这些样式更改并重新运行我的 Cypress 测试时，测试不会看到我的更改。

示例

body {
  padding: 10px;
} 

使用以下命令启动 Cypress：

npx cypress open

并使用以下命令运行测试：

cy.get('body').should('have.css', 'padding', '10px');

成功！

现在，虽然“Cypress Open”-UI 仍然打开，我将我的 SCSS 修改为：

body {
  padding: 20px; // 20px instead of 10px
} 

观察者编译一个新的

base.css

文件。如果我在“常规浏览器”中刷新该网站，我会立即看到更改。

但是当我重新运行我的赛普拉斯测试时，仍然是这样：

cy.get('body').should('have.css', 'padding', '10px'); // Now asserting 20px to be 10px

但还是成功了(!?!?).
这一定是因为它没有“找到”新编译的

.css

文件或其他东西。

作为调试尝试，我尝试加载一个新页面，如下所示：

cy.visit('/?foobar'); // To bust the cache
cy.get('body').should('have.css', 'padding', '10px'); // Still asserting 20px to be 10px

它仍然成功（错误地）。咕噜！

如果我完全停止 Cypress 并重新运行：

npx open cypress

，那么它就可以工作：

cy.visit('/');
cy.get('body').should('have.css', 'padding', '10px'); // Trying to assert 20px to be 10px

然后它失败了（理应如此）。

---

首要问题

如何让 Cypress 在我的观察者编译新样式表后“查看我新捆绑/编译的样式表”，而无需停止并启动 Cypress UI？

或者我如何在这里调试我的问题？

---

关于项目

这是一个 WordPress 项目，有很多自定义代码。它使用 Webpack 来编译资产。没有热重载。

我可以看到样式是这样加载的：

<link rel='stylesheet' id='project-id-base-css' href='http://project-slug.test/wp-content/themes/CUSTOMTHEME/assets/dist/css/base.css?r=e7699c8a4f2ec1f8c9f818d804a3e186' type='text/css' media='all' />

并且

?r=e7699c8a4f2ec1f8c9f818d804a3e186

在刷新之间不会改变，因为那是我所在的 git 提交哈希。

解决方案尝试1：更改样式上的获取参数

add_filter('style_loader_src', function ($href) {
    if (strpos($href, "base.css") !== false) { 
        return add_query_arg('r', time(), $href);
    }
    return $href;
});

这有效！

但是最好告诉 Cypress：“仅仅因为样式表上有一个 get 参数，请不要缓存它”。可以吗？

Answer 1

您可能需要为 Cypress 设置 webpack 预处理器，以便 Cypress 收到非 Cypress 文件更改的警报。