Puppeteer无法点击文本为AKZEPTIEREN的Cookie接受按钮问题

我编写了一个用于自动接受站点Cookie的简单函数，运行后无法触发对应按钮的点击事件，我的代码如下：

(async () => {
        const browser = await puppeteer.launch({ headless: false });
        const page = await browser.newPage();
        await page.goto('https://www.sport1.de/live/darts-sport');
        await page.click('button[text=AKZEPTIEREN]');
        // await page.screenshot({ path: 'example.png' });

        // await browser.close();
    })();

问题场景截图：

问题原因 #

• 所用的button[text=AKZEPTIEREN]不属于合法CSS选择器，CSS标准没有提供基于元素文本内容匹配的属性选择器，Puppeteer无法通过该规则定位到目标按钮。
• 未添加元素等待逻辑，Cookie同意弹框属于页面主内容加载完成后异步渲染的组件，page.goto执行完成时按钮还未插入DOM结构，直接调用click会找不到对应元素。
• 部分站点的Cookie弹框会嵌入在独立同源iframe中，需要先切换到iframe上下文才能操作内部元素。

修复后代码 #

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    // 配置等待页面网络空闲，保证异步加载的弹框资源已请求完成
    await page.goto('https://www.sport1.de/live/darts-sport', {
        waitUntil: 'networkidle2',
        timeout: 60000
    });
    // 使用XPath匹配文本为AKZEPTIEREN的按钮，等待元素可见后再执行点击
    const acceptBtn = await page.waitForXPath('//button[text()="AKZEPTIEREN"]', {
        timeout: 10000
    });
    await acceptBtn.click();

    // 后续业务逻辑
    // await page.screenshot({ path: 'example.png' });
    // await browser.close();
})();

iframe场景适配方案 #

如果运行上述代码仍提示找不到元素，说明Cookie弹框嵌入在iframe中，使用以下代码替换定位和点击逻辑即可：

// 先定位到Cookie弹框对应的iframe，切换上下文后再查找按钮
const cookieIframe = await page.waitForSelector('iframe[title*="cookie"]', { timeout: 10000 });
const frame = await cookieIframe.contentFrame();
const acceptBtn = await frame.waitForXPath('//button[text()="AKZEPTIEREN"]', { timeout: 10000 });
await acceptBtn.click();

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