How to write a conditional to check if a page link/button is visible to click()

Question

I am writing a Cypress test on a quiz page with a random # of pages. I am trying to write a condition in Cypress that will allow me to click on a "SUBMIT" page link if it is the last page, else it will click on a "NEXT" link if it is not the last page.

I have tried using cypress commands such as .contains() and .find() which does not seem to return a pass/fail response. I have also tried various if statements, but when I use these, I end up using cypress commands that either pass or fail, but do not route to any alternate conditional else.

//Clicks on submit successfully or fails the test. Never hits the else clause if not the last page.

        if (cy.find("button[data-cy=submitBtn]").length > 0) 
        {
            // SUBMIT button exists
            cy.get('[data-cy=submitBtn]')
                .click()
        }

Expected result will hit the else if the condition is met and trigger the command.

Is the button submit button on the page but not visible

Maccurt
– Maccurt

2019-08-23 20:35:15 +00:00
Commented Aug 23, 2019 at 20:35 — Maccurt
– Maccurt, Commented Aug 23, 2019 at 20:35

DurkoMatko · Accepted Answer · 2019-08-23 19:46:52Z

4

This should be the condition you're looking for:

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

I believe your question might be a duplicate of this one

edited Aug 23, 2019 at 19:46

answered Aug 23, 2019 at 19:19

DurkoMatko

5,9046 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

slamey Over a year ago

I got this error when trying this: CypressError: Oops, it looks like you are trying to call a child command before running a parent command. You wrote code that looks like this: cy.find("button[data-cy=submitBtn]") A child command must be chained after a parent because it operates on a previous subject. For example - if we were issuing the child command 'click'... cy .get('button') // parent command must come first .click() // then child command comes second

DurkoMatko Over a year ago

Can you update your code in the question with the current code? If you want to click on that button you have to get it first with .get()...Code I posted is just a condition to determine whether that button exists at all. If it does and condition is true, then you have to do cy.get('[data-cy=submitBtn]').click()

DurkoMatko Over a year ago

I see :) I've updated my answer as well. Updated code should hopefully work.

slamey Over a year ago

That works perfectly, thank you! Sorry that I cannot upvote it due to my new/low rep :(

DurkoMatko Over a year ago

No prob ;) Welcome to SO :)

Collectives™ on Stack Overflow

How to write a conditional to check if a page link/button is visible to click()

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related