本文提供一个稳定、可复用的 puppeteer 脚本方案，用于检测并点击 youtube 视频前贴片广告的“跳过广告”按钮，解决因元素隐藏、禁用或动态加载导致的点击失败问题。
在自动化测试或爬虫场景中，使用 Puppeteer 播放 YouTube 视频时，常需跳过不可跳过的前贴片广告（如 5 秒倒计时后的“Skip Ad”按钮）。但直接查找 .ytp-ad-skip-button 并点击往往失败——原因在于：该按钮初始存在但被 CSS 隐藏（offsetParent === null）或处于 disabled 状态，直到倒计时结束才真正可交互。
以下为经过实测验证的健壮实现方案：
const waitForAdSkip = async () => {
while (true) {
const skipButton = await videoPage.$('.ytp-ad-skip-button');
if (skipButton) {
// ✅ 关键判断：不仅检查元素是否存在，还需确认其是否真正可见且可用
const isHidden = await skipButton.evaluate(el => el.offsetParent === null);
const isDisabled = await skipButton.evaluate(el => el.disabled || el.getAttribute('aria-disabled') === 'true');
if (!isHidden && !isDisabled) {
console.log('✅ Ad is skippable. Triggering click...');
try {
await skipButton.click({ timeout: 3000 });
console.log('✔️ Skip button clicked successfully.');
break;
} catch (err) {
console.warn('⚠️ Click failed (possibly blocked or obscured), retrying...', err.message);
}
}
}
console.log('⏳ Ad not ready yet — waiting 2 seconds...');
await videoPage.waitForTimeout(2000);
}
};
await waitForAdSkip();
console.log('? Ad skipped. Proceeding with next steps...');
await videoPage.waitForTimeout(30000); // 可选：等待视频播放稳定⚠️ 注意事项与最佳实践
- Selector 兼容性：.ytp-ad-skip-button 是 YouTube Web 端当前稳定的类名（截至 2024），但 YouTube 可能随时更新 DOM 结构。建议搭配备用 selector（如 #ad-text\\:6, #ad-text\\:7）并做 fallback 处理（见原问题中多 selector 版本）。
- 防误触保护：添加 try/catch 捕获点击异常，避免因按钮被遮挡、动画未完成等导致脚本中断。
- 避免过度轮询：waitForTimeout(2000) 平衡响应速度与资源消耗；不建议低于 1000ms，否则易触发 YouTube 的反自动化检测。
- 环境前提：确保页面已加载 YouTube 播放器（如通过 videoPage.goto(url, { waitUntil: 'networkidle2' })）、且视频已开始加载（可加 await videoPage.waitForSelector('video', { state: 'attached' }) 做前置校验）。
- 法律与合规提示：本方案仅限个人学习、自动化测试或符合 YouTube Terms of Service 的合法用途（如广告效果验证）。禁止用于绕过广告收益、批量刷量或违反平台政策的行为。
通过上述结构化判断逻辑（存在 + 可见 + 可用），可显著提升跳过成功率，适用于大多数 YouTube 前贴片广告场景。
