puppeteer - scraping - Titiritero: Haga clic en el elemento con el texto.

puppeteer scraping

Question

¿Hay algún método (no encontrado en la API) o solución para hacer clic en el elemento con texto?

Por ejemplo tengo html:

<div class="elements">
<button>Button text</button>
<a href=#>Href text</a>
<div>Div text</div>
</div>

Y quiero hacer clic en el elemento en el que se envuelve el texto (haga clic en el botón dentro de .elements), como:

Page.click(''Button text'', ''.elements'')

¿Alguna solución?

Answer 1

Aquí está mi solución:

let selector = ''a'';
await page.$$eval(selector, anchors => {
anchors.map(anchor => {
if(anchor.textContent == ''target text'') {
anchor.click();
return
}
})
});

Answer 2

La solucion es

(await page.$$eval(selector, a => a
.filter(a => a.textContent === ''target text'')
))[0].click()

Answer 3

Puede usar un selector de XPath con la page.$x(expression) :

const linkHandlers = await page.$x("//a[contains(text(), ''Some text'')]");
if (linkHandlers.length > 0) {
await linkHandlers[0].click();
} else {
throw new Error("Link not found");
}

Echa un vistazo a clickByText en esta lista para un ejemplo completo. Se encarga de evitar las citas, lo cual es un poco complicado con las expresiones XPath.

Answer 4

También puede usar page.evaluate() para hacer clic en los elementos obtenidos de document.querySelectorAll() que se han filtrado por contenido de texto:

await page.evaluate( () =>
{
Array.from( document.querySelectorAll( ''.elements button'' ) ).filter( element => element.textContent === ''Button text'' )[0].click();
});

Alternativamente, puede usar page.evaluate() para hacer clic en un elemento basado en su contenido de texto usando document.evaluate() y una expresión XPath correspondiente:

await page.evaluate( () =>
{
const xpath = ''//*[@class="elements"]//button[contains(text(), "Button text")]'';
const result = document.evaluate( xpath, document, null, XPathResult.ANY_TYPE, null );
result.iterateNext().click();
});