1

I have the following scenario:

if the element is present, i have to do one activity and if not present will do another activity.


  cy.xpath("//div[text()= 'button').its('length').then(res=> {
 
  if (res > 0) {
    return 1;
}
else {

cy.log ("Element is not present")

    }
 }
)} '''

if element is present = Code is working fine, 
if the element xpath is not present = it try to search the element xpath (//div[text()= 'button') and throwing the error as 'Timed out retrying: Expected to find element: undefined, but never found it.'

if element is not present, Is there any way, i can handle the code ,
Smith Ranjan
  • 97
  • 2
  • 6
  • 1
    Does your element appear under condition of user actions, or under condition of application state? – Rosen Mihaylov Nov 19 '20 at 14:31
  • Yes , element appears according to application State. According to the availability of data the element will present. If there is no data present in the grid, no element will present. – Smith Ranjan Nov 19 '20 at 15:15
  • 2
    I think this issue has been resolved in [this toppic](https://stackoverflow.com/questions/56145926/how-to-check-if-element-exists-using-cypress-io). – Rosen Mihaylov Nov 19 '20 at 17:51

2 Answers2

1

When using xpath you can (sort of) make it conditional by wrapping the xpath selector with count().

cy.xpath("count(//div[text()= 'button'])")  // ok with async content
  .then(count => {
    if (count) {

      //return 1;  // not useful, returns a "chainer"
      // ...but you can perform the required test here, e.g
      cy.xpath("//div[text()= 'button']").click()

    } else {
      cy.log('not found')
    }

  })

The shorter syntax using built-in jQuery might be

const exists = !!Cypress.$("div:contains('button')").length

if (exists) {
  cy.xpath("//div[text()= 'button']").click()
} else {
  cy.log('not found')
}

Note that this is a partial match to 'button', where-as the xpath syntax is an exact match.

Also note - using Cypress.$ by-passes retry-ability, so it should not be used where the text is asynchronous.

From docs

This is a great way to synchronously query for elements when debugging from Developer Tools.

The implication is that it's more for debugging after the page has loaded.

The best practice is to try to construct the test and the app's data in such a way that you know that the button is present.

Ackroydd
  • 1,482
  • 1
  • 13
  • 14
  • Thanks for details explanation. cy.xpath("count(//div[text()= 'button'])") : Throwing an error as is not a valid XPath expression. It may be due to count text. – Smith Ranjan Nov 20 '20 at 05:08
  • It works in my test, and I have exactly that xpath call. Version is "cypress-xpath": "^1.6.1" in case that makes a difference. – Ackroydd Nov 20 '20 at 08:08
  • Also works here [xpath-tester](https://www.freeformatter.com/xpath-tester.html) – Ackroydd Nov 20 '20 at 08:13
  • This one [https://xpath.playground.fontoxml.com](https://xpath.playground.fontoxml.com/?mode=0&variables=%7B%7D&xml=%3Cdiv+class%3D%22mybuttton%22%3Ebutton%3C%2Fdiv%3E%0A&xpath=count%28%2F%2Fdiv%5Btext%28%29%3D+%27button%27%5D%29&context=) has the xpath query and the html - let me know the difference to yours – Ackroydd Nov 20 '20 at 08:20
0

You can do something like this. With Cypress.$, you can validate the presence of the element with the help of the length attribute and then do further actions.

cy.get('body').then($body => {

  const ele = $body.find('selector');

  if (Cypress.$(ele).length == 0) {
    //Do Something element is not present
  } 
  
  else if (Cypress.$(ele).length > 0) {
    //Do Something when element is present
  }
  
})
Alapan Das
  • 17,144
  • 3
  • 29
  • 52
  • Getting same error, When the element is not present , It try to search the element in the starting of the code : cy.get('selector').then(ele => { and throw an error as 'Expected to find element: undefined, but never found it.' – Smith Ranjan Nov 19 '20 at 15:33