javascript - 为什么该网站的 Puppeteer 点击功能不起作用？

Question

我的目的是使用 Puppeteer 单击“开始测验”按钮。 选择器->“#start-quiz”

我正在 puppeteer 中做一些事情，并尝试单击这个 anchor (“a”)元素，根据我所做的分析，我很确定该元素附加了一个 jquery 事件监听器。我似乎无法通过 puppeteer 单击按钮，我也尝试过 page.evaluate 以及多种形式的评估函数。这些似乎都不起作用。奇怪的是，如果我通过网站的 JavaScript 控制台运行它，它就会起作用。

当我运行它时，它成功到达该站点，然后向下滚动到按钮所在的位置，但之后什么也没有发生。我不确定 Puppeteer 是否点击了该按钮，或者网站只是无法识别 Puppeteer 的点击。

anchor 元素的选择器是“#start-quiz”。

网站:https://tonesavvy.com/music-practice-exercise/19/chord-identification-game-treble/

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://tonesavvy.com/music-practice-exercise/19/chord-identification-game-treble/', {waitUntil: 'networkidle2'});

  const startButton = await page.$('#start-quiz');
  await startButton.click();

  /*await page.evaluate(_ => {
    // this will be executed within the page, that was loaded before
    document.querySelector("#start-quiz").click();
  });*/

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

我一整天都在努力解决这个问题，感谢您的帮助:)

** 编辑 1 **

所以我在运行程序时发现网站控制台出现错误。

base.736551cd2ce2.js:1265 Uncaught TypeError: Cannot read property 'resume' of undefined
    at HTMLAnchorElement.<anonymous> (base.736551cd2ce2.js:1265)
    at HTMLAnchorElement.dispatch (jquery.min.js:3)
    at HTMLAnchorElement.r.handle (jquery.min.js:3)

我还发现下面的代码是网站脚本的一部分，这是发生错误的行

$(".btn").click(function() {
    MIDI.WebAudio.getContext().resume();
});

我意识到它不起作用的原因是 MIDI.WebAudio.getContext() 未定义，正常访问该网站时不会发生这种情况。仅当 Puppeteer 控制浏览器时才会出现此错误。这个错误让我相信 Puppeteer 在 MIDI Web Audio 系统加载之前单击了按钮，但我不确定还应该放什么，因为我已经指定了“{waitUntil: 'networkidle2'}”。

现在的问题是，有没有办法告诉 Puppeteer 等待 MIDI WebAudio 系统加载？

** 编辑 2 **

我发现了一些警告

Warnings

顺便说一句，我发现在点击之前发生了警告，但是在点击之后发生了错误

好吧，实际上问题不是因为 MIDI WebAudio 系统尚未加载。我插入了下面的代码并确保网站停止加载，但仍然出现相同的错误。

await page.waitFor(10000);

这意味着 MIDI WebAudio 系统只是对 Puppeteer 的点击有问题，我真的不知道为什么它不能与 Puppeteer 的点击一起工作。

Answer 1

您可以通过附加处理程序来调试页面本身的错误

page.on('pageerror', (err) => {
  console.error(err);
});

在本例中，它显示:

TypeError: Cannot read property 'resume' of undefined
    at HTMLAnchorElement.<anonymous> (https://tonesavvy.com/static/js/drills/base.736551cd2ce2.js:1265:32)
    at HTMLAnchorElement.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js:3:7537)
    at HTMLAnchorElement.r.handle (https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js:3:5620)

当 puppeteer 操纵者单击选择器时，就会发生这种情况，因此它会停止进一步导航。

我知道如果我亲自浏览该页面就不会发生这种情况，但这应该可以让您开始找出根本原因。