Complex Form

Combining Multiple Selector Types

Real-world applications often require a combination of selector strategies. This complex form demonstrates how to use multiple selector types together in a single form:

TestID selectors for direct, stable targeting of elements
Role selectors for accessibility-focused approaches
Label selectors for form fields with associated text
Text selectors for buttons and elements with visible content
ShadowDOM selectors for elements inside web components
Nested selectors for targeting elements within containers

Comprehensive Registration Form

This form showcases all selector types working together.

Account Information

Email Address

Password

Personal Information

First Name

Last Name

Phone Number

Country

Account Type

Individual

Personal account for individual use

Business

For companies and organizations

Enterprise

For large corporations with advanced needs

Communication Preferences

Daily

Weekly

Monthly

I agree to the Terms of Service

Complex Form JSON Configuration

Copy this JSON configuration to test the complex form with TesterUtilities extension. It demonstrates how to use multiple selector types in a single configuration.

{
  "url": "(https://pawel-albert.github.io/utilities-for-testing-extension/complex-form.html|file:///.*complex-form.html)",
  "formData": {
    "registrationForm": {
      "type": "form",
      "timeout": 5000,
      "fields": {
        "email": {
          "queryType": "role",
          "selector": "textbox",
          "queryOptions": { "name": "Email" },
          "type": "input",
          "data": "test.user@example.com",
          "dataType": "static"
        },
        "password": {
          "queryType": "testId",
          "selector": "password-field",
          "type": "input",
          "data": "SecurePassword123!",
          "dataType": "static"
        },
        "firstName": {
          "queryType": "label",
          "selector": "First Name",
          "type": "input",
          "data": "John",
          "dataType": "static"
        },
        "lastName": {
          "queryType": "label",
          "selector": "Last Name",
          "type": "input",
          "data": "Doe",
          "dataType": "static"
        },
        "businessPhone": {
          "queryType": "label",
          "selector": "Phone Number",
          "queryOptions": { "index": 0 },
          "type": "input",
          "data": "+1 (555) 987-6543",
          "dataType": "static"
        },
        "personalPhone": {
          "queryType": "label",
          "selector": "Phone Number",
          "queryOptions": { "index": 1 },
          "type": "input",
          "data": "+1 (555) 123-4567",
          "dataType": "static"
        },
        "country": {
          "queryType": "shadowDOM",
          "selector": "custom-select select",
          "type": "select",
          "data": "us",
          "dataType": "static"
        },
        "accountType": {
          "queryType": "text",
          "selector": "Individual",
          "type": "click",
          "data": null,
          "dataType": null
        },
        "communicationFrequency": {
          "queryType": "nestedSelector",
          "selector": "preferences-section",
          "selectorType": "testId",
          "childSelector": {
            "queryType": "label",
            "selector": "Daily",
            "type": "click",
            "data": null,
            "dataType": null
          }
        },
        "terms": {
          "queryType": "id",
          "selector": "terms",
          "type": "checkbox",
          "data": true,
          "dataType": "static"
        }
      },
      "submit": {
        "queryType": "role",
        "selector": "button",
        "queryOptions": { "name": "Create Account" },
        "type": "click",
        "data": null,
        "dataType": null
      }
    }
  }
}

Selector Strategy Decision Tree

When deciding which selector type to use for an element, follow this priority order:

Role Selectors: Best for standard UI controls that have well-defined roles in accessibility APIs.
{ "role": "button", "name": "Submit" }
Label Selectors: Excellent for form fields with associated text labels.
{ "label": "Email Address" }
Text Selectors: Good for elements with distinctive visible text content.
{ "text": "Create Account" }
TestID Selectors: Use when other selectors are unstable or unavailable.
{ "testId": "submit-button" }
ShadowDOM Selectors: Required for elements inside shadow DOM components.
{ "shadowSelector": "custom-element input" }

Advanced Targeting Techniques

For complex scenarios, you can use these advanced techniques:

Nested Selectors: Target elements within a specific container using childSelectors.

{
  "querySelector": { "testId": "preferences-section" },
  "childSelectors": [
    {
      "action": "click",
      "querySelector": { "label": "Daily" }
    }
  ]
}

Index Selection: Specify which occurrence of an element to target when multiple matches exist.
```
{ "label": "Phone Number", "index": 1 }
```
Exact Matching: Use exact matching for more precise text or label targeting.
```
{ "text": "Submit", "exact": true }
```