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

【问题标题】：Cypress/VueJS Selecting Element that is dynamically added after another actionCypress/VueJS 选择在另一个动作之后动态添加的元素
【发布时间】：2022-01-09 21:34:58
【问题描述】：

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

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

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

【问题讨论】：

您是否检查过该按钮是否真的可见/存在？试着做一个截图？没有动画发生？
按钮肯定在那里。它被一个简单的v-if隐藏了
v-if 在条件为 false 时从 DOM 中移除按钮。（不像v-show）
您是否为此使用了超时。如果出现时间超过 4 秒 .should('exist',{timeout: 5000})
我正在试验，只是向按钮添加了一个自定义类。然后我就可以瞄准它了。不知道为什么会这样，但似乎暂时有效

标签： javascript vue.js testing automated-tests cypress

【解决方案1】：

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

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

像这样分两部分做

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

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

【讨论】：