Search⌘ K
Home
Courses
Front-end Testing 101: Integration and End-to-end Testing

Dom Elements Selection: data-testid

Explore how to select stable DOM elements for end-to-end tests using the data-testid attribute. Understand why common selectors can cause fragile tests and learn to implement dedicated attributes that improve test reliability and error diagnosis.

We'll cover the following...

data-testid

The following is a deterministic event test:

C++
context("Signup flow", () => {
  it("The happy path should work", () => {
    cy.visit("/register");
    cy.get(".form-control").then($els => {
      const random = Math.floor(Math.random() * 100000);
      cy.get($els[0]).type(`Tester${random}`);
      cy.get($els[1]).type(`user+${random}@realworld.io`);
      cy.get($els[2]).type("mysupersecretpassword");
    });
    cy.get("button").click();
    cy.contains("No articles are here", { timeout: 10000 }).should("be.visible");
  });
});

As we’ve seen, one of the defects of the above test is its uselessness while something goes wrong while retrieving the elements.

The HTML of the RealWorld form is as follows:

C++
<form>
  <fieldset>
    <fieldset class="form-group">
      <input
        class="form-control form-control-lg"
        type="text"
        placeholder="Username"
        value=""
      />
    </fieldset>
    <fieldset class="form-group">
      <input
        class="form-control form-control-lg"
        type="email"
        placeholder="Email"
        value=""
      />
    </fieldset>
    <fieldset class="form-group">
      <input
        class="form-control form-control-lg"
        type="password"
        placeholder="Password"
        value=""
      />
    </fieldset>
    <button class="btn btn-lg btn-primary pull-xs-right" type="submit">
      Sign up
    </button>
  </fieldset>
</form>

If we want to avoid using the order of elements for the foundation of our test, we can leverage:

  • The type: text, email, and password

  • The placeholder ...