Wie klickt man in Puppeteer auf ein Element mit Text?

Gibt es eine Methode oder Lösung, um auf ein Element mit Text zu klicken? In der API habe ich keine gefunden.

Zum Beispiel habe ich den folgenden HTML-Code:

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

Und ich möchte auf ein Element klicken, in das Text umbrochen wird (klicken Sie auf die Schaltfläche darin .elements), so:

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

Kurze Antwort

Dieser XPath-Ausdruck fragt eine Schaltfläche ab, die den Text “Schaltflächentext” enthält:

const [button] = await page.$x("//button[contains(., 'Button text')]");
if (button) {
    await button.click();
}

Auch die zu respektieren <div class="elements"> Verwenden Sie den folgenden Code, der die Schaltflächen umgibt:

const [button] = await page.$x("//div[@class="elements"]/button[contains(., 'Button text')]");

Erläuterung

Um zu erklären, warum die Verwendung des Textknotens (text()) in einigen Fällen falsch ist, schauen wir uns ein Beispiel an:

<div>
    <button>Start End</button>
    <button>Start <em>Middle</em> End</button>
</div>

Lassen Sie uns zunächst die Ergebnisse bei der Verwendung überprüfen contains(text(), 'Text'):

• //button[contains(text(), 'Start')] werde beides zurückgeben zwei Knoten (wie erwartet)
• //button[contains(text(), 'End')] wird nur zurückkehren eins Knoten (die ersten) als text() liefert eine Liste mit zwei Texten (Start Und End), Aber contains werde nur den ersten prüfen
• //button[contains(text(), 'Middle')] wird zurückkehren NEIN Ergebnisse als text() enthält nicht den Text von untergeordneten Knoten

Hier sind die XPath-Ausdrücke für contains(., 'Text')das auf dem Element selbst arbeitet, einschließlich seiner untergeordneten Knoten:

• //button[contains(., 'Start')] werde beides zurückgeben zwei Tasten
• //button[contains(., 'End')] werde beides wieder zurückgeben zwei Tasten
• //button[contains(., 'Middle')] wird zurückkehren eins (der letzte Knopf)

Daher ist es in den meisten Fällen sinnvoller, die zu verwenden . anstatt text() in einem XPath-Ausdruck.

Sie können einen XPath-Selektor mit verwenden Seite.$x(Ausdruck):

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");
}

Kasse clickByText in diesem Kern für ein vollständiges Beispiel. Es kümmert sich um das Maskieren von Anführungszeichen, was bei XPath-Ausdrücken etwas schwierig ist.

You can also use page.evaluate() to click elements obtained from document.querySelectorAll() that have been filtered by text content:

await page.evaluate(() => {
  [...document.querySelectorAll('.elements button')].find(element => element.textContent === 'Schaltflächentext').click();  });

Alternativ können Sie verwenden page.evaluate() um ein Element basierend auf seinem Textinhalt anzuklicken document.evaluate() und ein entsprechender XPath-Ausdruck:

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();
});

schnelle Lösung erstellt, um erweiterte CSS-Selektoren wie “:contains(text)” verwenden zu können

also mit diesem Bibliothek du kannst einfach

const select = require ('puppeteer-select');

const element = await select(page).getElement('button:contains(Button text)');
await element.click()

Die Lösung ist

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

Hier ist meine Lösung:

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

Es gibt keine unterstützte CSS-Auswahlsyntax für die Textauswahl oder eine Kombinatoroption. Meine Problemumgehung dafür wäre:

await page.$$eval('selector', selectorMatched => {
    for(i in selectorMatched)
      if(selectorMatched[i].textContent === 'text string'){
          selectorMatched[i].click();
          break;//Remove this line (break statement) if you want to click on all matched elements otherwise the first element only is clicked  
        }
    });