Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →In Protractor, pass a locator created by the by object to element() to find one element—for example, element(by.id('save')). Use element.all(locator) when you expect a collection. Standard WebDriver locators such as ID, CSS, and XPath work alongside Protractor’s AngularJS-specific helpers, but Protractor reached end-of-life in August 2023, so this guide is for maintaining existing tests rather than choosing a framework for new ones.
How Protractor locators work
A locator describes how to identify a DOM element. Protractor’s by object creates locator objects, and element(locator) wraps one in an ElementFinder that test code can interact with. For multiple matches, use element.all(locator).
As an Amazon Associate I earn from qualifying purchases.
// Find one element by ID
const saveButton = element(by.id('save'));
// Find one element with a CSS selector
const checkoutForm = element(by.css('form.checkout'));
// Find a collection
const rows = element.all(by.css('table.orders tbody tr'));These are Protractor syntax examples; they are not claims of live testing. A single-element lookup should correspond to the element your test intends to use. With a collection, make the intended match explicit—for example, by checking its count or selecting an item by a meaningful condition rather than assuming the first match is correct.
Which Selenium locator strategies can you use?
Selenium’s traditional WebDriver strategies are available for locating elements in Protractor. Use the strategy that makes the target clear and remains meaningful as the page changes.
#1 Best Overall
| Strategy | Protractor example | When it fits |
|---|---|---|
| ID | by.id('save') |
A unique, stable element ID is present. |
| CSS selector | by.css('button.save') |
You need a readable selector based on element type, class, attributes, or structure. |
| Name | by.name('email') |
The element has a useful name attribute. |
| Class name | by.className('save-button') |
A single class identifies the target. For combinations of classes or richer matching, use CSS. |
| Link text | by.linkText('Continue') |
The visible text of a link is an appropriate way to identify it. |
| Partial link text | by.partialLinkText('Continu') |
A stable fragment of link text is sufficient to identify the link. |
| Tag name | by.tagName('button') |
The tag is useful within a narrowed scope or when multiple matches are expected. |
| XPath | by.xpath("//input[@name='email']") |
You need XPath’s expressive matching and can keep the expression understandable. |
For example, a standard WebDriver locator can be used like this:
const emailField = element(by.xpath("//input[@name='email']"));When to use Protractor’s AngularJS locators
Protractor also provides helpers that target AngularJS concepts, including model, binding, and repeater locators. The project’s tutorial demonstrates these with AngularJS markup:
Rank #2
// AngularJS-oriented examples
const firstNumber = element(by.model('first'));
const latestValue = element(by.binding('latest'));
const todos = element.all(by.repeater('todo in todoList.todos'));Do not assume these helpers work in every Angular application. Protractor’s project says model and binding locators are not supported for Angular applications and recommends CSS instead. Its model and binding examples describe AngularJS. For newer Angular pages, prefer a CSS selector that matches the actual DOM, rather than relying on an AngularJS-specific helper.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11How to choose a locator that will last
- Prefer a unique, predictable ID when one exists. Selenium recommends IDs that are unique and predictable.
- Otherwise, choose a clear CSS selector. Keep it short enough that another maintainer can understand what it targets.
- Use XPath when its expressive power helps. Selenium notes that XPath can be flexible but difficult to debug and may be slow; that is guidance, not a claim that every XPath lookup is slow.
- Avoid brittle positional paths. Prefer selectors tied to stable product-facing structure rather than a long chain of incidental DOM positions.
- Scope repeated structures. When a page contains several similar components, identify the relevant parent and find the child within that scope so the intent is clear.
- Make multiplicity explicit. Use
element()for one intended match andelement.all()for a collection, then assert or select the expected result in the test.
Selenium’s locator advice cited here was last modified February 10, 2022; its selector recommendations are documentation guidance, not a recent performance benchmark.
Common locator problems and fixes
| Symptom | Likely cause | What to check |
|---|---|---|
| The lookup does not find an element | The selector does not match the rendered DOM, or it relies on an AngularJS helper unsupported by the application. | Inspect the element’s actual attributes and markup, then try a CSS selector that matches them. Do not assume by.model() or by.binding() applies to modern Angular. |
| A lookup matches the wrong element | The selector is too broad, or repeated components contain similar elements. | Narrow the selector or scope it to the intended parent. For multiple expected matches, use element.all() and specify which item the test needs. |
| The test becomes fragile after markup changes | The locator depends on incidental positions or a long, difficult-to-read structure. | Prefer a stable ID where available, otherwise a compact CSS selector tied to meaningful structure. |
| An XPath is hard to maintain | The expression is doing more matching than the test needs. | Simplify it, or use CSS if CSS expresses the target clearly. Keep XPath for cases where its additional expressiveness is useful. |
Protractor’s status and migration context
The official Protractor site states: “Protractor reached end-of-life in August 2023.” That makes this locator guide most relevant to teams maintaining existing suites. For new test automation, do not treat familiarity with Protractor syntax as a reason by itself to adopt an end-of-life framework.
The Protractor project’s migration discussion describes Selenium WebDriver as one of the closest options in API terms, while warning that its methods are not exact one-to-one replacements. Playwright’s migration guide maps familiar selector forms, including CSS, ID, model-attribute CSS, repeater-attribute CSS, and XPath. These guides can help plan an investigation, but migration still requires reviewing test behavior and rewriting or adapting code where APIs differ.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you only need a screenshot of a page—not an interactive Protractor test—ScreenshotNeo can return an image or PDF from one GET request. For example, using cURL:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Cookie banners, newsletter popups, and chat widgets are removed before capture; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for the free plan.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
