CODEWITHSUNDEEP
javascriptangularjspuppeteerpyppeteer
Christian Papathanasiou
Christian Papathanasiou

Reputation: 320

Pyppeteer / puppeteer / Angular JS selection of radio button doesn't work

I have a div function which has a radio button which I would like to select 'fire' using Pyppeteer. However, when I try to do this, all attempts I try fail

Div

<div _ngcontent-xqm-c396="" class="ng-star-inserted">
<p-radiobutton _ngcontent-xqm-c396="" styleclass="radio-group__input" name="APPLICANT_TYPE" class="ng-untouched ng-valid ng-dirty">
<div class="radio-group__input ui-radiobutton ui-widget">
<div class="ui-helper-hidden-accessible">
<input type="radio" name="APPLICANT_TYPE" value="Corporate">
</div>
<div role="radio" aria-checked="true" class="ui-radiobutton-box ui-widget ui-state-default ui-state-active">
<span class="ui-radiobutton-icon ui-clickable pi pi-circle-on">
</span>
</div>
</div>
<label class="ng-star-inserted ui-radiobutton-label ui-label-active">Corporate</label>
<!---->
</p-radiobutton><validationmsg _ngcontent-xqm-c396="" _nghost-xqm-c395="" hidden="">
<!---->
</validationmsg>
</div>

The pyppeteer command I use

await page.click("input[name='APPLICANT_TYPE']")

This is the XPATH:

//*[@id="lead_request_main_ui_applicant_type"]/div[2]/p-radiobutton/div/div[1]/input

This is the JS PATH

document.querySelector("#lead_request_main_ui_applicant_type > div:nth-child(3) > p-radiobutton > div > div.ui-helper-hidden-accessible > input[type=radio]")

If either of those help you? I've been trying this for the past 2 days and I have had no success :-(

Upvotes: 1

Views: 395

Answers (1)

Christian Papathanasiou
Christian Papathanasiou

Reputation: 320

In the end this looks like a bug with Pyppeteer

To get around it, I had to do this workaround which now works:

    foo = await page.querySelector('[value="Corporate"]')  # or any proper selector
    await page.evaluate('(element) => element.click()', foo)

Will probably save you about 4 days of effort!

Upvotes: 1

Related Questions