Often, I find it helpful to debug HTML elements while locating them in tests by printing the various attributes they contain on the rendered page. To accomplish this, I use a simple piece of code that prints all the attributes as key-value pairs for the rendered page.

[Read, How to wait for API Response in Selenium WebDriver 4?]

[Discover, How GetByRole in PlayWright helps you to ensure accessibility of Application. Additionally read about when we should avoid GetByRole locators]

A sample code in Playwright to print all the attributes of an element identified by <locator>.

const elementAttributes = await page.$eval("locator", (el) = >{
 const attributes = el.attributes;
 const attributeMap = {};
 for (let i = 0; i < attributes.length; i++) {
 attributeMap[attributes[i].name] = attributes[i].value;
 }
 return attributeMap;
});
// Print the attributes and their values
console.log("Element Attributes:");
console.log(elementAttributes);

Thank you for reading this post, don't forget to subscribe!