Modern Web Testing Role‑Based Locators vs. Traditional XPath/CSS

Technology

CMS Testing

Daniel Teran

Dec 22, 2025

In software development, especially when developing CMS solutions, dynamic content presents a challenge for automation. Maintaining automated tests for dynamic content can be time-consuming, but new automation tools are making this process easier.

One of the most critical decisions is choosing the right locator—one that points to a specific element and continues working even when the page structure changes.

Selenium remains widely used in automation, largely due to its 20+ year history and 22–35% market share. Many projects still require maintenance, and while some are migrating to newer frameworks, many companies adopt Playwright or Cypress using the same architecture that Selenium had. This approach wastes modern functionalities.

Playwright supports traditional locators, such as XPath and CSS, just as other automation tools do. However, it also offers role-based and text-based locators.

When Oshyn migrated from Selenium to Playwright, we initially copied the same locator strategy. Despite Playwright being faster and more efficient, our tests maintained the same level of flakiness. After we started using Playwright's modern locators, it initially seemed like the wrong path. However, over time, we realized that the tests had become much more resilient.

While XPath has a complex syntax and relies on page structure, role-based locators interact with the page as if a screen reader were navigating it.

Let’s dive into more details:

Traditional Locators (Most of the Frameworks)

XPath

It has complex syntax.
Can change with small changes in the UI
Performance impact on large DOM trees
Example: //button[@id='submit'] or //div[contains(@class, 'menu')]//a[text()='login']

CSS Selectors

More concise than XPath
Better performance than XPath
Example: button#submit or .menu a[href='/login']

Modern Locators (Playwright)

Role-based Locators

Based on ARIA roles and accessibility attributes
More resilient to UI changes
Follows actual user interaction patterns
Example: getByRole('button', { name: 'Submit' })

Text-based Locators

Locate elements by their visible text
Intuitive and mimics how users find elements
Not suitable for a CMS project, as the content is likely to change.
Useful for certain processes because some writing is standard and usually does not change, such as Sign up, Information text boxes, i.e., Name, Password
Example: getByText('Sign up') or getByLabel('Password')

Comparing Element Location Strategies

Let’s suppose that we have a login page:

Here is how the locator will look:

Element	Traditional Locators (Selenium)	Modern Locators (Playwright)
Username field	`//input[@id="username"]`	`getByRole('textbox', { name: 'Username' })`
Password field	`//input[@id="password"]`	`getByRole('textbox', { name: 'Password' })`
Login button	`//button[@type="submit"]`	`getByRole('button', { name: 'Login' })`

Then the Company decides to make a rebranding:

Rebranded Login page example — Version 2

Here is how the locator will look:

Element	Traditional Locators (Selenium)	Modern Locators (Playwright)
Username field	`//input[@name="username"][@type="text"]`	`getByRole('textbox', { name: 'Username' })`
Password field	`//input[@name="password"][@type="password"]`	`getByRole('textbox', { name: 'Password' })`
Login button	`//button[@type="submit"]`	`getByRole('button', { name: 'Login' })`

As you can see, even with a rebranding, the Playwright locators remain the same—and the end-to-end tests continue to work.

Key Advantages of Modern Locators

More stable against UI changes and refactoring.
Aligned with how users perceive and interact with the page, it's like you are automating with the screen reader.
Improves accessibility.
Reduced maintenance costs for test automation.
Minimum changes on test, even when the page suffers a rebranding.

When to Use Which Approach

Use modern locators for new projects and maintainable tests.
Traditional locators are still helpful for complex DOM structures or legacy applications.
Nevertheless, always consider a hybrid approach.

Why are modern locators becoming more popular in web testing?

Traditional locators, such as XPath and CSS selectors used in Selenium, often create flaky tests, especially with modern frontend frameworks. Modern Locators target elements based on their purpose rather than structure.

Benefits of Role-Based Locators

Resilience to UI changes: Tests remain functional through redesigns and structural changes.
Encourages accessibility: Teams are indirectly motivated to build more accessible applications.
More intuitive test code: Test scripts are easier to read and understand.
Reduced maintenance costs: Less time spent fixing broken tests after UI updates.

When to Use Each Approach

While modern locators are generally preferable for new projects, traditional locators still have their place:

Use modern locators for new test automation projects.
Consider traditional locators for extremely complex DOM structures or legacy applications.
It is not recommended to use a base role or text role when creating a reusable component, such as cards or slides, given that this type of content often contains dynamic content.
A hybrid approach can facilitate a smooth transition in established projects.

Wrap Up

Moving from Selenium to a modern automation framework, such as Playwright, is not just a technical change; it’s a shift to make tests more closely resemble how real users interact with an app. This helps create stronger, easier-to-read tests that improve quality and enhance the user experience.

How Oshyn Can Help Your Testing Strategy

Oshyn’s expertise in modern web testing positions us perfectly to help your team achieve higher quality with significant maintenance cost savings. We understand the challenges of testing dynamic content in CMS solutions and can guide you through a transition to a resilient testing strategy. By implementing a hybrid approach that strategically leverages modern locators for stability and traditional locators for complexity, we can help you build an automation suite that is more intuitive, robust against UI changes, and directly aligned with real user interactions and accessibility standards. Partner with Oshyn to transform your testing architecture into a modern, efficient, and reliable system that ensures high application quality and a superior user experience.