AngularJS自动化：无ng-model属性时如何编写XPath定位元素

算力阿峰

2026-5-22

定位无ng-model的AngularJS元素：获取“Average Price”对应的文本

Hey there! Since you’re already solid with Java and Selenium, tackling element locators in Protractor without relying on ng-model is totally manageable—we just need to lean into reliable XPath strategies, plus a few Angular-specific tricks where possible. Let’s break down practical approaches for your "Average Price" scenario.

Common XPath Strategies for Your Use Case

Since you didn’t share the exact HTML structure, I’ll cover the most frequent scenarios you’re likely to encounter:

1. 定位相邻兄弟元素（最常见的情况）

If your HTML looks something like this (label and price in the same parent container):

<div class="price-item">
  <span class="price-label">Average Price</span>
  <span class="price-value">USD 0.01153</span>
</div>

You can target the price by first finding the "Average Price" label, then grabbing its following sibling:

//span[normalize-space(text())='Average Price']/following-sibling::span

normalize-space() handles any extra spaces, newlines, or tabs in the label text, so you don’t miss matches due to messy formatting.

For extra stability, pair it with parent element attributes:

//div[@class='price-item']//span[text()='Average Price']/following-sibling::span[@class='price-value']

2. 基于父容器的文本包含

If the label and price are wrapped in a parent element that contains both, you can use the parent’s text context to narrow things down:

//div[contains(., 'Average Price')]//span[@class='price-value']

This works great if the parent div has the label text somewhere inside it, and the price element has a distinct class or attribute.

3. 结合Angular-specific attributes（即使没有ng-model）

Even without ng-model, Angular elements often have other useful directives like ng-bind, ng-repeat, or custom data-* attributes. For example, if the price is bound to an Angular variable:

<div>
  <span>Average Price</span>
  <span ng-bind="vm.averagePrice">USD 0.01153</span>
</div>

You can skip XPath entirely and use Protractor’s built-in locator for cleaner code:

element(by.binding('vm.averagePrice'))

This is usually more reliable than XPath for Angular apps when such attributes exist.

Protractor Code Example to Retrieve the Text

Once you have your locator, here’s how to get the price text (using async/await, the preferred syntax for newer Protractor versions):

async function getAveragePrice() {
  const priceElement = element(by.xpath("//span[normalize-space(text())='Average Price']/following-sibling::span"));
  const priceText = await priceElement.getText();
  console.log('Average Price:', priceText); // Outputs "USD 0.01153"
}

If you’re using the older promise-based syntax:

element(by.xpath("//span[normalize-space(text())='Average Price']/following-sibling::span"))
  .getText()
  .then(function(priceText) {
    console.log('Average Price:', priceText);
  });

Pro Tips for Stable Locators

Avoid absolute XPaths: Paths like /html/body/div[2]/div[3]/span break instantly when the page structure changes. Stick to relative, attribute/text-based locators.
Prioritize CSS selectors when possible: If the price element has a unique class or ID, CSS is often faster and more readable than XPath. For example: element(by.css('.price-item .price-value')) (just confirm it targets the right element).
Wait for dynamic content: Angular apps load data asynchronously, so wrap your locator in a wait to ensure the element is present before interacting:
```
const EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(priceElement), 5000); // Wait up to 5 seconds
```

内容的提问来源于stack exchange，提问作者Helping Hands