如何使用 Cypress 为 Vue Tailwind CSS 应用程序编写 e2e 测试？

Question

当我查看 Cypress.io 文档时，有一些关于如何编写测试的示例，并且它们使用了类选择器很多。我的问题是，我的 TailwindCSS 应用程序实际上并没有这些类型的类，而是有许多小类，这些类对于测试目标来说非常脆弱。为 Tailwind 应用程序编写 e2e 测试的好解决方案是什么？

文档中的示例：

it('adds todos', () => {
  cy.visit('https://todo.app.com')

  cy.get('.new-input').type('write code{enter}').type('write tests{enter}')

  cy.get('li.todo').should('have.length', 2)

  cy.get('.action-email').type('[email protected]').should('have.value', '[email protected]')
})

但是我的应用程序看起来一点也不像，我没有这样的类选择器：

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <span class="absolute inset-0 bg-center"></span>

  <div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md">
      <img v-if="showLogo" src="logo.svg" class="h-6" />
      
      <div class="divide-y divide-gray-300/50">
        <div class="space-y-6 py-8 text-base leading-7 text-gray-600">
          My todo app
        </div>

        <button @click="createTodo" class="bg-white rouned-full px-2 py-4 border border-gray-200">
          Create a new todo
        </button>
      </div>
    </div>
  </div>
</div>

尝试针对像这样的许多类不是愚蠢且脆弱吗？有更好的选择吗？

it('adds todos', () => {
  cy.visit('https://todo.app.com')

  cy.get('.bg-white.rouned-full.px-2.py-4.border.border-gray-200').first().click()
  cy.get('.space-y-6.py-8.text-base.leading-7.text-gray-600').should('have.value', 'fake todo')
})

Answer 1

考虑使用 data-cy 属性，这是 Cypress 的建议。它很实用，因为您确切地知道哪些元素被标记，但可能会耗费大量人力。

// Example - cypress.io

<div class="container">
  <h1 class="Hero-TagLine mt-0" data-cy="tag-line" style="font-size:5.6rem;line-height:7rem">
    <div>The web has evolved.<br>Finally, testing has too.</div>
  </h1>
  <h2 class="Hero-ByLine mb-0" data-cy="by-line">Fast, easy and reliable testing...

测试库的建议是使用角色文本和咏叹调属性。

还可以考虑使用遍历命令从关键元素进行导航。