How to handle dropdown and Checkbox in puppeteer

How to handle dropdown and checkbox in puppeteer and How to select a value from a dropdown using puppeteer. In this puppeteer tutorial. We will see some examples to handle dropdown, checkbox and radio buttons in puppeteer.

How to handle Checkbox in puppeteer.

puppeteer contains a click(selector, click_count) method to handle checkbox that take two arguments as input. First input as the selector and the second input as click count.

//Click to check box
    await page.click("#tried-test-cafe", {clickCount:1});

How to select a value from the dropdown in puppeteer.

puppeteer has select(selector, value) function to get the value from the dropdown that takes two arguments as input. First as selector and second argument as the value.

//Select value from dropdown
    await page.select("#preferred-interface", "Both");

Radio buttons in puppeteer

We can use the simple Click() function to select a radio button in puppeteer.

//Clicl to radio button
    await page.click("#windows",{clickCount:1});

End To end automation example in puppeteer

Let’s see how to automate a registration form in the puppeteer. In this puppeteer example, we are going to automate a registration form.

TestCase:

  • Launch browser.
  • Navigate to the URL “https://devexpress.github.io/testcafe/example/”.
  • Enter the name.
  • Select a value from the dropdown.
  • Click to the checkbox.
  • Click on the radio button.
  • Enter some text in comment box.
  • Click to submit button.
const puppeteer = require('puppeteer')

describe("Home Page TestSuite",()=>{
     it("Handle Input and buuton in puppeteer",async()=>{
    const browser = await puppeteer.launch({
      headless:false,
      slowMo:100
    })
    const page = await browser.newPage()
    await page.goto("https://devexpress.github.io/testcafe/example/");

    //Enter value in the input
    await page.type("#developer-name", "Bhupendra Patidar");

    //Click to check box
    await page.click("#tried-test-cafe", {clickCount:1});

    //Select value from dropdown
    await page.select("#preferred-interface", "Both");

    //Clicl to radio button
    await page.click("#windows",{clickCount:1});

    //Enter comment..
    await page.type("#comments","This is puppeteer end to end example");

    //Click to submit button
    await page.click("#submit-button");

    //Wait for 5000 seconds
    await page.waitFor(5000);
   await page.close();

  });

    });