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?]
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!
