I'm trying to select some nested divs using puppeteer $$eval. I've copied the XPath of the DOm elements I need to select but seems not working.
//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)
With this code I will get always this error
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
How I can use xpath with $$eval correctly?
I've solved by targeting directly the DOM elements I need.
In my case I have an li tag with .list-item bootstrap class.
await page.waitForSelector('li.list-item > a', (el) => {
return el.map( a => a.getAttribute('href') )
})
citiesLinks.push(href)