CODEWITHSUNDEEP
jquerycypress
dante
dante

Reputation: 1111

get child element in cypress

I want to get children element which has attribute name "tag-test" and value is "tab"

part of html I want to test is looks like below

  ... 
  <ul
     tag-test="tab"
  >
   <li  />
   <li  />
   <li  />
  />

thow can I get last li from ul as a jquery object?

the below codes I console logged shows

how can I go further from ?

cy.get('ul[tag-test]=tab')
  .then((ul) => { 
     console.log(ul)  // <ul> ... </ul> . 
   })

Upvotes: 0

Views: 14975

Answers (3)

Muditha Perera
Muditha Perera

Reputation: 1252

you can use .find solve our problem

In your case,

cy.get('ul[tag-test="tab"]')
.find('li')
  .then($li => {

     //$li will contain all the li elements inside your ul as an array
     cy.log($li)

     //if you want a specific li item use $li[index]
     cy.log($li[0])

     //if you want the last li item use the length of the returned li array
     cy.log($li[$li.lenght -1])

   })

Upvotes: 0

user9161752
user9161752

Reputation:

To look for the last li within the ul, you can use the CSS pseudo-selector last-child.

For example, using this test fragment

<ul tag-test="tab">
  <li>1</li>
  <li>2</li>
  <li>3</li>        // test should find this one
</ul>

<ul tag-test="another">
  <li>4</li>
  <li>5</li>
  <li>6</li>        // test should ignore this one
</ul>

the test could be

cy.get('ul[tag-test=tab]')
  .find('li:last-child')     // use find here to restrict search to previous subject
  .contains('3')

or to grab the jQuery object

cy.get('ul[tag-test=tab]')
  .find('li:last-child')
  .then($lastLI => {
    expect($lastLI).to.contain(3)
  })

Upvotes: 4

Sanja Paskova
Sanja Paskova

Reputation: 1110

From your code I can see that locator for tag test is not correct, it should look like this:

cy.get('ul [tag-test="tab"]')

With this locator you will get all ul elements with attribute tag-test="tab"

Upvotes: 0

Related Questions