Verify if the same attribute is present in various fields using Cypress automation testing

Question

Verify if the same attribute is present in various fields using Cypress automation testing

I'm working on a form that contains both disabled and enabled fields.

In my current setup, I have a command that checks for disabled fields:

Cypress.Commands.add("checkElementState", (myselector) {
if(myselector) {

   cy.getBySel(myselector).should('be.disabled')
})

However, this command only checks for one element at a time. How can I modify the code to support multiple testids for the same object?

Is it possible to structure it like this:

cy.checkElementState(myselector: ["first-element", "second-element", "third-element"])

Where first-element, second-element, and third-element are the testids.

Any guidance on how I can achieve this would be greatly appreciated.

typescript cypress

Answer 1

Answer №1

Instead of using a loop with .forEach(), you can pass an array of selectors to the function

cy.getBySel(myselector).should('be.disabled")

.

/// <reference types="cypress" />

Cypress.Commands.add("myElementState", (selectors) => {
  selectors.forEach(mySelector => {
    cy.getBySel(mySelector).should('be.disabled')
  });
})

To make it work in Typescript, remember to define the type specifications for Custom Commands in your index.d.ts file.

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {

    getBySel(selector: string, args?: any): Chainable<JQuery<HTMLElement>>;
    myElementState(mySelectors: string[]): Chainable<undefined>;

  }
}

If you use

cy.wrap(selectors).each((selector) => {

in Typescript, you need to specify the type as JQuery<HTMLElement>.

https://i.sstatic.net/26f5j4tM.png

In Javascript, you can directly iterate over the array using .forEach(), but in Typescript, proper coercion is required.

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

Therefore, utilizing .forEach() for arrays of strings is recommended instead of coercing types.

Answer 2

Instead of using a loop with .forEach(), you can pass an array of selectors to the function

cy.getBySel(myselector).should('be.disabled")

.

/// <reference types="cypress" />

Cypress.Commands.add("myElementState", (selectors) => {
  selectors.forEach(mySelector => {
    cy.getBySel(mySelector).should('be.disabled')
  });
})

To make it work in Typescript, remember to define the type specifications for Custom Commands in your index.d.ts file.

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {

    getBySel(selector: string, args?: any): Chainable<JQuery<HTMLElement>>;
    myElementState(mySelectors: string[]): Chainable<undefined>;

  }
}

If you use

cy.wrap(selectors).each((selector) => {

in Typescript, you need to specify the type as JQuery<HTMLElement>.

https://i.sstatic.net/26f5j4tM.png

In Javascript, you can directly iterate over the array using .forEach(), but in Typescript, proper coercion is required.

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

Therefore, utilizing .forEach() for arrays of strings is recommended instead of coercing types.

Answer 3

Answer №2

cy.wrap is a powerful tool that allows you to seamlessly insert arrays into your Cypress command chain, resulting in a Chainable<string[]> variable that can be conveniently iterated over using cy.each.

Cypress.Commands.add("checkElementState", (elementList) => {
  cy.wrap(elementList).each((element) => {
    cy.getBySel(element).should('be.disabled')
  });
})
...
cy.checkElementState(['apple', 'banana', 'orange']);

Answer 4

cy.wrap is a powerful tool that allows you to seamlessly insert arrays into your Cypress command chain, resulting in a Chainable<string[]> variable that can be conveniently iterated over using cy.each.

Cypress.Commands.add("checkElementState", (elementList) => {
  cy.wrap(elementList).each((element) => {
    cy.getBySel(element).should('be.disabled')
  });
})
...
cy.checkElementState(['apple', 'banana', 'orange']);

Verify if the same attribute is present in various fields using Cypress automation testing

Answer №1

Answer №2

Similar questions

Repeated Type Declarations in TypeScript

What is the reason behind receiving the error message "`Foo` only represents a type, but is being treated as a value here" when using `instanceof` in TypeScript?

Tips for dynamically changing the selected option in a drop-down menu using Angular 5

Only numerical values are permitted, and numbers may not commence with 0 in Angular 4

Creating click event handler functions using TypeScript

Generate fresh instances of object(s) using JSON information

Is it possible to deactivate input elements within a TypeScript file?

The decode function in MxCodec is failing to properly parse XML data

What is the best way to extract a value from an input within a filter?

A guide on efficiently utilizing combineLatest and mergeMap for handling multiple subscriptions

Is there a way to update the data on a view in Angular 9 without the need to manually refresh the page?

Is there a way to implement the onClick event within a styled component?

Support for translation of TypeScript files is provided in Angular 7 with i18n

What is a simple method to convert TypeScript to JavaScript?

Unable to utilize my TypeScript library within JavaScript code

Tailwind component library - personalize color schemes for your project's design

"Specifying the data type of function parameters in parts

Error: Module '...' or its type declarations could not be located

Solving the 'never' type issue in Vue3 and TypeScript for an empty array reference

Next.js 14 useEffect firing twice upon page load