Puppeteer-错误：评估失败：domexception：无法执行QuerySelector＆＃x27;

Question

我正在尝试使用 puppeteer $$eval 选择一些嵌套的 div。我已经复制了需要选择的 DOm 元素的 XPath，但似乎不起作用。

    //XPath //*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a/span
    await page.waitForSelector('//*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a/span')
    const names = await page.$$eval('//*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a/span', (el) => {
        return el.map( n => n.innerHTML )
    })
    citiesList.push(names)

    //XPath //*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a
    await page.waitForSelector('//*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a')
    const href = await page.$$eval('//*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a', (el) => {
        return el.map( a => a.getAttribute('href') )
    })
    citiesLinks.push(href)

使用此代码，我总是会收到此错误

Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': '//*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a/span' is not a valid selector

如何正确使用 xpath 和 $$eval ？

Answer 1

我通过直接定位我需要的 DOM 元素来解决这个问题。
就我而言，我有一个带有 .list-item 引导类的 li 标记。

 await page.waitForSelector('li.list-item > a', (el) => {
   return el.map( a => a.getAttribute('href') )
 })
 citiesLinks.push(href)