Returning false will not terminate the each loop in cypress testing

Here is the code snippet I am working with:

cy.get('[data-testid="userRecords"]')
  .each((record) => {
    if (record.find('[data-testid="delete"]').is(":enabled")) 
    {
        cy.wrap(record).find('[data-testid="delete"]').click()
        if (someValue == 1) 
        {
            cy.get('[data-testid="test"]').should("be.visible");
        }
        else 
        {
            cy.get('[data-tstid="anotherTest"]').should("be.not.exist")
        }
        return false;
    }

My main objective is to stop the each loop if the outer if statement is true.

Can anyone explain why I am having trouble exiting the each loop?

javascriptcypresscypress-each

Answer №1

For an improved outcome, consider changing to .is(':not([disabled]')).

Check out jQuery - :enabled selector

The :enabled selector differs slightly from :not([disabled]).
:enabled targets elements with the boolean disabled property strictly equal to false

If we simplify this with a test example

HTML

<table>
  <tbody>
    <tr data-testid="userRecords">
      <td data-testid="delete" disabled><button>Delete</button></td>
    </tr>
    <tr data-testid="userRecords">
      <td data-testid="delete" ><button>Delete</button></td>
    </tr>
    <tr data-testid="userRecords">
      <td data-testid="delete"><button>Delete</button></td>
    </tr>
  </tbody>
</table>

Test

cy.get('[data-testid="userRecords"]').each((record, index) => { 

  Cypress.log({ message: `Processing ${index}` })
  console.log(index, ':enabled', record.find('[data-testid="delete"]').is(":enabled"))
  console.log(index, ':not([disabled]', record.find('[data-testid="delete"]').is(':not([disabled]'))

  if (record.find('[data-testid="delete"]').is(':not([disabled]')) 
  {
    Cypress.log({ message: `Returning on ${index}` })
    return false;
  }
})

I experience an early stop at the 2nd element, overlooking the 3rd one.

https://i.sstatic.net/mgFYq.png

https://i.sstatic.net/SvnSR.png

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

Is there a way to refresh angular data without having to reload the page?

I have a database table with data that I am displaying using Angular. The script I am using is located in the footer section: <script !src=""> var app = angular.module('enterprise', []); app.controller('entercontroller', funct ...

javascriptjqueryangularjscodeigniter

Use the useEffect hook to pass newly updated data to a FlatList component

I have encountered an issue with updating a FlatList component in my React Native application. The scenario involves running a graphql query to render items and then refetching the data when a mutation is executed using Apollo's refetch option. Althou ...

javascriptreactjstypescriptreact-nativereact-hooks

How can I implement SSO and Auth for multiple sub-domains using PHP?

Is it possible to implement SSO using PHP between two different sub-domains (e.g. parappawithfries.com and *.parappawithfries.com)? My current configuration is causing issues as I use Cloudflare to direct my subs to a different 000webhost website. While I ...

javascriptphpjqueryajax

Guide to creating a function that assigns a value with the assignment operator in jQuery

Consider the function below: function ObjDataSet () { this.header = ""; this.dataIdx = 0; this.DataRows = []; this.CountRow = 0; } .... ObjDataSet.prototype.NameString = function(argIdx, argName, argValue) { var arrObj = this.DataRows[argIdx-1]; ...

javascriptjquery

Tips for efficiently loading an angular controller and template at the same time through a single HTTP request

I am currently utilizing angularjs and am interested in loading parts of a page that I organize as "components". Each component includes its own controller, template, directives, and additional assets like CSS. My goal is to load all of these components on ...

javascriptangularjs

Differences between POST and GET in relation to submitting a form to an action page and retrieving the results

I am currently exploring a new website and came across a form with an action that redirects to a different page upon submission. Upon submitting the form using the post method on the website itself, it successfully sends the data and loads information fro ...

javascriptjqueryajaxforms

How can one effectively conceal the navigation bar on specific pages within a React application that implements React Router?

I am working on my react app and I have a requirement to hide the Navbar specifically for the PageNotFound component. import React, { Component } from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; i ...

javascriptreactjsreact-routerreact-router-dom

Conceal the menu when tapping anywhere else

I am working on a project that involves implementing HTML menus that can be shown or hidden when the user interacts with them. Specifically, I want these menus to hide not only when the user clicks on the header again but also when they click outside of th ...

phpjavascript

Adjusting the size of MaterialUI SVG icon: a simple guide

Hey everyone, I'm having some trouble trying to make this MaterialUI icon larger. I've attempted changes with the viewbox and inline styling, but no luck so far. The current size of the icon isn't cutting it for me, I need it to be bigger. ...

javascriptcssreactjsmaterial-ui

Searching by date in MongoDB using Node.js

Does anyone know how to query a mongo collection by date using JavaScript? Here is an example: var startDate = new Date(dateNow.getUTCFullYear(),dateNow.getUTCMonth(),dateNow.getUTCDate(),dateNow.getUTCHours(),0); var endDate = new Date(dateNow.getUTC ...

javascriptnode.jsmongodbdatetimemongoose

How to break out of an endless loop in Node.js and Express.Js

I have developed an Express app that is designed to paginate through an external API call. I have thoroughly examined the code but for some reason, the loop condition to break the function isn't being triggered. Any assistance on this matter would be ...

javascriptnode.jsexpress

The layout of a Vuex store in a sprawling website

Currently immersed in the development of a sprawling website using Vue.js, I find myself grappling with the architecture of Vuex store. The current folder structure is as follows: . ├── build ├── src │ └── components │ ├ ...

javascriptvue.jsvuexvuex-modules

Troubleshooting Issue: Ajax Jqgrid Grid Reload Failure in c# .net Environment

Currently, I am encountering an issue with the Refresh button on my grid not working when using a web method to retrieve a JSON response. Below is the code snippet: [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static string get ...

javascriptc#jqueryajaxjqgrid

What is the best way to distribute components between two NextJS projects?

Confused about the best way to share ReactJs components between two NextJs applications - one for e-commerce and the other for a manager portal. In the e-commerce app, there are various UI components that I want to reuse in the manager portal. Considering ...

javascriptreactjsnpmnext.jscomponents

Eliminate any repeated elements within the array obtained from the API

I'm currently developing a Blog app and I've been facing an issue with duplicate results. I am working on removing these duplicates from the array. However, each dictionary inside the array contains two key-value pairs - one is unique and the ot ...

javascriptreactjsarraysdictionaryduplicates

The way in which notifications for updates are displayed on the Stack Overflow website

Could someone shed some light on how the real-time update messages on this platform are created? For instance, when I am composing a response to a question and a new answer is added, I receive a notification message at the top of the page. How is this fun ...

javajavascriptajax

Automatically create index.d.ts type definitions from a TypeScript module with just a few clicks

If I have a TypeScript module named my-function.ts with the following code : export function myFunction (param: number): number { return param } When this module is compiled to JavaScript, it loses its type definitions. Is there a way to automatically ge ...

javascriptnode.jstypescriptnode-modulestype-definition

What is the significance of static in react?

export class NavMenu extends Component { static displayName = NavMenu.name; constructor (props) { super(props); this.toggleNavbar = this.toggleNavbar.bind(this); this.state = { collapsed: true }; } I attempted to research the ...

javascriptreactjs

What is the process of invoking a function from a different component in Vue 3?

I attempted to use the $on method and this.$root.$refs.compname_component = this;, but encountered some errors. Please see my code below: formComponent.vue <template> <div v-if="showForm"> create Form </div> </templa ...

javascriptvue.jsvuejs3

Hold on while utilizing Path (Puppeteer)

My current setup involves using Puppeteer 22.6.0 with NodeJS for web scraping purposes. I am facing a challenge where I need to pause the script until a specific h1 element becomes visible on the page. The tricky part is that there are multiple h1 elements ...

javascriptnode.jsweb-scrapingxpathpuppeteer