How Do I Traverse The DOM with Cypress Conditionally?

I would like to click the "View profile" button when the firstName of the user is equal to "Luke". There will be many users on one page.

HTML:

<div>
    <div>
        <a datcy="viewProfileButton">View profile</a>
    </div>
    <div>
        <div>
            <div>
                <h5 datacy="firstName">Luke</h5>
            </div>
        </div>
    </div>
</div>

Cypress Test:

cy.get('[datacy="firstName"]').contains($firstName)...

I've got to this point, but I am struggling with .parents() and other Cypress traversing options to move up the div, and then back down.

The .parent() and .children() function are pretty static and can be prone to cause flakiness if the structure of the HTML changes.

I would suggest setting up your HTML to allow for downward traversal from a higher level element.

In your case, if you have a common datacy attribute on the upper most <div> you can use cy.contains() and find() to do all the heavy lifting for you.

<!-- Added a second profile for example -->
<div datacy="profile">
    <div>
        <a datacy="viewProfileButton">View Luke's profile</a>
    </div>
    <div>
        <div>
            <div>
                <h5 datacy="firstName">Luke</h5>
            </div>
        </div>
    </div>
</div>

<div datacy="profile">
    <div>
        <a datacy="viewProfileButton">View Alice's profile</a>
    </div>
    <div>
        <div>
            <div>
                <h5 datacy="firstName">Alice</h5>
            </div>
        </div>
    </div>
</div>

// cy.contains returns the <div datacy='profile'> containing a child with the text 'Luke'
it('get link', () => {
  cy.contains('[datacy="profile"]', 'Luke') 
    .find('a')
    .should('have.text', "View Luke's profile");

  cy.contains('[datacy="profile"]', 'Alice') 
    .find('a')
    .should('have.text', "View Alice's profile");
});

Using cy.contains() to get parent element when child element contains text