Discovering if an element is present with Cypress.io

Question

Discovering if an element is present with Cypress.io

Is there a straightforward way to determine if an element is present, and then proceed with specific steps based on its presence or absence?

I attempted the following approach, but it did not yield the desired results:

Cypress.Commands.add('deleteSomethingFunction', () => {
  cy.get('body').then($body => {
    if ($body.find(selectors.ruleCard).length) {
      let count = 0;
      cy.get(selectors.ruleCard)
        .each(() => count++)
        .then(() => {
          while (count-- > 0) {
            cy.get('body')
            // ...
            // ...
          }
        });
    }
  });
});

I am seeking a simple solution that can be easily incorporated using basic JavaScript syntax like an if-else block or the then() section of a Promise.

Something akin to the following implementations from the Webdriver protocol:

driver.findElements(By.yourLocator).size() > 0

Check for element presence during a wait operation

Your advice would be greatly appreciated. Thank you.

javascript selenium-webdriver cypress

Answer 1

Answer №1

It's important to remember that when using the .length property of the cy.find command in an if condition, you must consider Cypress's asynchronous nature.

For example: The following condition may evaluate as false even if the appDrawerOpener button exists

    if (cy.find("button[data-cy=appDrawerOpener]").length > 0)    //evaluates as false

However, this condition will evaluate as true because the $body variable is already resolved within a .then() block:

    cy.get("body").then($body => {
        if ($body.find("button[data-cy=appDrawerOpener]").length > 0) {   
            //evaluates as true
        }
    });

For more information, refer to the Cypress documentation on conditional testing

Answer 2

It's important to remember that when using the .length property of the cy.find command in an if condition, you must consider Cypress's asynchronous nature.

For example: The following condition may evaluate as false even if the appDrawerOpener button exists

    if (cy.find("button[data-cy=appDrawerOpener]").length > 0)    //evaluates as false

However, this condition will evaluate as true because the $body variable is already resolved within a .then() block:

    cy.get("body").then($body => {
        if ($body.find("button[data-cy=appDrawerOpener]").length > 0) {   
            //evaluates as true
        }
    });

For more information, refer to the Cypress documentation on conditional testing

Answer 3

Answer №2

There has been previous speculation: Conditional statement in Cypress

Therefore, one possible approach is:

cy.get('header').then(($element) => { 
        if ($element.text().includes('Account')) {
            cy.contains('Account')
            .click({force:true})
        } else if ($element.text().includes('Sign')) { 
            cy.contains('Sign In')
            .click({force:true})  
        } else {
            cy.get('.navUser-item--account .navUser-action').click({force:true})
        }
    })

Answer 4

There has been previous speculation: Conditional statement in Cypress

Therefore, one possible approach is:

cy.get('header').then(($element) => { 
        if ($element.text().includes('Account')) {
            cy.contains('Account')
            .click({force:true})
        } else if ($element.text().includes('Sign')) { 
            cy.contains('Sign In')
            .click({force:true})  
        } else {
            cy.get('.navUser-item--account .navUser-action').click({force:true})
        }
    })

Answer 5

Answer №3

When working with Cypress, it's important to remember that all steps are asynchronous. To handle this efficiently, consider creating a common function either in the commands file or page object file.

export function checkIfElementExists(element){
    return new Promise((resolve,reject)=>{
        cy.get('body').find(element).its('length').then(result=>{
            if(result > 0){
                cy.get(element).select('100').wait(2000);
                resolve();
            }else{
                reject();
            }
        });
    })
}

// Example usage: checking if select[aria-label="rows per page"] exists
cy.checkIfElementExists('select[aria-label="rows per page"]')
.then(()=>{
    //// Perform tasks if the element exists
})
.catch(()=>{
    //// Handle case where the element does not exist
})

Answer 6

When working with Cypress, it's important to remember that all steps are asynchronous. To handle this efficiently, consider creating a common function either in the commands file or page object file.

export function checkIfElementExists(element){
    return new Promise((resolve,reject)=>{
        cy.get('body').find(element).its('length').then(result=>{
            if(result > 0){
                cy.get(element).select('100').wait(2000);
                resolve();
            }else{
                reject();
            }
        });
    })
}

// Example usage: checking if select[aria-label="rows per page"] exists
cy.checkIfElementExists('select[aria-label="rows per page"]')
.then(()=>{
    //// Perform tasks if the element exists
})
.catch(()=>{
    //// Handle case where the element does not exist
})

Answer 7

Answer №4

Here is a helpful solution I discovered:

Try implementing the following code snippet:

cy.window().then((win) => {
        const identifiedElement = win.document.querySelector(element)
        cy.log('The value of the object is: ' + identifiedElement)
    });

You can integrate this into your commands.js file within Cypress:

Cypress.Commands.add('isElementExist', (element) => {

    cy.window().then((win) => {
        const identifiedElement = win.document.querySelector(element)
        cy.log('The value of the object is: ' + identifiedElement)
    });
})

Answer 8

Here is a helpful solution I discovered:

Try implementing the following code snippet:

cy.window().then((win) => {
        const identifiedElement = win.document.querySelector(element)
        cy.log('The value of the object is: ' + identifiedElement)
    });

You can integrate this into your commands.js file within Cypress:

Cypress.Commands.add('isElementExist', (element) => {

    cy.window().then((win) => {
        const identifiedElement = win.document.querySelector(element)
        cy.log('The value of the object is: ' + identifiedElement)
    });
})

Answer 9

Answer №5

A solution to the specific issue has been provided in the official Cypress documentation.

Guidelines on verifying Element existence

// To make new elements appear,
// click on the button
cy.get('button').click()
cy.get('body')
  .then(($body) => {
    // Search within the body synchronously
    // for the created element
    if ($body.find('input').length) {
      // Take action if input is found
      return 'input'
    }

    // If not an input, then assume it's a textarea
    return 'textarea'
  })
  .then((selector) => {
    // Use the retrieved selector string
    // to locate and interact with the element
    cy.get(selector).type(`Located element using selector ${selector}`)
  })

Answer 10

A solution to the specific issue has been provided in the official Cypress documentation.

Guidelines on verifying Element existence

// To make new elements appear,
// click on the button
cy.get('button').click()
cy.get('body')
  .then(($body) => {
    // Search within the body synchronously
    // for the created element
    if ($body.find('input').length) {
      // Take action if input is found
      return 'input'
    }

    // If not an input, then assume it's a textarea
    return 'textarea'
  })
  .then((selector) => {
    // Use the retrieved selector string
    // to locate and interact with the element
    cy.get(selector).type(`Located element using selector ${selector}`)
  })

Answer 11

Answer №6

When testing a VS Code extension in Code server, I found that the following command worked for me:

Cypress.Commands.add('elementExists', (selector) => {
  return cy.window().then($window => $window.document.querySelector(selector));
});

In my E2E test for a Code Server extension, I use it like this:

cy.visit("http://localhost:8080");
cy.wait(10000); // just an example here, better use iframe loaded & Promise.all
cy.elementExists("a[title='Yes, I trust the authors']").then((confirmBtn) => {
    if(confirmBtn) {
        cy.wrap(confirmBtn).click();
    }
});

Make sure to call this check after everything is loaded.

If you're using TypeScript, add the following to your global type definitions:

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      /**
       * Check if element exits
       * 
       *  @example cy.elementExists("#your-id").then($el => 'do something with the element');
       */
      elementExists(element: string): Chainable<Subject>
    }
  }
}

Aside

VS Code server heavily relies on Iframes which can be challenging to test. Check out this blog post for more information - Testing iframes with Cypress.

The code above is necessary to dismiss the "trust modal" if it's displayed. Once the feature disable-workspace-trust is released, it could be disabled as a CLI option.

Answer 12

When testing a VS Code extension in Code server, I found that the following command worked for me:

Cypress.Commands.add('elementExists', (selector) => {
  return cy.window().then($window => $window.document.querySelector(selector));
});

In my E2E test for a Code Server extension, I use it like this:

cy.visit("http://localhost:8080");
cy.wait(10000); // just an example here, better use iframe loaded & Promise.all
cy.elementExists("a[title='Yes, I trust the authors']").then((confirmBtn) => {
    if(confirmBtn) {
        cy.wrap(confirmBtn).click();
    }
});

Make sure to call this check after everything is loaded.

If you're using TypeScript, add the following to your global type definitions:

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      /**
       * Check if element exits
       * 
       *  @example cy.elementExists("#your-id").then($el => 'do something with the element');
       */
      elementExists(element: string): Chainable<Subject>
    }
  }
}

Aside

VS Code server heavily relies on Iframes which can be challenging to test. Check out this blog post for more information - Testing iframes with Cypress.

The code above is necessary to dismiss the "trust modal" if it's displayed. Once the feature disable-workspace-trust is released, it could be disabled as a CLI option.

Answer 13

Answer №7

This function does not generate an error if the specified element is missing. Instead, it will return the element itself.

File Path: cypress/support/commands.js

checkElement(selector) {
  cy.get('body').then(($body) => {
    if ($body.find(selector).length) {
      return cy.get(selector)
    } else {
      // No error thrown for missing element
      assert.isOk('OK', 'Element does not exist.')
    }
  })
},

How to Use:

cy.checkElement('#someSelectorId').then(($element) => {
  // Your code goes here if the element exists
})

Answer 14

This function does not generate an error if the specified element is missing. Instead, it will return the element itself.

File Path: cypress/support/commands.js

checkElement(selector) {
  cy.get('body').then(($body) => {
    if ($body.find(selector).length) {
      return cy.get(selector)
    } else {
      // No error thrown for missing element
      assert.isOk('OK', 'Element does not exist.')
    }
  })
},

How to Use:

cy.checkElement('#someSelectorId').then(($element) => {
  // Your code goes here if the element exists
})

Answer 15

Answer №8

Experiencing a similar issue with the visibility of the like button on a webpage, I managed to resolve it by implementing the following code snippet.

function clickIfButtonExists(btn) {
  cy.get('body').then((body) => {
    cy.wait(5000).then(() => {
      if (body.find(btn).length > 0) {
        cy.log('Button found, test will proceed')
        cy.get(btn).click()
      } else {
        cy.log('Button not found, skipping test')
      }
    })
  })
}

Answer 16

Experiencing a similar issue with the visibility of the like button on a webpage, I managed to resolve it by implementing the following code snippet.

function clickIfButtonExists(btn) {
  cy.get('body').then((body) => {
    cy.wait(5000).then(() => {
      if (body.find(btn).length > 0) {
        cy.log('Button found, test will proceed')
        cy.get(btn).click()
      } else {
        cy.log('Button not found, skipping test')
      }
    })
  })
}

Answer 17

Answer №9

If someone is searching for a way to utilize the cy.contains function to locate an element and interact with it based on the outcome, they can refer to this article for more insights on conditional testing.

I encountered a scenario where users are presented with multiple options, requiring an additional click on a 'show more' button before accessing their desired choice.

Action:

Cypress.Commands.add('clickElementWhenFound', (
    content: string,
) => {
    cy.contains(content)
        // prevent the previous assertion from triggering
        .should((_) => {})
        .then(($element) => {
            if (!($element || []).length) {
                /** Do something when the element is not found */
            } else {
                cy.contains(content).click();
            }
        });
});

Example:

// Click on the button with 'Submit' text if it exists
cy.clickElementWhenFound('Submit');

Answer 18

If someone is searching for a way to utilize the cy.contains function to locate an element and interact with it based on the outcome, they can refer to this article for more insights on conditional testing.

I encountered a scenario where users are presented with multiple options, requiring an additional click on a 'show more' button before accessing their desired choice.

Action:

Cypress.Commands.add('clickElementWhenFound', (
    content: string,
) => {
    cy.contains(content)
        // prevent the previous assertion from triggering
        .should((_) => {})
        .then(($element) => {
            if (!($element || []).length) {
                /** Do something when the element is not found */
            } else {
                cy.contains(content).click();
            }
        });
});

Example:

// Click on the button with 'Submit' text if it exists
cy.clickElementWhenFound('Submit');

Answer 19

Answer №10

I found success with the following method:

cy.get('body').then($body => {
    if ($body.find("mat-option[aria-selected='true']").length) {
        //Perform actions if element exists
    }
    else{
        //Perform actions if element does not exist
    }
})

Answer 20

I found success with the following method:

cy.get('body').then($body => {
    if ($body.find("mat-option[aria-selected='true']").length) {
        //Perform actions if element exists
    }
    else{
        //Perform actions if element does not exist
    }
})

Answer 21

Answer №11

The most effective approach is to check for the presence of multiple elements on a web page and take action accordingly once they are found.

This method allows you to continue with the process without any unnecessary pauses in between.

Below is an example that has been successfully tested on Cypress 12.13.0:

cy.get('.deactivate-session-button, .start-work-buttons-area').then(el => {
  if (el.text() == 'End other sessions') cy.wrap(el).click()
})
cy.get('.start-work-buttons-area')

If the element containing the text "End other sessions" (a button) is located, it will be clicked. Otherwise, it indicates that you are already logged in and can proceed with your next steps.

I trust this information proves useful to you!

Answer 22

The most effective approach is to check for the presence of multiple elements on a web page and take action accordingly once they are found.

This method allows you to continue with the process without any unnecessary pauses in between.

Below is an example that has been successfully tested on Cypress 12.13.0:

cy.get('.deactivate-session-button, .start-work-buttons-area').then(el => {
  if (el.text() == 'End other sessions') cy.wrap(el).click()
})
cy.get('.start-work-buttons-area')

If the element containing the text "End other sessions" (a button) is located, it will be clicked. Otherwise, it indicates that you are already logged in and can proceed with your next steps.

I trust this information proves useful to you!

Answer 23

Answer №12

Implementing async/await in your codebase adds clarity and conciseness:

const $element = await cy.search("query")
if ($element.length > 0) {
  ...

For further details, check out: https://medium.com/@EmilySmith/cypress-io-implementing-async-and-await-9adf3b6dce12

Answer 24

Implementing async/await in your codebase adds clarity and conciseness:

const $element = await cy.search("query")
if ($element.length > 0) {
  ...

For further details, check out: https://medium.com/@EmilySmith/cypress-io-implementing-async-and-await-9adf3b6dce12

Discovering if an element is present with Cypress.io

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Aside

Answer №7

Answer №8

Answer №9

Answer №10

Answer №11

Answer №12

Similar questions

Select each item in the list one by one

Keeping firebase auth while removing firestore from Vue project

Ways to troubleshoot the issue of "The webdriver.chrome.driver system property must be set to the driver executable path" error

How to access webpack's require.context feature on the development server

Learn how to retrieve values from a .json file in real-time and then perform comparisons with user input using Python

Managing state in React for a nested object while still maintaining the data type of the

Is AngularJS Experiencing Bugs with the Webcam getUserMedia API?

Application of Criteria for Zod Depending on Data Stored in Array Field

Keep moving the box back and forth by pressing the left and right buttons continuously

React.js: The function useDef has not been defined

Is it conceivable to exploit JSON responses with appropriate JavaScript string escaping to launch an XSS attack?

Trigger function in a different child component on mouse up

What is the process of generating enum values using ES6 in Node.js?

Ways to guide users through a single-page website using the URL bar

Issue with undefined bindingContext.$data in IE9 on knockout binding handler

A guide on updating data with duplicate values in Knex

Sending a batch of files through an axios request by passing them as an object

Guide to importing an AngularJS controller into an Express file (routes.js)

What is the best practice for adding a DOM element at a precise location within an ng-repeat loop?

Transitioning a JavaScriptIonicAngular 1 application to TypescriptIonic 2Angular 2 application