Puppeteer - Getting Element Attribute

We can get attribute values of an element using Puppeteer. The attributes are added within the HTML tag. They are used to describe the properties of an element. An attribute and its value are defined in a key-value pair.

Let us take an example of an edit box having the below properties −

Here, input is the tagname. A tag in HTML may or may not have attributes. The type, class , name, id and so on are the attributes of this element. For example, in id = gsc-i-id1, text to the left of = is the attribute name(i.e id) and to the right of = is the attribute value(i.e gsc-i-id1).

An attribute may or may not have a value assigned. Also, if a value is assigned, then it should be enclosed in double or single quotes. The value of an attribute is set by a developer as per his choice.

Methods for Element Attribute

The ways to obtain an element attribute are psted below −

getAttribute()

This method is used to get the value of the attribute which is passed as a parameter to this method.

Syntax

The syntax is as follows −

let v = await page.$eval("input", element=> element.getAttribute("class"))

element.<attribute name>

Syntax

The syntax is as follows −

let v = await page.$eval("input", element=> element.class)

element.getProperty()

This method is used to get the value of the attribute which is passed as a parameter to this method.

The syntax is as follows −

Syntax

const n = await page.$("#txt")
const t = await (await n.getProperty( textContent )).jsonValue()

In the below image, let us identify the highpghted edit box and obtain the value of its class attribute - gsc-input.

To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are as follows −

Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed).

The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation.

Right-cpck on the folder where the node_modules folder is created, then cpck on the New file button.

Step 2 − Enter a filename, say testcase1.js.

Step 3 − Add the below code within the testcase1.js file created.

//Puppeteer pbrary
const pt= require( puppeteer )
async function getElementAttribute(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto( https://www.tutorialspoint.com/index.htm )
   //identify element with id
   const n = await page.$("#gsc-i-id1")
   //get class attribute
   let v = await page.$eval("input", n => n.getAttribute("class"))
   console.log(v)
}
getElementAttribute()

Step 4 − Execute the code with the command given below −

node <filename>

So in our example, we shall run the following command −

node testcase1.js

After the command has been successfully executed, the value of the class attribute for the element - gsc-input gets printed in the console.