如何用Puppeteer抓取点击JS按钮弹出模态框的文本域内容？

你的代码无效的核心原因是：page.evaluate()返回的是页面DOM元素的序列化普通对象，并非Puppeteer可识别的ElementHandle对象，因此page.click(codeButtons[i])无法正确触发点击操作。

以下是可行的解决方案：

核心步骤 #

• 用Puppeteer的page.$$()方法直接获取按钮的ElementHandle数组，该数组元素可直接用于点击操作
• 点击按钮后，必须等待动态生成的模态框文本域加载完成
• 提取文本域内容后，可选择关闭模态框以处理后续按钮

完整代码示例 #

// 获取所有.getCode按钮的ElementHandle数组
const codeButtons = await page.$$('.getCode');

// 遍历处理每个按钮（示例处理第一个，去掉break可循环所有）
for (let i = 0; i < codeButtons.length; i++) {
    // 点击当前按钮
    await codeButtons[i].click();
    
    // 等待文本域加载完成，超时时间可根据页面调整
    await page.waitForSelector('#copythis', { timeout: 5000 });
    
    // 提取文本域内容
    const textareaContent = await page.$eval('#copythis', el => el.value);
    console.log(`第${i+1}个按钮对应的内容：`, textareaContent);
    
    // 可选：关闭模态框，以便处理下一个按钮
    await page.click('#getCodeModalClose');
    // 等待模态框隐藏（可选，根据页面实际逻辑调整）
    await page.waitForSelector('#getCodeModal', { hidden: true });
    
    // 仅处理第一个按钮则保留break，否则删除
    // break;
}

备选方案：直接在页面上下文执行逻辑 #

如果更倾向于在浏览器上下文内完成所有操作，可使用以下代码：

const allContents = await page.evaluate(async () => {
    const buttons = document.querySelectorAll('.getCode');
    const contentList = [];

    for (const button of buttons) {
        button.click();
        
        // 等待文本域出现（原生JS等待逻辑）
        await new Promise(resolve => {
            const timer = setInterval(() => {
                const textarea = document.querySelector('#copythis');
                if (textarea) {
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
        
        // 保存内容
        contentList.push(document.querySelector('#copythis').value);
        
        // 关闭模态框并等待隐藏
        document.querySelector('#getCodeModalClose').click();
        await new Promise(resolve => {
            const timer = setInterval(() => {
                const modal = document.querySelector('#getCodeModal');
                if (modal.style.display === 'none') {
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
    }

    return contentList;
});

console.log('所有文本域内容：', allContents);

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