✅ Quick Tip: Use Cypress to find your .parents()

Sometimes, automating a test is straightforward, and sometimes, it’s not. Take grids for example. Adding data-testids helps but there are times when you may not be able to be able to easily select the element you need. Sometimes, the only thing you can do is turn to your .parents()

TL;DR Use .parents() to track which parent element you need to select

 cy.get(".rt-td").parents()

Once, we know which parent to select, we can use .find() to select the element we want to take action on.

Let’s use DemoQA’s Web Tables page to test this out.

Let’s say we need to automate clicking the edit button in a row. We could use the #id available to us…

But what if we wanted to make sure that we are editing the “right” row that includes the name “Cierra”?

Here’s how we can do that.

beforeEach(() => {
  cy.visit("https://demoqa.com/webtables");
});

describe("Find the parents", () => {
  it("Select the parent element to edit the correct row", () => {
    cy.get(".rt-td").contains("Cierra").parents();
  });
});

At first, we’ll leave .parents() empty. Let’s see what happens! 😁

We have sooooo many parents to choose from! But, we only need the parent of the row we want to edit.

Using the Cypress dashboard, click the “parents” displayed in the UI.

Clicking “parents” pins the results in the devTools console inside of Cypress! Right-click “parents” and select “Inspect”

Click the “Console” tab

Here are our choices. Sometimes the choice is clear and sometimes it isn’t. We can go back and check the DOM tree structure or use some good old trial and error to find the parent you need.

cy.get(".rt-td")
      .contains("Cierra")
      .parents("div.rt-tr-group")

Sweet! That selected the whole row! Now, we can pair .find() with .parents() and click the edit button.

cy.get(".rt-td")
      .contains("Cierra")
      .parents("div.rt-tr-group")
      .find("#edit-record-1")

Here’s what it looks like before the button is clicked:

Now, let’s add .click()

cy.get(".rt-td")
      .contains("Cierra")
      .parents("div.rt-tr-group")
      .find("#edit-record-1")
      .click();

💥 Boom!

There’s the registration form!

Here is what our test looks like:

beforeEach(() => {
  cy.visit("https://demoqa.com/webtables");
});

describe("Find the parents", () => {
  it("Select the parent element to edit the correct row", () => {
    cy.get(".rt-td")
      .contains("Cierra")
      .parents("div.rt-tr-group")
      .find("#edit-record-1")
      .click();
  });
});

In automation, sometimes, all we need is a little guidance. In a pinch, .parents() can help us find our way.

Till next time…

All my posts are free to read and clicking subscribe will bring each post to your inbox. If my work brings you joy, and you’d like to support it, you can become a paid subscriber by clicking the button above. If a paid subscription is not your thing, you can support my caffeine addiction writing by clicking the button below! Thanks!

Written with Ultimate Spacefolk Banjo Compilation || 2+ Hours Ethereal Vibes Playlist playing in the background