Data TestID Selectors

What are TestID Selectors?

TestID selectors target elements using the data-testid attribute, which is a common practice in modern web development for creating stable test hooks. This approach decouples your test selectors from styling or structural changes in your application.

Using getByTestId is generally considered the last resort when other, more semantic selectors (like role, label, or text) aren't available or practical.

Registration Form with TestIDs

This form demonstrates elements with data-testid attributes for direct targeting.

Email Address

Password

Confirm Password

First Name

Last Name

Phone Number

Country

Date of Birth

Subscribe to newsletter

Gender

Male Female Other

Additional Comments

TestID Selectors JSON Configuration

Copy this JSON configuration to test the form with TesterUtilities extension. It uses getByTestId selectors to target elements by their test identifiers.

{
  "url": "(https://pawel-albert.github.io/utilities-for-testing-extension/data-testid-form.html|file:///.*data-testid-form.html)",
  "formData": {
    "registrationForm": {
      "type": "form",
      "timeout": 5000,
      "fields": {
        "email": {
          "selector": "email-input",
          "queryType": "testId",
          "type": "input",
          "data": "test.user@example.com",
          "dataType": "static"
        },
        "password": {
          "selector": "password-input",
          "queryType": "testId",
          "type": "input",
          "data": "SecurePassword123!",
          "dataType": "static"
        },
        "confirmPassword": {
          "selector": "confirm-password-input",
          "queryType": "testId",
          "type": "input",
          "data": "SecurePassword123!",
          "dataType": "static"
        },
        "firstName": {
          "selector": "first-name-input",
          "queryType": "testId",
          "type": "input",
          "data": "John",
          "dataType": "static"
        },
        "lastName": {
          "selector": "last-name-input",
          "queryType": "testId",
          "type": "input",
          "data": "Doe",
          "dataType": "static"
        },
        "phoneNumber": {
          "selector": "phone-input",
          "queryType": "testId",
          "type": "input",
          "data": "+1 (555) 123-4567",
          "dataType": "static"
        },
        "country": {
          "selector": "country-select",
          "queryType": "testId",
          "type": "select",
          "data": "us",
          "dataType": "static"
        },
        "birthdate": {
          "selector": "birthdate-input",
          "queryType": "testId",
          "type": "input",
          "data": "1990-01-15",
          "dataType": "static"
        },
        "newsletter": {
          "selector": "newsletter-checkbox",
          "queryType": "testId",
          "type": "checkbox",
          "data": true,
          "dataType": "static"
        },
        "genderMale": {
          "selector": "gender-male-radio",
          "queryType": "testId",
          "type": "radio",
          "data": true,
          "dataType": "static"
        },
        "comments": {
          "selector": "comments-textarea",
          "queryType": "testId",
          "type": "textarea",
          "data": "This is a test comment using data-testid selectors.",
          "dataType": "static"
        }
      },
      "submit": {
        "selector": "submit-button",
        "queryType": "testId",
        "type": "click",
        "data": null,
        "dataType": null
      }
    }
  }
}

How TestID Selectors Work

In the TesterUtilities extension, TestID selectors use the getByTestId function, which finds elements with the specified data-testid attribute.

// Example of how getByTestId works internally:
function getByTestId(document, id, options = {}) {
  return document.querySelector(`[data-testid="${id}"]`);
}