WebElement Operations in Puppeteer

With Puppeteer, We can perform all the operations that we perform on a webpage and objects on webpage manually.

Most of the time web pages involve in clicks, setting values, dragging & dropping, state of the elements and the text in the elements.

To perform any operation in Puppeteer, we have to find the element/elements on the webpage.

Click an Element in Protractor

We can perform clicking operation using the Puppeteer, before performing the click operation we have to uniquely find the elements using locators

The height and width of element must be more than 0px to click the element using Puppeteer

anugularjs-website-puppeteer

Program to perform click operation in Puppeteer.

const puppeteer = require('puppeteer');
async function run(){
    const browser = await puppeteer.launch({headless:false})
    const page = await browser.newPage()
    await page.goto('https://angularjs.org/');
    await page.click(".container p.site-notice.visible-desktop a")
}
run()

Set text to fields in Puppeteer

type() method in Puppeteer sets the text into an editable element (textbar, text area, button) without replacing the previously available content.

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/');
    await page.type("[name='q']", "chercher tech")
}
run()

If you have executed the above code, you might have received below output.

puppeteer-type-text-value

type with Delay:

When we set the text to the any field on webpage, we can make the puppeteer to enter the text wth some dealy for each character using the {delay:time_interval}, here the time_interval is in milli-seconds.

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/');
    await page.type("[name='q']", "chercher tech", {delay:500})
}
run()
type-with-delay-puppeteer

Get Text of an element in Puppeteer

The values present between > < are considered as text in HTML, textContent will help you get the text out of an attribute. Puppeteer will fetch the values of the text, not only current element text but also the text of other elements inside that element.

textcontent-puppeteer

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(".gb_d[data-pid='23']", 
                element=> element.textContent)
    await console.log(link)
}
run()

getAttribute of an Element in Puppeteer

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

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(".gb_d[data-pid='23']", 
                element=> element.getAttribute("data-pid"))
    await console.log(link)
}
run()
Second way of getting Attribute:

BUt above one may or maynot work for all the attributes, so in such cases try to use the below method to get the Attribute of an 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(".gb_d[data-pid='23']", 
                element=> element.href)
    await console.log(link)
}
run()
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions

Protractor Training