CODEWITHSUNDEEP
puppeteer
Lancey
Lancey

Reputation: 51

How to select a radio button using puppeteer

I am a first time user of puppeteer and not an engineer / coder!

I have been able to generate most of the form I'm trying to using puppeteer, however I am getting stuck on radio buttons. The developer tools in the webform is showing the following for the field:

<input id="Mortgagees_0__MortgageeType" name="Mortgagees[0].MortgageeType" type="radio" value="COR">

Using: await page.click('#Mortgagees_0__MortgageeType', 'COR') that most help pages online provide doesn't seem to work (no error, it just doesn't select the option I want)

I've tried several other variations, like below, also not working:

wait page.click('input[id=Mortgagees_0__MortgageeType]', 'COR')

I can see the "input id" is different compared to other id fields, but not sure what to do differently.

Please help? This is the webform I'm trying to populate: http://lrforms.arnecc.gov.au/lrforms/NationalMortgageForm/Entry

Upvotes: 5

Views: 9262

Answers (1)

pavelsaman
pavelsaman

Reputation: 8352

Provided the element is actually there and could be clicked, there's no reason why this:

await page.click('#Mortgagees_0__MortgageeType');

wouldn't work. I don't know what that "COR" parameter is, but that's not how you use page.click().

If this doesn't work, try to find if that element is actually present on the page at the time Puppeteer tries to click it. You might need to preceed the click with page.waitForSelector() or in general wait for the page to load etc.

You can also try this:

await page.evaluate(() => {
    let radio = document.querySelector('#Mortgagees_0__MortgageeType');
    radio.click();
});

In fact, I'd first open browser DevTools and run:

>> let radio = document.querySelector('#Mortgagees_0__MortgageeType');
>> radio.click();

in the console to see how JS can handle this situation. If the radio is clicked, I'd use the same in Puppeteer as I showed previously.

Looking at the site and exploring it in the JS console, all you need is to select a right selector:

document.querySelector('[id=Mortgagees_0__MortgageeType][value=COR]');

or:

document.querySelector('[id=Mortgagees_0__MortgageeType][value=IND]');

or:

document.querySelector('[id=Mortgagees_0__MortgageeType][value=OHT]');

Upvotes: 7

Related Questions