Cypress: How to know if element is visible or not in using If condition?

Question

I want to know if an element is visible or not. I am not sure how to do that. I know that we can run this:

cy.get('selector').should('be.visible')

But if element is invisible then test is failed. So I just want a boolean value if element is not visible so I can decide through if condition.

Use case:

I want to open a side menu by clicking on the button only if sidebar is invisible.

if(sidebarIsInvisible){
   cy.get('#sideMenuToggleButton').click();
}

Is this possible?

I really appreciate for any contribution.

Thanks in advance

Note that the Cypress docs recommend against conditional testing unless you have a stable source of truth to check your DOM against. This is because the DOM is always changing. See https://docs.cypress.io/guides/core-concepts/conditional-testing#The-problem. There are several offered strategies: https://docs.cypress.io/guides/core-concepts/conditional-testing#The-strategies — majorobot, May 03 '21 at 16:35

score 55 · Accepted Answer · edited Oct 23 '20 at 08:27

55

Cypress allows jQuery to work with DOM elements so this will work for you:

cy.get("selector_for_your_button").then($button => {
  if ($button.is(':visible')){
    //you get here only if button is visible
  }
})

UPDATE: You need to differentiate between button existing and button being visible. The code below differentiates between 3 various scenarios (exists & visible, exists & not visible, not exists). If you want to pass the test if the button doesn't exist, you can just do assert.isOk('everything','everything is OK')

cy.get("body").then($body => {
    if ($body.find("selector_for_your_button").length > 0) {   
    //evaluates as true if button exists at all
        cy.get("selector_for_your_button']").then($header => {
          if ($header.is(':visible')){
            //you get here only if button EXISTS and is VISIBLE
          } else {
            //you get here only if button EXISTS but is INVISIBLE
          }
        });
    } else {
       //you get here if the button DOESN'T EXIST
       assert.isOk('everything','everything is OK');
    }
});

edited Oct 23 '20 at 08:27

Michahell

4,905
5
29
45

answered Aug 31 '19 at 15:59

DurkoMatko

5,238
4
26
35

Thanks for the response. But if button is not found then test is failed. But I don't want to fail the test. – Ayyaz Zafar Aug 31 '19 at 17:34
1

I've updated my answer which differentiates among 3 scenarios (button exists & is visible, button exists & is not visible, button doesn't exist at all). Just tested the code locally and it should work. If you just want to pass the test in case the button doesn't exist at all, use `assert.isOk('everything','everything is OK');`..Hope this helped! – DurkoMatko Aug 31 '19 at 18:03
I did not try it yet but It sounds good. I will implement it soon. But I have a question. Is this method async or sync ? I mean If I add another line cy.get()... after the last line then would it wait or it would run instantly without waiting for the previous code ? – Ayyaz Zafar Sep 01 '19 at 20:52
2

It's async. Whole cypress is async (I'd advice you to read more here - https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Commands-Are-Asynchronous). Means adding line after `cy.get` would run "instantly". If you want it to wait, put it to `.then` blocks in the code I've provided. Anyway, it's already a different topic. Answer to the question should be finished I think. – DurkoMatko Sep 01 '19 at 21:38
@AyyazZafar any reason why you didn't accept the answer? I believe the question got all points answered at this point, or? – DurkoMatko Sep 04 '19 at 06:04
Thanks a lot for great help. I really appreciate a lot :) – Ayyaz Zafar Sep 08 '19 at 19:13

score 6 · Answer 2 · answered Sep 13 '22 at 20:16

6

You can also use my plugin cypress-if to write conditional command chains

cy.get('...').if('visible').click()

Read https://glebbahmutov.com/blog/cypress-if/

answered Sep 13 '22 at 20:16

gleb bahmutov

1,801
15
10

score 2 · Answer 3 · answered Sep 14 '22 at 11:22

2

try this code:

isElementVisible(xpathLocater) {
        this.xpath(xpathLocater).should('be.visible');
};

isElementNotVisible(xpathLocater) {
        this.xpath(xpathLocater).should('not.exist');
};

then use these two methods with if statement like shown below:

if(isElementNotVisible) {
}

or

if(isElementVisible) {
}

answered Sep 14 '22 at 11:22

Sudheer Singh

555
5
10

It is giving assertion error when the element is not visible – paul Jun 08 '23 at 07:01
Yes, it will give that error because the above code is written to catch those. – Sudheer Singh Jun 15 '23 at 05:24

Cypress: How to know if element is visible or not in using If condition?

3 Answers3

Linked

Related