CODEWITHSUNDEEP
javascriptnode.jsweb-scrapingpuppeteerwebautomation
Zack VT
Zack VT

Reputation: 468

Why doesn't the Puppeteer click function work in this website?

My purpose is to click the Start Quiz button using Puppeteer. Selector -> "#start-quiz"

I was doing stuff in puppeteer and tried to click this anchor ("a") element, from the analysis I did, I'm quite sure the element has a jquery event listener attached. I can't seem to click the button through puppeteer, I have tried page.evaluate too and many forms of the evaluate function. None of it seems to work. Weirdly if I run it through the website's javascript console, it works.

When I run it, it successfully reaches the site and then scrolls down to where the button is, but then nothing else happens. I am not sure if Puppeteer has clicked the button or the website just does not recognize Puppeteer's click.

The selector of the anchor element is "#start-quiz".

Website: 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();
})();

I've been struggling with this all day, thanks for the help :)

** Edit 1 **

So I found an error in the website's console when I ran the program.

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)

I also found this code below which is part of the website's script, this was the line where the error occurred

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

I've realized that the reason it was not working was because MIDI.WebAudio.getContext() is undefined, this does not occur when going to this website normally. This error only occurs when Puppeteer is controlling the browser. This error has led me to believe that Puppeteer is clicking the button before the MIDI Web Audio system has loaded, but I am not sure what else to put as I have specified "{waitUntil: 'networkidle2'}".

Now the question becomes, is there a way to tell Puppeteer to wait for the MIDI WebAudio System to load?

** Edit 2 **

I found out some warnings

Warnings

By the way, I found out the warnings occurred before the click but the error occurred after the click

Ok so actually the problem is not because the MIDI WebAudio system has not loaded. I inserted the code below and made sure the site stopped loading and it still made the same error.

await page.waitFor(10000);

This means that the MIDI WebAudio system just has a problem with Puppeteer's click, I don't really have a theory why it just does not work with Puppeteer's click.

Upvotes: 0

Views: 3645

Answers (1)

ffflabs
ffflabs

Reputation: 17481

You can debug errors in the page itself by attaching a handler such as

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

In this case, it shows:

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)

And it happens when puppeteer clicks the selector, so it's stopping further navigation.

I'm aware it doesn't happen if I personally navigate that page, but this should get you started to find out the root cause.

Upvotes: 1

Related Questions