运行 Cypress 使用 TailwindCSS 3 进行测试

Question

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

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

例如，测试在单击固定且全宽的叠加层时模态是否关闭，因为整个模态已呈现，因此 Cypress 无法访问它。

由于无法访问 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'，它需要一个预编译的包。如果您在 tailwind 配置中添加了任何自定义项，则不会涵盖这些内容。

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

的 cdn 版本

因为您运行它正在测试中并且不想增加使用远程依赖项可能的“脆弱性”，您可能想要下载该文件并将其保存在 repo 中并且不时手动更新它。您还可以使用一些自动化功能在运行测试之前从 cdn 获取正确的版本，但理想情况下您会使用生成的 css，因为这就是您要运送的内容，所以这是应该的资源正在接受测试。

Answer 2

您可以使用 Tailwind CLI 即时生成样式表。

在 cypress/plugins/tailwind.js 中添加此插件（确保将 -i 源从 ./src/styles/globals.css 更改为您的基础 CSS 文件：

before(() => {
  cy.exec('npx tailwindcss -i ./src/styles/globals.css -m').then(
    ({ stdout }) => {
      if (!document.head.querySelector('#tailwind-style')) {
        const link = document.createElement('style')
        link.id = 'tailwind-style'
        link.innerHTML = stdout

        document.head.appendChild(link)
      }
    },
  )
})

然后，通过在 cypress/support/index.js 中导入来加载插件：

import '../plugins/tailwind'

您还应该设置一个 separate config file for your component tests，例如 cypress/support/component.js，并在您的 cypress.json 配置文件中指定：

{
  "component": {
    "supportFile": "cypress/support/component.js",
  },
  "e2e": {
    "supportFile": "cypress/support/e2e.js"
  }
}

然后，只在您的 cypress/support/component.js 配置文件中包含 import '../plugins/tailwind'，这样您就不会为 E2E 测试执行 JIT 编译（因为这是不必要的）。

运行 Cypress 使用 TailwindCSS 3 进行测试

Running Cypress tests with TailwindCSS 3

cypress

tailwind-css

vuejs3

cypress-component-test-runner