使用 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

您可以使用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'

您还应该为组件测试设置一个单独的配置文件，例如cypress/support/component.js，并在配置文件中指定cypress.json：

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

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