Leveraging data-qa and ARIA attributes

There have been two new developments in website design where developers can help SDETs maintain robust low-maintenance selectors. Consider this web page element snippet:

<div data-qa="product-card" role="article" aria-label="Product Details">
      <a href="#" data-qa="add-to-cart">Add to Cart </a> </div>

This can be accomplished by adding the data-qa attribute, which is unique and static. Alternately, if the developer team follows the ARIA standard, many text elements can be identified by the aria-label attribute:

//div[contains(@aria-label, 'Product Details')]
//a[contains(@data-qa, 'Add to Cart')]

Here is an example leveraging data-qa and ARIA attributes to ensure that your web application’s elements are accessible and interactable:

describe("Accessibility Testing", function () {
  ...