如何为在Cypress中只有“span”和“class”的弹出元素编写定位器？

Question

所以我对Cypress还不熟悉，并且尝试了一个基本的自动化测试。在登录页面上，当电子邮件不是有效的格式时，会弹出一个错误，我必须断言它，但是我被困在测试中，因为我无法得到错误消息。我无法在cy.get()的帮助下编写正确的选择器，下面是页面弹出的HTML。

<div data-v-666984d3="" class="modal-overlay flex flex-col z-50 w-1/2" xpath="1">
<div data-v-666984d3="" class="flex flex-col flex-1 mt-[70px]">
<div data-v-666984d3="" class="flex flex-row justify-end">
<div data-v-666984d3="" class="flex justify-between w-2/3 mr-2 p-5 bg-red-500">
<div data-v-666984d3="" class="flex flex-col justify-center w-full">
<span data-v-666984d3="" class="font-normal md:text-md text-center flex-4 text-white">
        Email is not in a valid format.</span></div> 
<div data-v-666984d3="" class="flex justify-end p-2">
<a data-v-666984d3="" href="#" class="text-white">
<svg data-v-666984d3="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 
24" stroke="currentColor" class="h-6 w-6 text-white"><path data-v-666984d3="" stroke- 
linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>

这个页面看起来像这个请点击这里

到目前为止，这是我的代码：

/// <reference types="cypress" />

describe('Negative Login Test Case', () => {
beforeEach(() => {
    cy.visit('https://manager.xogo.io')
})
it('.should() - Verify the quick start guide is present', () => {
cy.get('.font-semibold')
.should('have.text', '\n        Got questions? Checkout our Quick Start Guide to see how 
it all works\n      ')
})
it('.type() - type email and password', () => {
cy.get('#email_1')
.type('ss@xogo.io').should('have.value','ss@xogo.io')
cy.get('#password_2')
.type('Balaji2022').should('have.value', 'Balaji2022')
})
it('.contains() - Click on the login button and get the pop-up', () => {
cy.get('button').contains('Login').click()
cy.get('span').should('have.class', 'font-normal md:text-md text-center flex-4 text- 
white')
.contains('    Email is not in a valid format.')
}) 
}) 

任何建议都将不胜感激，答案也会很好。感谢我的同事们的帮助..。非常感谢。

Answer 1

只管用

cy.contains('span', 'Email is not in a valid format.').should('be.visible')

忘记这些类，它们是用于格式化的，会随着时间的推移而改变，并且会破坏您的测试。您只想断言正在显示的错误文本。

Answer 2

我还建议使用：

cy.contains('Email is not in a valid format.').should('be.visible')

此外，还有一件事是尝试在团队中要求(更好地使用devs)，在代码中包含一些定制属性，比如data-testId，这样您就不必编写复杂的选择器，这些选择器会随着时间的推移而过时，使测试变得不堪一击。所以，上面提到的代码最后看起来如下所示：

    <div data-v-666984d3="" class="modal-overlay flex flex-col z-50 w-1/2" xpath="1">
<div data-v-666984d3="" class="flex flex-col flex-1 mt-[70px]">
<div data-v-666984d3="" class="flex flex-row justify-end">
<div data-v-666984d3="" class="flex justify-between w-2/3 mr-2 p-5 bg-red-500">
<div data-v-666984d3="" class="flex flex-col justify-center w-full">
<span data-v-666984d3="" data-testId='invalid_credentials_text' class="font-normal md:text-md text-center flex-4 text-white">
        Email is not in a valid format.</span></div> 
<div data-v-666984d3="" class="flex justify-end p-2">
<a data-v-666984d3="" href="#" class="text-white">
<svg data-v-666984d3="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 
24" stroke="currentColor" class="h-6 w-6 text-white"><path data-v-666984d3="" stroke- 
linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>