Get Attribute in Puppeteer

Table of content

Get Attribute with Puppeteer

Get Attribute with Puppeteer

Attributes are additional information developers include in HTML tags. Attributes help in defining the characteristics of HTML elements.

Attributes are normally defined using "key-value" pairs. The key is the property that a developer wants to set. Let's consider a basic HTML tag with an attribute title.

<h3 class="red" id='3'> Some header </h3>
// here, class, id are keys, red, 3 are respective values

During the test script automation, we might need to fetch the attribute values of specific web elements to verify test scripts.
get-attribute-puppeteer

We can get the attribute using three ways in puppeteer:

getAttribute()
element.attribute
element.getProperty()

getAttribute():

We can get the attribute using getAttribute(attribute_name), getAttribute(attribute_name) method fetches the value of an attribute, in HTML code whatever is present in left side of '=' is an attribute, the value on the right side is the Attribute value.

This method works for all the attributes present in the HTML element

const puppeteer = require('puppeteer');
async function run(){
    const browser = await puppeteer.launch({headless:false})
    const page = await browser.newPage()
    await page.goto('https://google.com')
    var link = await page.$eval("a",
                element=> element.getAttribute("href"))
    await console.log(link)
}
run()

getattribute-using-get-attribute-puppeteer-link

element.attribute

Similar to the getAttribute() funtion, we can use the .attribute function; with this way you cannot get all the sttribute but you can get only the standard attributes, like src, href, and few others.

const puppeteer = require('puppeteer');
async function run(){
    const browser = await puppeteer.launch({headless:false})
    const page = await browser.newPage()
    await page.goto('https://google.com/');
    var link = await page.$eval("a",
                element=> element.href)
    await console.log(link)
}
run()

get-attribute-element-puppeteer

element.getProperty():

You can get attribute from elementhandle using the getProperty().

const puppeteer = require('puppeteer');
async function run(){
    const browser = await puppeteer.launch({headless:false})
    const page = await browser.newPage()
    await page.goto('https://google.com')
    const element = await page.$("a");
    const text = await (await element.getProperty("innerText")).jsonValue();
    console.log(await text);
}
run()

getattribute-using-get-attribute-puppeteer

Get class Attribute:

const element = await page.$("a");
const classValue = await (await element.getProperty("class")).jsonValue();
console.log(await classValue );

Get data attribute

const element = await page.$("a");
const dataValue = await (await element.getProperty("data")).jsonValue();
console.log(await dataValue);

Get Value attribute:

const element = await page.$("a");
const value = await (await element.getProperty("value")).jsonValue();
console.log(await value );

Get css/style Value Attribute

const element = await page.$("a");
const style = await (await element.getProperty("style")).jsonValue();
console.log(await style);

Get Id Attribute

const element = await page.$("a");
const id= await (await element.getProperty("id")).jsonValue();
console.log(await id);

Get Aria Label

const element = await page.$("a");
const ariaLabel= await (await element.getProperty("aria-label")).jsonValue();
console.log(await ariaLabel);

Get href attribute

const element = await page.$("a");
const href = await (await element.getProperty("href")).jsonValue();
console.log(await href);

Get Src Attribute

const element = await page.$("a");
const src= await (await element.getProperty("src")).jsonValue();
console.log(await src);

Get name attribute

const element = await page.$("a");
const name= await (await element.getProperty("name")).jsonValue();
console.log(await name);