Cypress and VueJS: How to target elements that are dynamically generated following a specific user interaction

I am currently testing a new feature where a button will only appear for the user to click after they have completed another action.

Before proceeding with the action, I am verifying if the button exists:

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

However, after completing the action, I am having difficulty finding the same button. Does anyone know how to achieve this in Cypress?

Below is my complete code:

cy.get('span')
    .contains('Select')
    .parent('button')
    .should('exist');
/* eslint-disable */

describe('Workgroup Switch', () => {
    beforeEach(() => {
        cy.visit('/login');
        cy.get('input[id="username"]').type('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d313102273a232f322e276c">[email protected]</a>');
        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

The best way to retrieve the correct element is by utilizing the combined form of contains().

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

An alternative approach is to break it into two steps like so:

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

When using Cypress, it locates the initial span on the webpage and then continuously checks its text for "Select", without repeating the cy.get('span') section.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to displaying aggregated table field values in an input field when checking the checkbox

How can I retrieve the value of the second span and display it in an input field when a checkbox is checked? For example, if there are values like 500 in the first row and 200 in the second row, when the checkbox in the first row is ticked, the value of 50 ...

Displaying nested JSON data in a user interface using React

I have a complex nested JSON structure that I am using to build a user interface. While I have successfully implemented the first part, I am encountering difficulties with the second part. My Objective The nested JSON displays parent elements and now I a ...

Include an additional section in the stunning Radar Chart

I am trying to use the amCharts 4 library to create a Radar graph similar to this example: In the example, there are two categories being compared with bullets surrounding each one, right? The code I currently have is as follows: am4core.ready(funct ...

Do multiple AJAX calls share parameters?

I have a JavaScript function as shown below: function makeAjaxCall(outerParameter1, outerParameter2, outerDivId, paramInput){ $.ajax({ type: "POST", url: "some time taking LargeWebMethod or URL", //may take some time to return output dat ...

Shaky parallax movement

I recently created a website with a parallax effect, but I'm experiencing some performance issues with jittery movement. The page uses CSS3 transform scale to zoom in and out, and automatically resizes on page resize with JavaScript/jQuery. For the ...

Page load triggers background color shift

Here is the structure of my markup: <div class="authentication"> <div class="form-inputs"></div> </div> My goal is to have the color of the authentication section slide down from top to bottom when the page loads. Initially, the ...

What steps should I take to show the content on different menu selections?

Check out my full code snippet. <html> <head> <meta charset="utf-8"> <title>Title</title> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile ...

Having trouble initializing an array of objects to store data in MongoDB using AngularJS

I am facing an issue while trying to save dynamically created HTML in MongoDB using Mongoose from AngularJS. The problem lies in creating the required object that matches the Mongoose schema I have defined. model code var SegmentSchema = new Schema({ n ...

[Vue alert]: Issue in created function: "TypeError: Unable to assign value to undefined property"

I'm currently in the process of developing a VueJS application where I have implemented a child component called Child.vue that receives data from its parent. Child.vue export default{ props:['info'], data: function(){ ...

Secure User Authentication using HTML and JavaScript Box

In the given code, I am attempting to implement a functionality where a message is displayed next to the select box if it does not have a value of male or female. This message should not be shown if one of these values is selected. However, this feature ...

Converting objects into an array of arrays: A Step-by-Step Guide

My attempts have not yielded the desired outcome Object.keys(data).forEach(function (key) { console.log(data[key]); array = $.map(data[key], function(value, index) { return [value]; }); }); The output I encountered is - 0:{1: 2, 2: ...

Ways to alter the color of an icon when hovering over it

Is there a way to change the color of a material icon inside an IconButton material component when hovering over the IconButton? I've tried adding a class directly to the icon, but it only works when hovering over the icon itself and not the IconButto ...

Django : Learn how to customize DiscoverRunner and handle errors efficiently

Currently in the process of defining a new test runner, I made modifications to my settings.py: TEST_RUNNER = 'test_runner.MezzoTestsRunner' Below is my implementation of the MezzoTestsRunner class: class MezzoTestsRunner(DiscoverRunner): ...

wiping out a column in Excel spreadsheets with the help of Node.js or its corresponding node modules

I've attempted various approaches without success. Can you provide guidance on deleting and adding columns within an Excel sheet using Node.js? ...

Accessing the path to an imported file in Node.js

Currently, I am working on a parser and encountering imports such as ../modules/greeting.js. Additionally, I have an absolute path to the file from where I performed the import: C:\Desktop\Folder\src\scripts\main.js. I am seeking ...

How to Implement Transition Effect for Height Changes on v-if in Vuejs

I have a code snippet that effectively animates a v-if element by reducing its height to 0px. The animation is working well, but the issue arises when I need to specify the initial height of the element in CSS. While this is fine for a single element, I ...

Display the DIV specifically for visitors arriving from Facebook

I want to display a specific DIV on the product page only if the user has visited from Facebook. Currently, I am using the following code to check if they arrived from Facebook: var ref = document.referrer; if (ref.match(/^https?:\/\/([^\ ...

Socket.io: sending signals without receiving any responses

I've been working on a real-time socket.io project that involves a collaborative whiteboard app. I'm facing some issues with emitting data. server.js const express = require('express') const app = express(); const http = require(&apos ...

"Maximizing Data Interaction: The Integration of PHP and AngularJS

I have been developing an AngularJS App alongside a PHP RESTful API for the Backend. I am currently brainstorming about the most effective approach to harness the power of 2-Way Data Binding in AngularJS with my specific scenario. As an illustration, I ha ...

Sending a parameter value when onClick function is called

Currently, I am learning React JS and facing a challenge with passing parameters (like button ID or tab value) to the Tab onClick event. It appears that I'm receiving 'undefined' results when trying to pass attribute names as parameters. Ple ...