How to choose cypress elements that are text-free using Cypress

Currently, I am troubleshooting an issue with a dropdown menu that allows for invalid selections. Despite being labeled as "unavailable," users are still able to click on these options for the product.

<select readonly="" class="size-selector">
  <option value="">Size</option>
  <option value="XS">XS</option>
  <option value="S">S - Unavailable</option>
  <option value="M">M - Unavailable</option>
  <option value="L">L</option>
  <option value="XL">XL</option>
</select>

My goal is to restrict the selection to only valid options after the Size label, excluding those tagged as "Unavailable".

typescriptcypress

Answer №1

Cypress offers the functionality of utilizing .filter() and its opposite counterpart .not() when it comes to filtering lists.

cy.get('option')
  .not(':contains("Unavailable")')      // excluding Unavailable items
  .not(':contains("Size")')             // excluding list headers
  //.not('[value=""]')                  // an alternate method to exclude list headers
  .eq(0)                                // selecting the first item
  .invoke('text')                       // retrieving the text
  .then(firstAvailableOption => {
    cy.get('select.size-selector')
      .select(firstAvailableOption)     // using the text to select an option
  })

cy.get('select.size-selector')
  .invoke('val')
  .should('eq', 'XS')

Answer №2

To automate the selection process, you can iterate through the options in a dropdown menu by using the each() function in jQuery. By checking the inner text of each option with the text() method, you can identify and select the desired element with cy.select().

cy.get('select.size-selector option').each(($ele) => {
    if (!($ele.text().includes('Unavailable') || $ele.text().includes('Size'))) {
        cy.get('select.size-selector').select($ele.text())
        return false; // This is required to break out of the loop
    }
})

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

An internal issue has occurred: RangeError: The call stack limit has been exceeded in Next.js React

Recently, I've encountered the error message "⨯ Internal error: RangeError: Maximum call stack size exceeded" and I'm struggling to pinpoint the root cause of this issue. My goal is to have the functionality where clicking the "Add to Cart" but ...

reactjstypescriptnext.js

Transform Dictionary JSON into Typescript model

How can I convert the provided JSON structure into a TypeScript interface to ensure type safety? { "attributes1": { "myKey1": { "myinnerKey11": { "value": "value 1", "name&q ...

jsonangulartypescript

What is the process for creating a clickable file upload in Angular?

Currently, I am utilizing the instructions found in this guide to implement a file upload feature in my project. The code provided works perfectly: <input type="file" class="file-input (change)="onFileSelected($event)" #fileUplo ...

javascripthtmlangulartypescript

Most Effective Approach for Handling Multiple Fetch Requests Concurrently using Async-Await in TypeScript?

I am currently exploring the idea of making multiple API calls simultaneously by utilizing multiple fetch requests within an await Promise.all block, as shown below: const responseData = await Promise.all([ fetch( DASHBOARDS_API + "getGoal ...

typescriptasync-awaitfetch

The attribute 'map' is not found in the object 'MapPage'

I'm currently facing a challenge with integrating Google Maps into my Ionic 2 application that is based on the Tabs template. Everything was functioning properly until I attempted to initialize the this.map method within the constructor function. im ...

angulartypescriptionic2ionic3

Leverage Prisma's auto-generated types as the input type for functions

Exploring the capabilities of Prisma ORM has led me to experiment with creating models and generating the PrismaClient. Initially, I thought it would be possible to utilize the generated types for variables and response types, but that doesn't seem to ...

typescriptprisma

Using TypeScript will result in errors when attempting to use the Promise object and the Awaited keyword

In this example, I am trying to ensure that the function foo does not accept a Promise as an argument, but any other type should be acceptable. export {} function foo<T>(arg: T extends Promise<unknown> ? never : T) { console.log(arg); } asy ...

typescriptpromise

Navigation arrows for sliding`

Is there a way to add custom right/left arrows to the Ionic slider component? Demo: Check it out on Stackblitz Note: Make sure to refer to the home.html page for more details. https://i.sstatic.net/jQ62l.png .html <ion-slides [pager]="true" [slide ...

cssangulartypescriptionic3swiper.js

Is there an easier method to utilize ES6's property shorthand when passing an object in TypeScript, without needing to prefix arguments with interface names?

When working with JavaScript, I often find myself writing functions like the one below to utilize ES6's property shorthand feature: function exampleFunction({param1, param2}) { console.log(param1 + " " + param2); } //Usage: const param1 = "param1" ...

javascripttypescript

The file isn't located in 'rootDir', even though all the details seem to be accurate

I'm currently troubleshooting an issue with one package in my nx monorepo that is causing the error code "TS6059". Interestingly, all other packages are functioning correctly in previous builds. After reviewing my index.ts files, it appears that all ...

node.jstypescriptnestjs

After defining Partial<T>, encountering an error trying to access an undefined property is unexpected

In my function, I am attempting to standardize certain values by specifying the whole function type as Partial. However, despite declaring the interaction variable as Partial Type, I keep encountering the error message saying "Cannot read property endTime ...

typescript

Ensuring that environment variables are properly set is essential for effective error handling

I am currently integrating my NodeJS and Typescript App to create new config files that utilize .env variables. If a specific variable is not set, I want to trigger an error. After setting up my config file, I encountered some errors; however, I am unsure ...

node.jstypescript

Using TypeScript 4.1, React, and Material-UI, the className attribute does not support the CSSProperties type

Just starting out with Material-UI and we're utilizing the withStyles feature to style our components. Following the guidelines laid out here, I successfully created a classes object with the appropriate types. const classes = createStyles({ main ...

reactjstypescriptmaterial-ui

The text geometry remains consistent despite adjustments to the height and size parameters

I am facing a unique issue with text loading in my react three fiber project. The text does render, but it remains extremely small and unreadable, even though I can see a tiny pixel of the text color in the correct position. Strangely, I have not been able ...

javascriptreactjstypescriptthree.jsreact-three-fiber

What is the best way to integrate @uirouter in the Angular/sampleapp project?

Having trouble configuring the angular/sampleapp to work with @uirouter. Is the systemjs.config.js file set up incorrectly to include @uirouter? 1) Run npm i -S @uirouter/angular 2) Add the following line to the map section in systemjs.config.js ' ...

node.jsangulartypescriptangular-ui-router

How to send form group in Angular when the enter key is pressed

When I press the submit button on a form, it sends a request to the database to filter data in a grid. However, I also want the form to submit when the enter key is pressed. HTML <form [formGroup]="bmForm" (keyup.enter)="onSearchClic ...

htmlangulartypescript

Ways to activate subscriptions in type-graphql?

I'm encountering an issue with setting up subscriptions in my Apollo Server project using Express. Despite following all the steps outlined in the documentation [https://typegraphql.com/docs/subscriptions.html], I can't seem to get it working. In ...

typescriptgraphqlapollo-servergraphql-subscriptionstypegraphql

Expanding the base class attribute in Typescript

I am currently in the process of developing a wrapper class to enhance the functionality of ReactReduxForm's Control component. Below is the initial class/component setup: export class Control<T> extends React.Component<ControlProps<T> ...

javascriptreactjstypescriptreact-redux-form

What is the best way to determine if several simultaneous tasks have been completed?

Implementing multiple parallel actions in an Angular component has proven to be challenging for me. Following each action (foo), I subscribe to its result. I've been attempting to determine if any actions are currently running or have completed using ...

angulartypescript

I prefer not to permit components to receive undefined values

When using swr, the data type is IAge| undefined. I want to avoid passing undefined to AgeComponent, so I need the age type to be strictly IAge. Since AgeComponent does not allow undefined values, I am facing an error stating that 'IAge | undefined&ap ...

reactjstypescriptswr