Puppenspieler: Klicken Sie auf Element mit Text

Question

Gibt es eine Methode (nicht in der API gefunden) oder Lösung, um auf Element mit Text zu klicken?

Zum Beispiel habe ich html:

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

Und ich möchte auf das Element klicken, in dem der Text umgebrochen wird (Klicken Sie auf die Schaltfläche innerhalb .elements), wie:

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

Jede Lösung?

Answer 1

Die erste Sache und der einfache Weg wäre, eine ID zum Knopf hinzuzufügen, also sind Sie sicher, dass Sie den korrekten Knopf klicken werden.

In diesem Fall werde ich zwei Funktionen von puppeteer und eine Bedingung verwenden:

let my_button = await page.$eval(".elements > button", btn => btn.textContent); 

if(my_button == "Button text") { 
    await page.click(".elements > button"); 
} 

einfach überprüfen, ob es nicht mehr divs mit der gleichen Klasse „.elements“ ist, in diesem Fall benutzen Sie ein anderes und spezifischer Selektor. Ich bin sicher, es gibt sauberere Lösungen, aber ich bin auch neu mit Puppenspieler.

Answer 2

Sie müssen keinen Text angeben, um darauf zu klicken, die Aktion page.click() sucht nach dem Selektor und klickt in dessen Mitte. Wenn Sie es mit dieser Klasse nicht erreichen können, klicken Sie mit der rechten Maustaste auf das Element in den Developer-Tools und "Kopieren> Auswahl kopieren" sollte funktionieren.

In diesem Fall

await page.click('.elements'); 

sollte ausreichen. Wenn das nicht funktioniert, fügen Sie die Option "button" hinzu. Es hilft mir, in seltenen Fällen:

await page.click('.elements', {button: 'left'}); 

Answer 3

Es ist möglich, page.$$(selector) und Filtereigenschaften zu verwenden innerText, aber es ist ganz mit so vielen Versprechungen auf dem Weg schwierig.

Die einfachste Ansatz ist die aktuelle stabile des Verwendens (Januar 2018) veröffentlichen 0.13.0 denken kann, ist page.$$eval zu verwenden:

await page.$$eval("a", as => as.find(a => a.innerText.includes("Some text")).click()); 

Die next release Unterstützung für XPath hinzufügen und es wird viel einfacher: