Looping through the inconsistent parent object with Cypress

Question

I am writing automated test case with Cypress.

I need to loop through all children of the element and verify its data. The problem is that all the children are object with <a> tags and href value attribute except for the first one.

The first one is wrapped into a span creating the following hierarchy:
parent -> span -> a with href value.

How to organize a loop?

I tried to remove the span element but it is removed with a child <a> inside

Answer 1

If I understand you correctly, here is what can help you.

First, you define whether a current child is a span, if it is you are looking for its child inside a span element and working with found . If it is not a span, do the logic you need:

    cy.wrap(option)
      .children()
      .each(($child, index) => {
        if ($child.is('span')) {
         // Get an <a> element inside <span>
          const linkedinLink = $child.find('a');
          // Do any other logic
          return;
        } else if ($child.is('a')) {
          //Process all children except for the first one
          cy.wrap($child).should('have.attr', 'href', value);
          // Do any other logic
        } else {
          cy.log('Unexpected element type:', $child.prop('tagName'));
        }
      });
  };