使用Node.js Puppeteer跳过YouTube广告失败的技术问题

问题分析 #

你的核心需求是识别文本包含"Skip Ad"的可点击按钮并完成跳过，但之前的代码存在两个关键问题：

• 旧代码依赖.ytp-ad-skip-button类选择器，但该元素可能在广告倒计时结束前处于不可点击状态（比如样式隐藏、disabled属性），仅判断元素存在和是否在视口内不够准确。
• 修改后的代码用了固定动态ID（#ad-text\:7、#ad-text\:6），这类ID是YouTube动态生成的，每次页面加载都会变化，无法稳定匹配目标元素。

可靠解决方案 #

直接通过元素文本内容定位按钮，同时验证元素的可交互状态（可见、未禁用、可点击），这样能适配YouTube的UI变化：

const waitForAdSkip = async () => {
  while (true) {
    // 查找所有按钮元素，筛选含"Skip Ad"文本的目标
    const skipButtons = await videoPage.$$('button');
    let targetButton = null;

    for (const btn of skipButtons) {
      const btnText = await btn.evaluate(el => el.textContent.trim());
      if (btnText.includes('Skip Ad')) {
        // 验证元素是否可见且未禁用
        const isVisible = await btn.evaluate(el => {
          return el.offsetParent !== null && window.getComputedStyle(el).visibility !== 'hidden';
        });
        const isDisabled = await btn.evaluate(el => el.disabled);
        
        if (isVisible && !isDisabled) {
          targetButton = btn;
          break;
        }
      }
    }

    if (targetButton) {
      console.log('检测到可跳过广告，正在点击...');
      await targetButton.click();
      break;
    }

    console.log('广告暂不可跳过，等待2秒后重试...');
    await videoPage.waitForTimeout(2000);
  }
};

await waitForAdSkip();
console.log('广告已跳过，继续执行后续脚本...');
await videoPage.waitForTimeout(30000);

方案优势 #

• 稳定性强：不依赖易变的类名或动态ID，直接匹配"Skip Ad"文本，适配YouTube的UI更新。
• 操作准确：同时检查元素可见性、禁用状态，确保按钮处于可交互状态再点击，避免无效操作。
• 适配等待逻辑：循环重试机制适配广告倒计时过程，直到完成跳过动作。

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