Puppeteer Error: Node is either not visible or not an HTMLElement but it is

Question

我尝试了此 中的所有建议，但其中 none 行得通。最奇怪的是，当我尝试通过 xpath 在 chrome 控制台中搜索元素时，我得到了一个结果

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";
                //separate
                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
                
    
                //Country
                // const xp12 = `//select[@name="country"]`;
                // await page.waitForXPath(xp12);
                // const [countryButton] = await page.$x(xp12);
                // await countryButton.click();
                
                // await page.screenshot({ path: 'ftshp country list' + ii + '.png'});

                //Specific Country
                //await page.select('select[name="country"]', "Austria");
                
                const xp13 = `//select[@name='country']/option[text()='Austria']`;
                await page.waitForXPath(xp13);
                const [specificCountryoption] = await page.$x(xp13);
                // await specificCountryoption.evaluate(btn => {
                //     btn.dispatchEvent(new Event("mousedown"));
                // });
                // await specificCountryoption.evaluate(b => b.click());
                await specificCountryoption.click();  // error here
                //await page.evaluate(()=>document.querySelector(specificCountryoption).click())
                

                //further code to follow

在代码中，我首先尝试单独打开国家 <select>，然后单独打开 select 一个特定选项，但后来决定同时打开 select 元素和 select 一个 xpath 中的一个特定选项，对此有多次尝试，none 其中对我有用，有些不会抛出错误但也不会 select 一个国家并继续脚本没有它。

我用 await specificCountryoption.click(); 走得最远，因为它找到了确切的选项，但无法单击/select。

不幸的是，需要复制整个过程才能到达国家/地区 selection 选项卡，感谢您提供有关如何select 特定选项的任何建议。

Answer 1

如果您有 HTML select 元素的句柄，则有一个方法 select 您可以调用：https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#elementhandleselectvalues.

基于此，countryButton.select('AT') 可能 select 在那个国家 select 框中 Austria 的值为 AT 的选项。