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

Question

我正在测试一项功能，其中会显示一个按钮供用户在执行其他操作后单击。

在执行操作之前，我正在检查按钮是否存在：

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

在操作之后，我试图找到与此相同的按钮，但它失败了。有人知道如何在 Cypress 中执行此操作吗？

这是我的全部代码：

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

Cypress 在页面上找到第一个 span，然后重复检查它的文本是否有“Select”，但它不会重复 cy.get('span') 部分。

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

Cypress/VueJS Selecting Element that is dynamically added after another action

javascript

testing

automated-tests

vue.js

cypress