How to fix '$(...).click is not a function' in Node/Cheerio

Question

I am writing an application in node.js that will navigate to a website, click a button on the website, and then extract certain pieces of data from the website. All is going well except for the button-clicking aspect. I cannot seem to simulate a button click. I'm extremely new at this, so I'd appreciate any suggestions y'all have! Sadly I've scoured the internet looking for a solution to this issue and have been unable to find one.

I have used .click() and .bind('click, ...) in a .js file that uses 'request' and 'cheerio'.

I have also tried using page.click() and page.evaluate() in a different .js file that uses 'chrome-launcher', 'chrome-remote-interface', and 'puppeteer'.

Here is my code for the 'request' and 'cheerio' file:

const request = require('request');
const cheerio = require('cheerio');

let p1 = {}, p2 = {}, p3 = {}, p4 = {}, p5 = {};

p1.name = 'TheJackal666';

p2.name = 'Naether Raviel';

p3.name = 'qman37';

p4.name = 'ranger51';

p5.name = 'fernanda12x';

const team = {1: p1, 2: p2, 3: p3, 4: p4, 5: p5};

for(var x in team){
        let url = 'https://na.op.gg/summoner/userName=' + 
team[x].name;

        request(url, (error, response, html) => {
            if (!error && response.statusCode == 200) {
                const $ = cheerio.load(html);
                 
                $('.SummonerRefreshButton.Button.SemiRound.Blue').click(); 
//FIXME: MAKE A FUNCTION THAT SUCCESSFULLY "CLICKS" UPDATE BUTTON

                team[x].overallWR = $('.winratio');
                team[x].overallWR = 
team[x].overallWR.text().match(/\d/g);
                team[x].overallWR = 
team[x].overallWR.join("");

            console.log(team[x].overallWR);
            }
        });
}

I expect to successfully click the update button on any of the pages (there is a section on the page that says when it was last updated) without getting an error. As it is, I either get an error that:

"$(...).click is not a function"

or (if I incorporate that line into an outer function) I get no error, but no result.

Airhead

Answer 1

See the documentation:

Cheerio is not a web browser

Cheerio parses markup and provides an API for traversing/manipulating the resulting data structure. It does not interpret the result as a web browser does. Specifically, it does not produce a visual rendering, apply CSS, load external resources, or execute JavaScript. If your use case requires any of this functionality, you should consider projects like PhantomJS or JSDom.

Hungarian

@pguardiario — Take it up with the maintainers of Cheerio. It's their recommendation that I'm quoting. – Hungarian

thanks @CodeMonkey, please see my answer which I believe you will agree is more informative. I'm deleting my comments here. – Goodwin

Answer 2

Cheerio is a HTML parser.

Cheerio can be used to select and manipulate dom elements, but it is not a full browser.

Cheerio only has access to the original source dom, which means that if the dom of a webpage is manipulated by javascript, Cheerio will not notice that change.

Cheerio cannot be used to interact with dom elements (ala jQuery) because it does not similarly execute within a window (js window)

As of this moment, if you need to manipulate or select against js-rendered html, your best option is puppeteer. This is likely to change though,

HTH

Goodwin

Answer 3

It's possible to write a JS snippet then add it using cheerio

example:

const jsSnippet = `
<script>
  console.log('hello world!');
</script>
`;

const $cheerio = cheerio.load(myHtml);
$cheerio(jsSnippet).appendTo('body');

Goethe