Cypress/VueJS 选择在另一个动作之后动态添加的元素

Question

我正在测试一个功能，其中显示一个按钮供用户在他们采取另一项操作后单击。

在采取行动之前，我正在检查按钮是否存在：

cy.get('span')
    .contains('Select')
    .parent('button')
    .should('not.exist');

在操作之后，我试图找到像这样的相同按钮，但它失败了。 有人知道如何在赛普拉斯做到这一点吗？

这是我的整个代码：

cy.get('span')
    .contains('Select')
    .parent('button')
    .should('exist');

/* eslint-disable */

describe('Workgroup Switch', () => {
    beforeEach(() => {
        cy.visit('/login');
        cy.get('input[id="username"]').type('boss@example.com');
        cy.get('input[id="password"]').type('password');
        cy.get('button[id="login-button"]').click();
        cy.url().should('include', '/offers/workgroup');
    });

    it('switch workgroup', () => {
        cy.get('span')
            .contains('Select')
            .parent('button')
            .should('not.exist');

        cy.get('.v-overlay__scrim').click();

        cy.get('.text-h6')
            .contains('Workgroup #1')
            .parent()
            .parent()
            .click();

        cy.contains('Make this my default workgroup');

        cy.get('span')
            .contains('Select')
            .parent('button')
            .should('exist');
    });
});

Answer 1

您应该使用contains()的组合形式来获取正确的元素。

cy.contains('span', 'Select')
  .parent('button')
  .should('exist');

像这样分两部分做

cy.get('span')
  .contains('Select')

赛普拉斯在页面上找到第一个跨度，然后反复检查它的“选择”文本，但它不重复cy.get('span')部分。