Inspector - AI-Powered Element Inspector

The Inspector feature in Testio.AI allows you to inspect web elements and generate accurate locators for popular test frameworks and programming languages. With a seamless interface and AI-powered suggestions, it helps testers simplify element identification and improve test reliability.

How to Use the Inspector

Step 1: Open Testio.AI

1. Launch the Testio.AI Chrome extension by clicking its icon in the browser toolbar.
2. Create a new workspace or open an existing workspace.
3. Navigate to the Inspector feature.

You will see:

• A dropdown to select your Test Framework (e.g., Selenium, Cypress, Playwright).
• A dropdown to select your Programming Language (e.g., Java, TypeScript, Python, C#).

Step 2: Start Element Inspection

1. Click on the Element Inspector button (sparkle icon ✨).
2. A highlight cursor will appear.
3. Select any web element on the page that you wish to inspect.

Step 3: View DOM Structure

Once an element is selected, the Inspector displays:

1. Detailed DOM Structure – Including tagName, id, className, attributes, and context for AI.
2. Parent Context – View the hierarchical structure of parent elements for better clarity.
3. Previous Siblings Context – View the hierarchical structure of previous sibling elements for better clarity.
4. Next Siblings Context – View the hierarchical structure of next sibling elements for better clarity.

Example DOM Structure:

{
  "category": "forms",
  "tagName": "button",
  "className": "omni-1wgx5kn",
  "textContent": "Sign in",
  "attributes": {
    "_ngcontent-ng-c2637237895": "",
    "data-testtarget": "sign-in-submit-button",
    "type": "submit",
    "omnibutton": "",
    "class": "omni-1wgx5kn"
  },
  "context": {
    "parents": [
      {
        "tagName": "div",
        "className": "ci-margin-bottom-medium ci-margin-top-xlarge",
        "attributes": {
          "_ngcontent-ng-c2637237895": "",
          "class": "ci-margin-bottom-medium ci-margin-top-xlarge"
        }
      },
      {
        "tagName": "div",
        "className": "",
        "attributes": {
          "_ngcontent-ng-c2637237895": ""
        }
      }
    ],
    "previousSiblings": [],
    "nextSiblings": []
  }
}

Step 4: AI Analysis for Locators

Once the DOM Structure is displayed, AI Analysis section provides accurate and robust locators for the selected element. The generated locators are tailored to the chosen test framework and programming language.

AI-Generated Locators Examples

The locators are presented in multiple strategies to ensure flexibility and reliability:

1. By Test ID: Targets elements using custom data attributes.
2. By Label: Uses the visible label of the element.
3. By Role with Name: Targets elements using their accessibility roles and name attributes.
4. By ID: Selects elements with unique IDs.
5. By Attributes (e.g., aria-describedby): Utilizes accessibility attributes for more robust targeting.
6. By XPath: Utilizes XPath axes, functions, and attributes for more robust targeting.
7. By CSS Selectors: Utilizes CSS selectors and attributes for more robust targeting.

Playwright with TypeScript

// By text content
page.getByText('Companies14')
 
// By role with text
page.getByRole('button', { name: 'Companies14' })
 
// By data attribute
page.locator('button[data-active="false"]')
 
// Combined with parent context
page.locator('div.flex button:has-text("Companies14")')

Selenium with Java

// By text content
By.xpath("//button[text()='Companies14']")
 
// By tag and text
By.xpath("//button[contains(text(),'Companies14')]")
 
// By data attribute
By.cssSelector("button[data-active='false']")
 
// By relative position to previous sibling
By.xpath("//button[text()='People7']/following-sibling::button")
 
// By parent relationship
By.xpath("//div[@class='flex']//button[text()='Companies14']")
 
// By tag position
By.xpath("(//button)[2]")

Playwright with Python

# By text content
page.locator("button:text('Companies14')")
 
# By role and text
page.get_by_role("button", name="Companies14")
 
# By data attribute
page.locator("[data-active='false']")
 
# Combining multiple attributes
page.locator("button[data-active='false']:text('Companies14')")
 
# With parent context
page.locator("div.flex button:text('Companies14')")

Selenium with C#

// By text content
driver.FindElement(By.XPath("//button[text()='Companies14']"));
 
// By relative xpath using previous sibling
driver.FindElement(By.XPath("//button[text()='People7']/following-sibling::button"));
 
// By data attribute
driver.FindElement(By.CssSelector("button[data-active='false']"));
 
// By parent relationship
driver.FindElement(By.XPath("//div[@class='flex']//button[text()='Companies14']"));
 
// By relative locator
RelativeLocator.WithTagName("button").ToRightOf(By.XPath("//button[text()='People7']"));

Cypress with TypeScript

// Using contains
cy.contains('button', 'Companies14')
 
// Using parent and find
cy.get('.flex').find('button').contains('Companies14')
 
// Using attribute
cy.get('button[data-active="false"]')
 
// Using siblings
cy.contains('button', 'People7').next()
 
// Using parent chain
cy.get('.flex').children('button').last()

Puppeteer with TypeScript

// By text content
await page.$eval('button:text("Companies14")', el => el.click())
 
// Using page.$
await page.$('[data-active="false"]')
 
// Using page.$$
const elements = await page.$$('button.company-button')
 
// By XPath
await page.$x('//button[contains(text(), "Companies14")]')
 
// With parent context
await page.$('div.flex button:has-text("Companies14")')
 
// Combining selectors
await page.evaluate((selector) => {
  const element = document.querySelector(selector)
  if (element) element.click()
}, 'button[data-active="false"]:has-text("Companies14")')

Step 5: Save Elements

The Save Elements feature allows testers to store inspected elements and their generated locators for future reference. This helps manage locators efficiently and reuse them across multiple test scripts.

1. After inspecting an element and generating locators, click on the Save Element button.
2. The element is stored in the Saved Elements section with the following details:
   • Tag Name: The HTML tag of the element (e.g., input, button).
   • Framework: The selected test framework (e.g., Selenium, Playwright).
   • Language: The chosen programming language (e.g., Java, TypeScript).
   • Timestamp: Time when the element was saved.

Features of Saved Elements

1. View Saved Elements
   • Saved elements are displayed in a list format under the Saved Elements section.

2. Tag and Search

   • Each saved element will be tagged for better organization.
   • Use the search bar to quickly find specific saved elements by tag name.

3. Filter Elements

   • Use the dropdown to filter and sort saved elements, e.g., Latest or Oldest.

4. Delete Unused Elements

   • Remove obsolete elements using the Delete button.

Use Case

Simplifying Web Element Inspection

The Inspector feature in Testio.AI streamlines the process of identifying, analyzing, and generating locators for web elements, making it an essential tool for web testers.

Scenario: Validating a Login Form

Objective: Automate test scripts for a login form containing Username, Password, and a Submit button.

Steps:

1. Inspect Elements: Use the Element Inspector to inspect the Username, Password, and Submit button fields.
2. Generate Locators: Generate locators for each field using AI Analysis in frameworks like Playwright, Selenium, or Cypress.
3. Save Locators: Use the Save Elements feature to store and tag locators for future reuse.

Example Locators for Playwright (TypeScript):

// Username field
page.getByLabel('Username').fill('testuser');
 
// Password field
page.locator('[data-testid="password"]').fill('password123');
 
// Submit button
page.locator('#submitButton').click();

Benefits

The Inspector feature in Testio.AI offers significant advantages to web testers:

AI-Powered Locators

• Automatically generate robust and reliable locators for any web element.
• Supports multiple locator strategies (e.g., ID, class, test attributes, and roles).

Multi-Framework and Language Support

• Generate locators for popular frameworks like Selenium, Playwright, Cypress, and WebDriverIO.
• Supports languages such as Java, Python, TypeScript, and C#.

Improved Productivity

• Eliminate manual inspection of elements and reduce time spent debugging unreliable locators.
• Save and organize locators for future reuse, minimizing repetitive tasks.

Enhanced Test Reliability

• Use attributes, labels, and roles to create resilient locators that adapt to UI changes.
• Avoid fragile selectors by leveraging AI recommendations.

User-Friendly Interface

• Easy-to-use UI for inspecting elements, generating locators, and saving results.
• Seamless navigation for managing saved locators with tags and filters.

Conclusion

The Inspector feature empowers testers to inspect, generate, and organize web element locators with ease. By combining AI-powered precision with a user-friendly interface, Testio.AI helps you:

• Streamline element identification.
• Automate test script generation.
• Save time and boost testing productivity.

Start using the Inspector today to simplify your testing workflows and ensure robust, reliable test automation! 🚀