I’ve run into similar headaches trying to interact with survey radio inputs before—they’re often finicky due to dynamic loading, hidden overlays, or how the survey engine binds click events. Let’s walk through practical fixes that usually resolve this:

1. Wait for the element to be fully ready #

Survey pages almost always load content dynamically, so your selector might be picking up an element that’s not yet interactive. Use Puppeteer’s built-in wait methods to ensure the radio button is visible and enabled first:

// Wait for the radio button to be visible and clickable
await page.waitForSelector('#survey-engine > span > div > div > div > div > div.col-xs-12.col-xl-offset-2.col-xl-8.col-lg-offset-1.col-lg-10 > div > div:nth-child(1) > input[type="radio"]', {
  visible: true,
  enabled: true
});
// Then attempt the click
await page.click('#survey-engine > span > div > div > div > div > div.col-xs-12.col-xl-offset-2.col-xl-8.col-lg-offset-1.col-lg-10 > div > div:nth-child(1) > input[type="radio"]');

Or with your XPath:

await page.waitForXPath('//*[@id="survey-engine"]/span/div/div/div/div/div[2]/div/div[1]/input', {
  visible: true
});
const [radioBtn] = await page.$x('//*[@id="survey-engine"]/span/div/div/div/div/div[2]/div/div[1]/input');
await radioBtn.click();

2. Force the click to bypass interaction checks #

Sometimes Puppeteer flags an element as non-interactable even if it looks visible (thanks to CSS overlays or hidden parent elements). Try forcing the click:

await page.click('#survey-engine > span > div > div > div > div > div.col-xs-12.col-xl-offset-2.col-xl-8.col-lg-offset-1.col-lg-10 > div > div:nth-child(1) > input[type="radio"]', { force: true });

3. Click the associated <label> instead #

Radio buttons are often wrapped in or linked to a <label> element that’s the actual clickable area in the UI. Inspect the DOM to find the label with a for attribute matching your radio’s id, then click that instead:

// Example: If your radio has id="option-1", target the matching label
await page.click('label[for="option-1"]');

4. Trigger the click directly via JavaScript #

If all else fails, bypass Puppeteer’s click checks and trigger the event directly in the page context:

await page.evaluate(() => {
  const radioBtn = document.querySelector('#survey-engine > span > div > div > div > div > div.col-xs-12.col-xl-offset-2.col-xl-8.col-lg-offset-1.col-lg-10 > div > div:nth-child(1) > input[type="radio"]');
  if (radioBtn) {
    radioBtn.click();
    // Explicitly set the checked property if the click doesn't register
    radioBtn.checked = true;
  }
});

5. Check if the element lives inside an iframe #

Many survey engines load content inside iframes. If that’s the case, you’ll need to switch to the iframe context first:

// Wait for the iframe to load (adjust the selector to match your survey's iframe)
const iframe = await page.waitForSelector('iframe[src*="survey"]');
const frame = await iframe.contentFrame();
// Now interact with elements inside the frame
await frame.click('#survey-engine > span > div > div > div > div > div.col-xs-12.col-xl-offset-2.col-xl-8.col-lg-offset-1.col-lg-10 > div > div:nth-child(1) > input[type="radio"]');

One quick sanity check: Verify your selector actually targets the right element with this snippet:

const elementExists = await page.$eval('#survey-engine > span > div > div > div > div > div.col-xs-12.col-xl-offset-2.col-xl-8.col-lg-offset-1.col-lg-10 > div > div:nth-child(1) > input[type="radio"]', el => !!el);
console.log(elementExists); // Should log true if the element is found

内容的提问来源于stack exchange，提问作者hangloos