當我查看 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')
})
uj5u.com熱心網友回復：
考慮使用賽普拉斯推薦的data-cy 屬性。這是務實的，因為您確切知道哪些元素被標記，但可能是勞動密集型的。
// Example - cypress.io
<div class="container">
<h1 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 data-cy="by-line">Fast, easy and reliable testing...
測驗庫的建議是使用角色文本和 aria 屬性。
還可以考慮使用遍歷命令從關鍵元素導航。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/477534.html
標籤：javascript Vue.js 测试 柏 顺风CSS