Puppeteer提示节点不可见/非HTMLElement 无法点击select的option怎么办

我尝试了所有相关方案，均未生效。最奇怪的是，我在Chrome控制台中通过XPath搜索该元素可以正常命中。

Puppeteer也可以正常定位到<select>元素和对应的<option>元素，但点击操作失败，以下是可复现该问题的代码：

const browser = await puppeteer.launch({ 
  defaultViewport: { 'width' : 1920, 'height' : 1080 },
  executablePath: exec_path,
  args: ['--disable-web-security', '--ignore-certificate-errors']
});
const page = await browser.newPage();

await page.goto("https://releases.footshop.com/nike-w-dunk-low-8XCQ7nsB6RTO0K-RInj-", { 
  waitUntil: 'load', 
  timeout: 0 
}); 

//part 1
await page.click('span[class="default-text__21bVM"]');
let size = 9;
const xp = `//div[contains(@class, "col-3") and text()="${size}"]`;
await page.waitForXPath(xp);
const [sizeButton] = await page.$x(xp);
await sizeButton.click();

await page.click('span[class="text__1S19c"]');

//part 2
await page.type("input[name='email']", "test@test.com");  
await page.type("input[name='phone']", "73246732812");

const xp2 = `//button[contains(@class, "continue-button__1RtsS")]`;
await page.waitForXPath(xp2);
const [continueButton] = await page.$x(xp2);
await continueButton.click();

//part 3
let gender = "male"
if(gender === "male") { 
  await page.click('input[value="Mr"]')
} else if(gender === "female") {
  await page.click('input[value="Mrs"]')
}

await page.type("input[name='firstName']", "name");
await page.type("input[name='lastName']", "lastname");
await page.type("input[name='instagramUsername']", "instagramname");

//birthday
let birthday = "05/05/1997";
let dates = birthday.split("/")

//Day
const xp3 = `//button[contains(@class, "dropdown-toggle btn btn-primary") and text()="Day"]`;
await page.waitForXPath(xp3);
const [dayButton] = await page.$x(xp3);
await dayButton.click();

//Specific day 
const xp4 = `//div[@class='dropdown-menu show']/button[contains(., '${dates[0]}')]`;
await page.waitForXPath(xp4);
const [specificDaybutton] = await page.$x(xp4);
await specificDaybutton.click(); 

//Month
const xp5 = `//button[contains(@class, "dropdown-toggle btn btn-primary") and text()="Month"]`;
await page.waitForXPath(xp5);
const [monthButton] = await page.$x(xp5);
await monthButton.click();

//Specific Month
const xp6 = `//div[@class='dropdown-menu show']/button[contains(., '${dates[1]}')]`;
await page.waitForXPath(xp6);
const [specificMonthbutton] = await page.$x(xp6);
await specificMonthbutton.click(); 

//Year
const xp7 = `//button[contains(@class, "dropdown-toggle btn btn-primary") and text()="Year"]`;
await page.waitForXPath(xp7);
const [yearButton] = await page.$x(xp7);
await yearButton.click();

//Specific Year
const xp8 = `//div[@class='dropdown-menu show']/button[contains(., '${dates[2]}')]`;
await page.waitForXPath(xp8);
const [specificYearbutton] = await page.$x(xp8);
await specificYearbutton.click(); 

//Continue
const xp9 = `//button[contains(@class, "continue-button__1RtsS")]`;
await page.waitForXPath(xp9);
const [continueButton2] = await page.$x(xp9);
await continueButton2.click();

//part 4
const xp13 = `//select[@name='country']/option[text()='Austria']`;
await page.waitForXPath(xp13);
const [specificCountryoption] = await page.$x(xp13);
await specificCountryoption.click();  // error here

上述代码中，最初尝试单独展开国家选择<select>元素后再选中对应选项，之后又尝试用单条XPath同时定位元素和选项，多次尝试均未成功：部分写法不抛出错误，但也不会选中国家，脚本会直接跳过该步骤继续运行。
其中await specificCountryoption.click();的写法推进最远：它可以定位到对应option，但无法完成点击/选中操作。
必须复现完整流程才能进入国家选择页面，需要选中指定option的可行方案。

这个问题的核心是原生<select>元素的option不能直接通过Puppeteer的click方法触发选中，需要使用专门的处理逻辑，以下是两种可落地的方案：

方案1：使用Puppeteer内置select方法 #

Puppeteer提供了专门的page.select()API处理下拉框选择，不需要手动展开下拉框或者点击option，直接调用即可：

// 等待国家选择下拉框加载完成
await page.waitForSelector('select[name="country"]');
// 直接选中文本为Austria的选项
await page.select('select[name="country"]', 'Austria');

如果文本匹配不生效，可以先在浏览器控制台查看Austria对应option的value属性值，替换上面的"Austria"为实际的value值即可。

方案2：页面上下文直接修改选中状态 #

如果page.select因为页面自定义事件绑定问题不生效，可以直接在浏览器运行环境中修改option的选中状态，同时手动触发change事件保证页面后续逻辑正常响应：

const xp13 = `//select[@name='country']/option[text()='Austria']`;
await page.waitForXPath(xp13);
const [specificCountryoption] = await page.$x(xp13);
await page.evaluate(option => {
  // 直接设置为选中状态
  option.selected = true;
  // 手动触发select元素的change事件，通知页面值发生变更
  option.parentElement.dispatchEvent(new Event('change', { bubbles: true }));
}, specificCountryoption);

另外注意你原有代码里page.goto存在语法错误，配置对象被写在了方法括号外面，建议修正为上述代码中给出的正确写法，避免引发页面加载异常。

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