如何使用 Cypress 为 Vue Tailwind CSS 应用编写 2e2 测试？

Question

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

来自文档的示例：

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('fake@email.com').should('have.value', 'fake@email.com')
})

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

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

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

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

考虑使用 Cypress 推荐的 data-cy attributes。这很实用，因为您确切地知道哪些元素被标记了，但可能是 labour-intensive.

// 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...

Testing Library 的建议是使用角色文本和 aria 属性。

同时考虑使用 traversal commands 从关键元素导航。

如何使用 Cypress 为 Vue Tailwind CSS 应用编写 2e2 测试？

How to write 2e2 tests with Cypress for a Vue Tailwind CSS app?

javascript

vue.js

testing

cypress

tailwind-css