Node.js使用Puppeteer做网页爬虫时出现选择器无效报错如何解决？

触发报错的核心原因是CSS选择器语法不符合规范：

• Puppeteer的page.type()、page.click()等DOM操作方法的第一个入参要求传入合法的CSS选择器，当前写的input type="email"、name="commit"都不是合法的属性选择器写法
• 标准的CSS属性选择器格式为元素标签[属性名="属性值"]，遗漏了包裹属性匹配规则的方括号，导致浏览器执行querySelector时无法识别该选择器，直接抛出DOM异常。

1. 修正所有选择器的写法
2. 补充waitForSelector前置判断，避免元素未加载完成就操作的问题
3. 点击提交按钮后搭配Promise.all处理导航等待，避免时序问题导致的报错

const puppeteer = require('puppeteer')
const screenshot = 'carwow.png'

const scrape = async () => {
    const browser = await puppeteer.launch({headless:false});
    const page = await browser.newPage();
    await page.goto('https://dealers.carwow.co.uk/dealers/sign_in')

    // 等待元素加载后再操作，修正选择器写法
    await page.waitForSelector('input[type="email"]')
    await page.type('input[type="email"]', 'username')
    await page.waitForSelector('input[type="password"]')
    await page.type('input[type="password"]', 'password')
    
    // 点击提交同时等待导航，避免时序冲突
    await Promise.all([
        page.waitForNavigation(),
        page.click('input[name="commit"]')
    ])

    await page.screenshot({ path: screenshot })
    await browser.close()
    console.log('See screenshot: ' + screenshot)
};

scrape()

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