CODEWITHSUNDEEP
jquerycypress
Codex0607
Codex0607

Reputation: 83

Cypress - doesn't find table elements

Dear stackoverflow members, i have an issue testing our webpage in cypress.io I am iterating with $().each() function in jquery, and trying to find an specific element in a table row and also trying to make it " highlighted or ' selected' " . The crazy thing is when i try in the conditional part like : 

let number = $("#idOfSomething").text(); // Here i store the text from a dynamic label
                                         // which get its value from db  

if( Cypress.$(this).find('td:eq(1):contains("' + number+ '")').length > 0 ){
  // nothing found 
}

--------------or------------------

else if (Cypress.$(this).find('td:eq(1)').text() == number ){
// nothing found
}

But if i try to put the value in the conditional part HARD CODED then it finds it

 if (Cypress.$(this).find('td:eq(1)').text() == "xy123" ){
    cy.log(number)  // prints "xy123"
    }

Why is that ???

Another thing is when i try to loop over the same table with the same function like above and the table is longer than a page, then i scroll down to the bottom of the table with this function :

cy.get("#myTable").scrollTo("bottomLeft");

while it loops over every element, it doesnt find that element if it is not on the screen at first before the function scrolls down. I mean, if i type a number like "1" in the condition part :

if(Cypress.$(this).find('td:eq(1)').text() == 1 ){
// here it finds the entry 1 in the table, because it is at the first page directly,

// but lets say a type 50 instead of 1 --> now the 50 isnt at the screen. // cypress scrolls down ... I SEE THE NUMBER 50 ON THE SCREEN , BUT CYPRESS WONT see it. }

i tried also to click on the table header so the numbers gets DESC ...so 50 is at first ...wont work either . I tried also to scroll down to the bottom via an offset xy..wont work either.

Upvotes: 2

Views: 2135

Answers (1)

Codex0607
Codex0607

Reputation: 83

For anyone who has the same issue ->

just use a cypress build-in function like this:

cy.contains(yourVariableName).scrollIntoView().click();

here you say to cypress -> first : look at the whole DOM and find this element second : scroll into that element if it is not in the view third : click on that element

FYI : with this function ...you dont have to scroll down step by step to find that element. You dont have to check if there is a scrollbar either.

after these steps you can do anything with it.

Have a nice day

Upvotes: 2

Related Questions