HTML page element access by puppeteer

Now we will access page elements by various kinds of puppeteer methods

Puppeteer Click Method:

Button Click

Syntax:
For selector,
await page.click('selector');
or
let element = await page.$$('selector');
await element[arrayIndex].click();

For XPath,
await page.click('xpath');
or
let element = await page.$x('xpath');
await element[arrayIndex].click();

Let’s start our code

Inspect button element from this site:
https://demoqa.com/buttons
Find the button tag.

Then go to the browser console and write the following JQuery command and hit enter:
$$('button')

Here we found 3 buttons in array index. We will click the buttons individually by the array indexes.

Write following codes inside the describe method:

it.only("Click on button", async () => {
        await page.goto('https://demoqa.com/buttons');
        let buttonSelector="button";
        await page.waitForSelector(buttonSelector); //automatic wait for the button selector
        let buttonElement=await page.$$(buttonSelector); //evaluating button selector
        await buttonElement[3].click(); // single click on button that place in array 3 position
        await buttonElement[1].click({clickCount:2}); //double click on button that placed in array 1 position
        await buttonElement[2].click({button:'right'}) //right click on button that placed in array 2 position

        await page.waitForTimeout(3000); // wait for 3 seconds before the browser close

    })

it.only means we only want to run the specific test

Run test by the following command:
npx mocha --timeout=30000 .\index.test.js

Checkbox Click

Inspect the checkbox menu element.
Find the checkbox menu id.

Go to the browser console. Write this JQuery command and hit enter:
$$("#item-1")

Here, checkbox menu item is in 0 index

Then inspect the checkbox element.

Find the checkbox Id. As there is no checkbox Id, we will take the checkbox class.

Go to the browser console and hit the following JQuery command:
$$('.rct-checkbox')

Found checkbox is in array 0 index.

So, write this code:

it.only("Click on checkbox", async () => {
        await page.click("#item-1"); // click on Checkbox menu from left
        let checkboxSelector=".rct-checkbox"; //checkbox selector
        await page.waitForSelector(checkboxSelector); // automatic wait for the checkbox selector
        let checkBoxElement=await page.$$(checkboxSelector); //evaluating checkbox selector
        await checkBoxElement[0].click(); // click on checkbox

        await page.waitForTimeout(3000); // wait for 3 seconds before the browser close
    })

Run test by the following command:
npx mocha --timeout=30000 .\index.test.js

Radio Button Click

Inspect the radio button menu from left
Find the radio button menu Id

Go to the browser console and hit this JQuery command:
$$('#item-2')

Radio button menu element is in array 0 position

Now inspect the radio button element and find the Id

Now write this codes:

it.only("Click on radio button", async () => {
        await page.click("#item-2"); // click on radio button menu from left
        let radioButtonSelector="#yesRadio";
        await page.waitForSelector(radioButtonSelector);
        let radioButtonElement=await page.$$(radioButtonSelector);
        await radioButtonElement[0].click();

        await page.waitForTimeout(3000);
    })

Run test by the following command:
npx mocha --timeout=30000 .\index.test.js

Puppeteer type in textbox

Syntax:
await page.type('selector','your text');
or
let textBoxElement = await page.$$('selector');
await textBoxElement[arrayIndex].type('your text');

Now inspect textbox menu from the left
Find the textbox menu Id
Go to console and evaluate the menu id by above ways

Now inspect every textboxes and find the id

Then write this code:

it.only("Write on textbox", async () => {
        await page.click("#item-0"); // click on textbox menu from left
        let txtFullNameSelector = "#userName";
        let txtEmailSelector="#userEmail";
        let txtCurrentAddressSelector="#currentAddress";
        let txtPermanentAddressSelector="#permanentAddress";
        await page.waitForSelector(txtFullNameSelector);

        let txtFullNameElement = await page.$$(txtFullNameSelector);
        await txtFullNameElement[0].type("Salman Rahman");

        let txtEmailElement = await page.$$(txtEmailSelector);
        await txtEmailElement[0].type("salmansrabon@gmail.com");

        let txtCurrentAddressElement = await page.$$(txtCurrentAddressSelector);
        await txtCurrentAddressElement[0].type("Gulshan, Dhaka");

        let txtPermanentAddressElement = await page.$$(txtPermanentAddressSelector);
        await txtPermanentAddressElement[0].type("Gulshan, Dhaka");

        await page.waitForTimeout(3000);
    })

If you want to clear a textbox, then add this code below:

//suppose we will clear the permanent address text
        await txtPermanentAddressElement[0].click({clickCount:3});
        await page.keyboard.press("Backspace")

Puppeteer select option from dropdown

Syntax: await page.select('selector', 'option-value');

Inspect the dropdown element

Then write this code:

it.only("Select option from dropdown",async()=>{
        await page.goto("https://demoqa.com/select-menu");
        let dropdownSelector="#oldSelectMenu";
        await page.waitForSelector(dropdownSelector);
        await page.select(dropdownSelector, '2');
        await page.waitForTimeout(3000);
    })

Puppeteer get text from page

Syntax:
let textElement= await page.$x('xpath');
let text = await page.evaluate(e=>e.textContent,textElement[0]);
console.log(text);

Write following code to implement:

it.only("Get text from page",async()=>{
        await page.goto("https://demoqa.com/elements");
        let messageXPath="//div[contains(text(),'Please select')]";
        await page.waitForXPath(messageXPath);
        let lblMessageElement= await page.$x(messageXPath);
        let messageText=await page.evaluate(e=>e.textContent,lblMessageElement[0]);
        console.log(messageText);
    })

Run test by the following command:
npx mocha --timeout=30000 .\index.test.js