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

Michael Hays 的解决方案有效，但每次更改代码时都会重建整个.css文件，这会减慢测试速度。 另一种方法是在手表模式下在外部运行 tailwind。

npm i -D concurrently

package.json

  "scripts": {
    "test": "concurrently \"tailwindcss -i ./src/index.css -o ./dist/index.css --watch\" \"cypress open\" "
  },

赛普拉斯/支持/component.ts

import "../../dist/index.css";

Answer 2

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

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

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

Answer 3

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

在cypress/plugins/tailwind.js 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"
  }
}

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