0
247
ViewsNodo 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 normal:
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 answers
Answer question0
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()
