CODEWITHSUNDEEP
cypress
Jeff
Jeff

Reputation: 1879

Cypress: Traverse document & perform select action in child elements

Goal: In Cypress, traverse tree of <div>, find child <div>s with <select>, and command .select

Simplified, my page document is arranged as follows:

<div.Root>
  ...
    <div.Actions>
      <div.Action>
        ...
          <div.Box>
            ...
              <select.Do>
      <div.Action>
        ...
          <div.Box>
            ...
              <select.Do>

With Cypress, I get stuck traversing children and performing action <select> of each child:

div.Root > div.Actions > div.Action > div.Box > select.Do
                       > div.Action > div.Box > select.Do

Example Cypress.io code, I get as far as finding the child HTMLelement(s) for <div.Action>, but get stuck there not discovering how to traverse further and perform command .select:

cy.get('div.Root').then($divRoot => {
  expect($divRoot.find('div.Actions').length).eq(1);
  cy.get('div.Actions').then( $divActions => {
    expect($divActions.find('div.Action').length).gte(1);

    // Here is where I get lost at to what to do
    // Within each <div.Action>, I want to perform select
    $divActions.find('div.Action').each(($index, $divAction) => {
       // $divAction is not a Cypress element 
       // that can perform commands like get, find, select
    })

Much appreciate assistance

Upvotes: 0

Views: 659

Answers (1)

Josh Bentley
Josh Bentley

Reputation: 91

https://docs.cypress.io/api/commands/each.html#DOM-Elements.

According to the Cypress documentation in the each callback the element is passed first and then the index. In your example you would be trying to perform cypress actions on the index.

Secondly, you have to wrap the dom element that is passed in with cy.wrap to be able to perform cypress actions on that element.

Here's how I was able to do it:

cy.get("div.actions")
  .find("select")
  .each(($el) => {
    cy.wrap($el).select();
  });

Upvotes: 1

Related Questions