cypress - do action until element shows on screen

Question

I know that Cypress is not big on conditional testing, but coming from a selenium webdriver background, I'm very used to using this kind of logic in my tests.

I am testing a KaiOS app that instead of scrolling, uses page flipping similar to a kindle device to make it easier for the user to read.

Currently, since KaiOS is based on Firefox OS, the only way to use the app on a computer in a similar way to the device is to use firefox. The problem is that the page flipping when running the tests on cypress (even with firefox) is not working as expected so when we flip the page it doesn't go to the same page as it does on the device or firefox.

So, since I can't make sure how to find the element I'm looking for, I need to keep flipping pages and look for it and then interact with it.

I have tried a bunch of different things without success.

What I need is fairly simple:

go to page
check for presence of element, if not present, flip page. keep flipping pages until it finds the element
once it found the element, interact with it

If think you could do that with https://github.com/NoriSte/cypress-wait-until and then manually checking for the element presence with `document.querySelector` because `cy.get()` would fail the test if the element is not present. — martin, Feb 27 '20 at 12:38
I tried using cy.log(document.querySelector('selector')) but logs nothing... — Gabriel Pita, Feb 28 '20 at 02:18

score 7 · Accepted Answer · answered Feb 28 '20 at 07:10

I've already replied in the issues you raised but I'll write the solution here too to help other users.

Well, step by step, you need to

go to page

A simple

cy.visit('<your url>')

check for presence of element

The simplest way is to leverage the exposed Cypress.$ jQuery instance and checking by yourself if the element exists.

cy.visit('<your url>')
cy.waitUntil(() => !!Cypress.$('#elementToBeChecked').length)

() => !!Cypress.$('#elementToBeChecked').length is the checkFunction expected by waitUntil, it returns a boolean and waitUntil retries it until it returns true.

check for presence of element, if not present, flip page

cy.visit('<your url>')
cy.waitUntil(() => {
  if (!Cypress.$('#elementToBeChecked').length) {
    return cy.flipPage().then(() => false)
  } else {
    return true
  }
})

the cy.flipPage().then(() => false is useful to be sure that che checkFunctin resolves to false. waitUntil will call the checkFunction until it returns true.

keep flipping pages until it finds the element

Done

once it found the element, interact with it

cy.visit('<your url>')
cy.waitUntil(() => {
  if (!Cypress.$('#elementToBeChecked').length) {
    return cy.flipPage().then(() => false)
  } else {
    return true
  }
})
cy.get('#elementToBeChecked').click()

If you want an even more detailed explanation about why you need waitUntil for a task like yours, take a look here.

Hope it helps

now in "production", thanks! https://github.com/wikimedia/wikipedia-kaios/commit/7895c5d1b0ddb6c7e83b4ba15e8150aefc89cbac — Gabriel Pita, Feb 28 '20 at 09:18

score 1 · Answer 2 · answered Feb 27 '20 at 14:11

1

Try using https://github.com/NoriSte/cypress-wait-until to perform actions on the page conditionally

answered Feb 27 '20 at 14:11

gleb bahmutov

1,801
15
10

from the documentation I'm not really understanding where to put the retrying check... – Gabriel Pita Feb 28 '20 at 02:45

cypress - do action until element shows on screen

2 Answers2

Linked