Rayrun
← Back to videos

#16 - ARIA and how Playwright is making use of it to identify UI controls?

In this video, we will discuss ARIA - Accessible Rich Internet Application and how Playwright is using ARIA to locate the UI elements in much easier fashion instead of using classical CSS, ID, XPATH selectors.

In this video, we discuss how Playwright makes use of ARIA (Accessible Rich Internet Applications) to improve the accessibility of dynamic content, such as menus, tabs, and modal dialogs, for users with disabilities.

ARIA has three main features: roles, properties, and states. Roles define the specific function of an element in a web application and can include things like buttons, links, checkboxes, and menus. By using these roles, web applications can ensure that users with assistive technology, such as screen readers, can easily navigate and interact with the content on their pages.

To test if an application has accessibility components like ARIA in place, we can use Chrome DevTools, which already supports the Accessibility tab. With Playwright, we can use the getByRole method introduced in version 1.27 to find elements by their ARIA role.

In this video, we also go through an example of how to replace existing code using the new locator strategy, getByRole. We demonstrate how to identify a login link using the ARIA role of 'link' and the name 'login'. Similarly, we demonstrate how to identify a username textbox using the getByLabel method. The same approach can be used for identifying various elements like password inputs and buttons, making our code more readable and maintainable.

In conclusion, Playwright's support for ARIA makes it easier for developers to identify elements and ensure their applications are accessible to users with disabilities. As we continue to explore more complex scenarios in future lectures, we'll learn how to make better use of Playwright's powerful features to create more accessible web applications.

Related Videos

Playwright Live: Español: Comunidad de Playwright, última versión y más
Playwright Live: Español: Comunidad de Playwright, última versión y más
Create feature, steps & config | Playwright & Cucumber - Typescript | Part 1
Create feature, steps & config | Playwright & Cucumber - Typescript | Part 1
Working with multiple elements in Playwright Test (NodeJS)
Working with multiple elements in Playwright Test (NodeJS)
Playwright Version 1.14 | Playwright Tutorial - Part 45
Playwright Version 1.14 | Playwright Tutorial - Part 45
TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.