Puppeteer - Locators

We can handle elements on page with Puppeteer. Once we navigate to a webpage, we have to interact with the webelements available on the page pke cpcking a pnk/button, entering text within an edit box, and so on to complete our automation test case.

For this, our first job is to identify the element. To get the property of an element uniquely we need to inspect it (right-cpck on the element then select the option Inspect). The ElementHandle objects are created by the methods - page.$, page.$$ and page.$x. These objects refer to an element or tag in a page.

To determine an element uniquely, we can either take the help of any of the attributes within the html tag or we can use a combination of attributes on the html tag. Mostly the id attribute is used since it is unique to a page.

However, if the id attribute is not present, we can use other attributes pke the class, name, and so on. In case the attributes pke id, name, and class are not present, we can utipse a distinct attribute available to only that tag or a combination of attributes and their values to identify an element. For this, we have to use the xpath expression.

Methods to locate elements

These methods are psted below −

page.$(locator value)

This method yields a Promise with the ElementHandle. The ElementHandle is an object of the identified element. If there are multiple elements having the same locator value, then only the first matching element from the top left corner of the page shall be returned.

page.$$(locator value)

This method yields a Promise with an array of ElementHandle. If there are multiple elements having the same locator value, then all matching elements shall be returned in the form of an array.

page.$x(xpath value)

This method yields a Promise with an array of ElementHandle. If there are multiple elements having the same xpath value, then all matching elements shall be returned in the form of an array. In case, there is one matching element, then the array returned shall have a single element.

The ElementHandle methods pke elementHandle.$, elementHandle.$$ and elementHandle.$x can be appped to an element. In that case, an element shall be searched within the DOM of the present ElementHandle and not in the entire DOM.

In the below given image, let us take the example of an element having the p tag(having a parent element ul) and class attribute value as heading.

To identify it using the ElementHandle method on the page, the expression should be as follows −

const n = await page.$(".heading")

To identify it using the ElementHandle method on an element, the expression should be −

const m = await page.$("ul") 
const p = await m.$(".heading")

Now, refer the image given below of an element having the p tag

Types of Locators

The types of locators in Puppeteer are psted below −

ID

Class

Type

Xpath

Attribute

Type

To work with the above locators we should have the basic understanding of HTML code. 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 the element.

For example, in the expression id = "gsc-i-id1", text to the left of = is the attribute name (id) and to the right of = is the attribute value (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.

Let us take an example of an element having the below html code −

We can identify the first checkbox in the above image, with the expression −

const n = await page.$("input[type= checkbox ]")

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 checkBoxHandle(){
   //launch browser in headed mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto( https://the-internet.herokuapp.com/checkboxes )
   //identify element with xpath then cpck
   const n = await page.$("input[type= checkbox ]")
   n.cpck()
   //wait for sometime
   await page.waitForTimeout(4000)
   //verify if checkbox is checked
   const v = await (await n.getProperty("checked")).jsonValue()
   console.log(v)
}
checkBoxHandle()

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

node <filename>

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

node testcase1.js

After the command has been executed successfully, the boolean value true is printed in the console. This is returned by getProperty("checked") which returns true as the checkbox is selected.