How will I make puppeteer think these type of classes are valid

Question

I am trying to webscrap this website for the follower https://mojapp.in/@piyanka_mongia

But the classes in here look really strange like this "Pstart(20px).Pstart(40px)"

My webscrapper program( which btw works without any problem on other sites) is throwing this error.

Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': 'Pstart(20px).Pstart(40px)--md' is not a valid selector.

the basic puppeteer setup is from this website https://www.digitalocean.com/community/tutorials/how-to-scrape-a-website-using-node-js-and-puppeteer

How can I resolve this issue??

pageScraper code

const scraperObject = {
    url: 'https://mojapp.in/@piyanka_mongia',
    async scraper(browser) {
        let page = await browser.newPage();
        console.log(`Navigating to ${this.url}...`);
        // Navigate to the selected page
        await page.goto(this.url);
        // Wait for the required DOM to be rendered
        await page.waitForSelector('.Pstart(20px)');
        
        

        let nimbers = await page.$eval('#svelte > div.Bgc\(black\).C\(white\) > main > div.D\(f\).Mb\(40px\).Px\(\$xs\) > div.Pstart\(20px\).Pstart\(40px\)--md > div.D\(f\).Fxw\(w\).My\(\$lg\) > div:nth-child(1) > h4', text => text.textContent)
        
        console.log(nimbers);
    }
}
module.exports = scraperObject;

Answer 1

CSS requires that characters like ( and ) are escaped with the \ character, so for classes with those names you end up with selectors like .Pstart\(20px\).

The issue here is that JavaScript strings also treats \ as the escape character. The JS string '.Pstart\(20px\)' represents the string .Pstart(20px), which is again not a valid CSS selector as the parenthesis aren't escaped.

The solution is to double escape the classes: the JS string '.Pstart\\(20px\\).Pstart\\(40px\\)--md' accurately represents the .Pstart\(20px\).Pstart\(40px\)--md CSS selector.