Find Element(s) using Playwright

Table of content

• Find Element(s) using Playwright javascript

For example, in Gmail, there are different elements. The options such as search, compose, inbox, outbox, trash, etc.., are the web page elements.



The address is used to identify the web page elements that are termed as locators. Locators are very important because with the help of the locators only we will be taking action on those elements.

These locators are called as CSS selectors. CSS Locator is an expression formed with the attributes of the HTML elements, to identify the element uniquely.

In this example we will be using the idname of the element as the CSS selector. I have visited to the https://chercher.tech/practice/dynamic-table webpage and hit ctrl+shift+i. After that, dev tool gets open.

To inspect the elements, you have to select the 1st cursor icon that is highlighted in the below image. After that when you hover on an element then the CSS of the element will display. Using the CSS we can take action on that specific element.


Now let's try to click the button blueberry using playwright. To perform that action you have to grab the CSS value and use it inside the click(<CSS>). In playwright you can decide the action first and then you can provide the CSS like below,

 await page.click("#blue")

Example :

const {chromium} = require("playwright");
(async () => {
    const browser = await chromium.launch({
        headless: false
    })
    const page = await browser.newPage();
    await page.goto("https://chercher.tech/practice/dynamic-table")
   //Selecting the blueberry button
    await page.click("#blue")
    await page.close()
    await browser.close()
})();

Output: When you execute the script the Chromium browser like the below image popups and closes. And you can see a text saying blueberry is clicked.

Finding single element

To find a single element "$" is used. You can use only "$" to get an element or you can use it with eval() as $eval()

Using $ function

await page.$("#blue")

When you use "$" function you cannot perform any actions like click() in the same line, like await page.$("#blue").click(). If you execute it will throw an error by saying promises are not handled.

So always you have to give the action commands in the next line by using the awaitfunction like below,

//Storing the value of the element in a variable
var button = await page.$("#blue")
await button.click()

Example:

const {chromium} = require("playwright");
(async () => {
    const browser = await chromium.launch({
        headless: false
    })
    const page = await browser.newPage();
    await page.goto("https://chercher.tech/practice/dynamic-table")
    //find the single element
    var button = await page.$("#blue")
    //whenever you use $ sign perform the operations on the next line
    await button.click()
    await page.close()
    await browser.close()
})();

Using $eval()

The another way to get the element is by using the evaluate method .eval(). In this method, you can pass two arguments one is the CSS of the element and the action to perform on the element.

//Getting the element and performing action
    await page.$eval("#blue", e=>e.click())

Example :

const {chromium} = require("playwright");
(async () => {
    const browser = await chromium.launch({
        headless: false
    })
    const page = await browser.newPage();
    await page.goto("https://chercher.tech/practice/dynamic-table")
 //Getting the element and performing action
    await page.$eval("#blue", e=>e.click())
    await page.close()
    await browser.close()
})();

In the above script instead of await page.$eval("#blue", e=>e.click()) if you give console.log(await page.$eval("#blue", e=>e.textContent)) you can get the text of the element.

Example program :

const {chromium} = require("playwright");
(async () => {
    const browser = await chromium.launch({
        headless: false
    })
    const page = await browser.newPage();
    await page.goto("https://chercher.tech/practice/dynamic-table")
 //Getting the element and performing action
    console.log(await page.$eval("#blue", e=>e.textContent))
    await page.close()
    await browser.close()
})();

Output :

Finding more than one element

To find more than one element "$$" is used. Here also you can use only "$$" to get element or you can use it with eval() as $$eval() .

Using $$

To get the element with the CSS "button" the .$$("button") is used and to print the number of matching elements the buttonArray.length is used. If you want to perform any action on the element you have to perform in the next line as we have got the length of the element.

var buttonArray = await page.$$("button")
console.log(buttonArray.length)

Example :

const {chromium} = require("playwright");
(async () => {
    const browser = await chromium.launch({
        headless: false
    })
    const page = await browser.newPage();
    await page.goto("https://chercher.tech/practice/dynamic-table")
    var buttonArray = await page.$$("button")
    console.log(buttonArray.length)
    await page.close()
    await browser.close()
})();

Using $$eval()

The below line also gets the elements which has the matching CSS as "button" and he number of elements which has the CSS as "button".In this method, you can pass two arguments one is the CSS of the element and the action to perform on the element.

console.log(await page.$$eval("button", e=>e.length))

Example :

const {chromium} = require("playwright");
(async () => {
    const browser = await chromium.launch({
        headless: false
    })
    const page = await browser.newPage();
    await page.goto("https://chercher.tech/practice/dynamic-table")
    console.log(await page.$$eval("button", e=>e.length))
    await page.close()
    await browser.close()
})();

What happens when you grab a wrong CSS?

When you execute the program eventhough it is a wrong CSS the script never throws an error because it returns NULL value. Only if you have performed any actions on the element like below script, the error will be visible in the terminal.

var buttonArray = await page.$("buttongljkklijk")
console.log(buttonArray.length)

Example :

const {chromium} = require("playwright");
(async () => {
    const browser = await chromium.launch({
        headless: false
    })
    const page = await browser.newPage();
    await page.goto("https://chercher.tech/practice/dynamic-table")
    await page.$("buttongljkklijk")
    await page.close()
    await browser.close()
})();

PS C:\Users\ASUS\OneDrive\Desktop\Letsplaywright> node .\FE.js
(node:10768) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of null
at C:\Users\ASUS\OneDrive\Desktop\Letsplaywright\FE.js:19:25
(Use `node --trace-warnings ...` to show where the warning was created)
(node:10768) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either 
by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). 
To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:10768) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. 
In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I am Tharani N V, a Content writer, and SEO specialist. I have a year of experience in both technical and non-technical content writing.