0
529
VistasNodo JS Puppeteer haga clic en un elemento li sin nombre o identificación
Estoy tratando de hacer clic en un elemento li que, por alguna razón, funciona como un selector de tamaño en un sitio web determinado. Se parece a esto
Y su html se ve así
Cada <li> representa una opción de tamaño, probé algunas cosas pero ninguna funciona.
mi primer intento fue usar xpath:
const [size_button] = await page.$x(`//*[contains(., '${data[ii][1]}')]`); // doesn't work await size_button.click();También probé una acción de clic regular:
await page.click(`li[data-original-title="Größe in EU: ${data[ii][1]}"]`); // the array contains a specific size, eg. 40.5 like in the li data-original-title fieldNada de esto funcionó, y me pregunto si es posible hacer clic en ese elemento con titiritero...
Si alguien quisiera examinar la página, el enlace está aquí .
2 Respuestas
Responde la pregunta0
Esto es un poco complicado. Su selector funciona bien, al igual que el evento de clic, pero sospecho que el evento no hace nada más que llamar a e.preventDefault() para evitar la navegación al href del ancla.
El resaltado que muestra que se seleccionó el tamaño en realidad se aplica mediante un evento mousedown en el <li> principal de <a> , y parece que el evento secundario no se ha aplicado o no burbujea usando su método .click :
Puede desencadenar esto de la siguiente manera:
const puppeteer = require("puppeteer"); // ^13.5.1 let browser; (async () => { browser = await puppeteer.launch({headless: false}); const [page] = await browser.pages(); await page.setRequestInterception(true); page.on("request", req => { req.resourceType() === "image" ? req.abort() : req.continue(); }); const url = "https://en.afew-store.com/products/air-jordan-4-retro-tour-yellow-dark-blue-grey-white"; await page.goto(url, {waitUntil: "domcontentloaded"}); const size = "8.5"; const xp = `//a[contains(@class, "btn-sm") and text()="${size}"]`; const sizeButton = await page.waitForXPath(xp); await sizeButton.evaluate(btn => { btn.closest("li").dispatchEvent(new Event("mousedown")); // ^--- .parentNode is also possible instead of .closest("li") }); await page.waitForTimeout(10000); })() .catch(err => console.error(err)) .finally(() => browser?.close()) ;El tiempo de espera final le da la oportunidad de mirar la página y ver que se resaltó el tamaño 8.5.
Tenga en cuenta que he hecho que su selector xpath sea más preciso para evitar falsos positivos.
0
En este caso, podría, por ejemplo, obtener etiquetas al <a con class="btn btn-sm"
Creo que es una buena idea obtener el resultado esperado en la consola del navegador usando Vainilla Javascript, y cuando tenga éxito intentar alcanzar el mismo resultado con Puppeteer
Vainilla Javascript
const sizeLinks = document.querySelectorAll('a.btn.btn-sm') sizeLinks[1].click()Titiritero (Ejemplo de trabajo completo)
'use strict' const puppeteer = require('puppeteer'); (async () => { const baseUrl = 'https://en.afew-store.com/products/air-jordan-4-retro-tour-yellow-dark-blue-grey-white' const browser = await puppeteer.launch({ headless: false }); // default is true const page = await browser.newPage(); await page.goto(baseUrl, { waitUntil: 'networkidle2', }); await page.waitForTimeout(5000) // Leave extra time for complete the page load (Just to be cautious) const sizeLinks = await page.$$('a.btn.btn-sm') await sizeLinks[1].click() console.log('Debugging') //await browser.close(); //console.log(`Browser has been closed`); //process.exit(0); })();Referencia:
JavaScript querySelector() y querySelectorAll()
