Last updated on July 30th, 2025 at 12:22 pm
Locating elements accurately is one of the most important skills in browser automation. If you’re using Playwright for testing or scraping, identifying page elements using the correct selectors is essential to building stable and maintainable scripts. The ID element locator is one of the most dependable and beginner-friendly methods for locating elements, which is achieved by using the HTML id attribute.
This tutorial will walk you through the ID locator in Playwright, covering everything from basic syntax to common use cases, practical code examples, and best practices. By the end, you’ll be able to confidently use ID selectors to find and interact with page elements in your automation workflows.
What is ID Element Locator in Playwright?
The ID locator refers to a method of selecting HTML elements using the value of their ID attribute. In HTML, IDs are supposed to be unique within a page. This makes them a powerful and efficient way to locate elements when writing automated Playwright scripts.
Playwright supports various types of element selectors, such as CSS selectors, XPath, and built-in queries like getByRole. Among these, the ID locator is often the easiest and most reliable, especially for beginners.
When you need to automate form interactions, click buttons, or validate specific content, using ID can help simplify your logic and reduce test flakiness.
Basic Syntax for ID Locator
In Playwright, you can locate elements by ID using CSS syntax. The most common way is with the page.locator() method:
await page.locator('#login-button');Here’s what’s happening:
- The # symbol is used to denote an ID in CSS selector syntax.
- “submit-button” is the value of the element’s id attribute.
You can also use other methods like page.$() (to fetch a single element) or page.$$() (to fetch multiple matching elements), but locator() is more modern and preferred.
await page.$('#elementId');However, using locator() is recommended in modern Playwright tests.
Examples of Using ID Element Locator
Let’s look at a simple HTML snippet:
<input type="text" id="username" />
<button id="submit-btn">Submit</button>You can locate and interact with these elements in Playwright like this:
await page.locator('#username').fill('playwrightUser');
await page.locator('#submit-btn').click();Real World Example to Locate Element by ID
const { test, expect } = require('@playwright/test');
test('Example to locate element by ID in Playwright', async ({ page }) => {
await page.goto('https://only-testing-blog.blogspot.com/2015/03/chart.html');
//Locate input text by ID and fill text
await page.locator('#tooltip-1').fill('playwrightUser');
});
Code Breakdown
- page.locator(‘#tooltip-1’) will locate the element by id tooltip-1
- fill(‘playwrightUser’) will fill the text in the input textbox.
Advantages of Using ID Element Locator
Using ID selectors in Playwright comes with several benefits:
- Uniqueness: IDs are unique on a web page, reducing selector conflicts.
- Performance: Browsers can quickly resolve element IDs, improving script speed.
- Simplicity: Easy to read, write, and debug.
- Low maintenance: ID attributes are less likely to change than dynamic class names or structure-based selectors.
ID Element Locator Best Practices
To make the most of ID locators in your Playwright scripts:
- Use semantic and stable IDs: Ensure IDs are not auto-generated or dynamically changing.
- Follow naming conventions: Use readable and descriptive IDs (#submit-btn, #user-email) for clarity.
- Prefer page.locator() over page.$(): The newer method offers more flexibility and reliability.
- Add waits if needed: Ensure the element is available before interacting.
await page.waitForSelector('#form');
await page.locator('#form').fill('data');When to Avoid ID Locators
Although ID locators are reliable, there are cases when you may want to use other methods:
- When the application uses dynamically generated IDs that change on every load
- If testing a third-party site where you don’t control the HTML
- Element’s IDs are not present at all
In such cases, consider using getByRole, XPath, or CSS class selectors.
Essential Playwright Locators to Learn Next
- XPath Element Locator in Playwright
- Text Element Locator In Playwright
- getByTitle Element Locator in Playwright
- getByAltText Element Locator in Playwright
- getByPlaceholder Element Locator in Playwright
- getByRole Element Locator in Playwright
- getByLabel Element Locator in Playwright
Troubleshooting Common Issues
If you’re having trouble locating an element by ID in Playwright:
- Check the ID in browser dev tools to ensure it exists and matches your selector.
- Wait for the element to load using waitForSelector().
- Verify iframe usage: If the element is inside an iframe, use frame.locator(‘#id’).
- Confirm uniqueness: Ensure no duplicate IDs exist (against HTML standards).
Also, use page.locator(‘#id’).first() if multiple elements somehow share the same ID (even though it’s not recommended in HTML standards).
Conclusion
The ID locator in Playwright is one of the simplest and most effective ways to locate elements for automation. It offers speed, accuracy, and readability, making it perfect for test automation beginners and experts alike. Always use it when you have control over the application’s HTML structure and ensure IDs are stable and unique.
ID Element Locator FAQs
How do I locate an element by ID in Playwright?
Use page.locator('#elementId') where elementId is the HTML ID of the element.
Is using ID locator better than XPath in Playwright?
Yes, ID locators are faster and more reliable than XPath when IDs are available and unique.
What if multiple elements have the same ID?
Although IDs should be unique, use page.locator('#id').first() or consider another locator strategy if duplicates exist.
Hi, I’m Aravind — a seasoned Automation Test Engineer with over 17 years of hands-on experience in the software testing industry. I specialize in tech troubleshooting and tools like Selenium, Playwright, Appium, JMeter, and Excel automation. Through this blog, I share practical tutorials, expert tips, and real-world insights to help testers and developers improve their automation skills.In addition to software testing, I also explore tech trends and user-focused topics, including Snapchat guides, codeless test automation, and more.
