使用 TailwindCSS 3 运行 Cypress 测试

Question

我通过 cypress open-ct 运行组件测试已有一段时间了，依赖于导入 /node_modules/tailwindcss/dist/tailwindcss.min.css。

自从升级到 Tailwind v3 后，我的一些测试失败了，因为没有可以导入的预构建 CSS 文件 - 一切都是及时生成的。

例如，当单击固定且全宽的覆盖时测试模态是否关闭失败，因为整个模态被渲染，赛普拉斯无法访问。

另一个因无法访问 Tailwind 类而产生的附带问题是，在 CI 中运行测试时录制的视频无法使用，因为它们只是一堆随机的原生元素。

我一直在每个测试文件的顶部像这样导入 Tailwind（在描述之前）

import { mount } from '@cypress/vue'
import '/node_modules/tailwindcss/dist/tailwind.min.css'
import MultiSelectField from './MultiSelectField.vue'
import { ref } from "vue";

任何想法如何包含 Tailwind（最好是全局）以使测试不会失败？

Answer 1

我看到您正在使用 import '/node_modules/tailwindcss/dist/tailwind.min.css'，它需要一个预编译的捆绑包。如果您在顺风配置中添加了任何自定义内容，则不会涵盖这些内容。

但是如果你不能使用生成的 css 并且没有任何顺风自定义，你可以使用来自https://cdn.tailwindcss.com/ 的 cdn 版本

因为您在测试中运行它并且不想增加使用远程依赖的可能“不稳定”，您可能希望下载该文件并将其保存在存储库中并不时手动更新它时间。在运行测试之前，您还可以使用一些自动化从 cdn 获取正确的版本，但理想情况下，您会使用生成的 css，因为这是您要交付的内容，因此这是应该进行测试的资源。