blocks|key|4337675|text|您可以在page.$x(expression)中使用XPath选择器|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4337676|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");
}|code-block|syntax|javascript|4337677|有关完整的示例，请查看此gist中的clickByText。它负责转义引号，这对于XPath表达式来说有点棘手。|style|CODE|4337678|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/GoogleChrome/puppeteer/blob/v1.1.1/docs/api.md#pagexexpression|1|https://gist.github.com/tokland/d3bae3b6d3c1576d8700405829bbdb52^0|4|J|0|0|0|I|B|C|4|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@$A|12|B|13|K|L]]|9|@$A|14|B|15|1|16]]|C|$]]|$1|M|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>You may use a XPath selector with <a href="https://github.com/GoogleChrome/puppeteer/blob/v1.1.1/docs/api.md#pagexexpression" rel="noreferrer">page.$x(expression)</a>:</p>

<pre><code>const linkHandlers = await page.$x("//a[contains(text(), 'Some text')]");

if (linkHandlers.length &gt; 0) {
  await linkHandlers[0].click();
} else {
  throw new Error("Link not found");
}
</code></pre>

<p>Check out <code>clickByText</code> in this <a href="https://gist.github.com/tokland/d3bae3b6d3c1576d8700405829bbdb52" rel="noreferrer">gist</a> for a complete example. It takes care of escaping quotes, which is a bit tricky with XPath expressions.</p>


blocks|key|4337746|text|您还可以使用page.evaluate()单击从document.querySelectorAll()获取的已按文本内容过滤的元素：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4337747|await+page.evaluate(()+=>+{
++[...document.querySelectorAll('.elements+button')].find(element+=>+element.textContent+===+'Button+text').click();
});|code-block|syntax|javascript|4337748|或者，您可以使用document.evaluate()和相应的XPath表达式，使用page.evaluate()根据元素的文本内容单击元素：|4337749|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();
});|4337750|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args|1|https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll|2|https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate|3^0|6|F|O|R|6|F|0|O|R|1|0|0|8|J|16|F|8|J|2|16|F|3|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]|$9|19|A|1A|1|1B]]|E|$]]|$1|F|3|G|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]|$9|1L|A|1M|1|1N]]|E|$]]|$1|M|3|N|5|H|7|1O|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]|Y|$5|R|S|T|E|$U|Z]]|10|$5|R|S|T|E|$U|V]]]]

<p>You can also use <a href="https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args" rel="noreferrer"><code>page.evaluate()</code></a> to click elements obtained from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll" rel="noreferrer"><code>document.querySelectorAll()</code></a> that have been filtered by text content:</p>

<pre class="lang-js prettyprint-override"><code>await page.evaluate(() =&gt; {
  [...document.querySelectorAll('.elements button')].find(element =&gt; element.textContent === 'Button text').click();
});
</code></pre>

<p>Alternatively, you can use <a href="https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args" rel="noreferrer"><code>page.evaluate()</code></a> to click an element based on its text content using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate" rel="noreferrer"><code>document.evaluate()</code></a> and a corresponding XPath expression:</p>

<pre class="lang-js prettyprint-override"><code>await page.evaluate(() =&gt; {
  const xpath = '//*[@class="elements"]//button[contains(text(), "Button text")]';
  const result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);

  result.iterateNext().click();
});
</code></pre>


blocks|key|4338073|text|快速解决方案，能够使用高级css选择器，如“：包含(文本)”|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4338074|所以使用这个library你可以|offset|length|4338075|const+select+=+require+('puppeteer-select');

const+element+=+await+select(page).getElement('button:contains(Button+text)');
await+element.click()|code-block|syntax|javascript|4338076|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/puppeteer-select^0|0|6|7|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>made quick solution to be able to use advanced css selectors like ":contains(text)"</p>

<p>so using this <a href="https://www.npmjs.com/package/puppeteer-select" rel="noreferrer">library</a> you can just </p>

<pre><code>const select = require ('puppeteer-select');

const element = await select(page).getElement('button:contains(Button text)');
await element.click()
</code></pre>


blocks|key|4338024|text|解决方案是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4338025|(await+page.$$eval(selector,+a+=>+a
++++++++++++.filter(a+=>+a.textContent+===+'target+text')
))[0].click()|code-block|syntax|javascript|4338026|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The solution is</p>

<pre><code>(await page.$$eval(selector, a =&gt; a
            .filter(a =&gt; a.textContent === 'target text')
))[0].click()
</code></pre>


blocks|key|4337690|text|以下是我的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4337691|let+selector+=+'a';
++++await+page.$$eval(selector,+anchors+=>+{
++++++++anchors.map(anchor+=>+{
++++++++++++if(anchor.textContent+==+'target+text')+{
++++++++++++++++anchor.click();
++++++++++++++++return
++++++++++++}
++++++++})
++++});|code-block|syntax|javascript|4337692|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is my solution:</p>

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


blocks|key|4337865|text|由于OP的用例似乎与目标字符串"Button+text"，<button>Button+text</button>完全匹配，因此text()似乎是正确的方法，而不是不太精确的contains()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4337866|虽然在有子元素时使用Thomas+makes+a+good+argument用于contains，避免误报，但当按钮为<button>Button+text+and+more+stuff</button>时，使用text()可以避免误报，这似乎也是一种可能的情况。手头有两个工具是很有用的，这样您就可以根据具体情况选择更合适的工具。|4337867|const+xp+=+'//*[@class="elements"]//button[text()="Button+text"]';
const+[el]+=+await+page.$x(xp);
await+el?.click();|code-block|syntax|javascript|4337868|请注意，许多其他答案没有满足.elements父类的要求。|4337869|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/55424335/6243352^0|F|D|T|S|1S|6|2F|A|0|14|8|1N|17|2Y|6|A|S|0|0|0|E|9|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|H|3|I|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>Since OP's use case appears to be an exact match on the target string <code>&quot;Button text&quot;</code>, <code>&lt;button&gt;Button text&lt;/button&gt;</code>, <code>text()</code> seems like the correct method rather than the less-precise <code>contains()</code>.</p>
<p>Although <a href="https://stackoverflow.com/a/55424335/6243352">Thomas makes a good argument</a> for <code>contains</code> when there are sub-elements, avoiding false negatives, using <code>text()</code> avoids a false positive when the button is, say, <code>&lt;button&gt;Button text and more stuff&lt;/button&gt;</code>, which seems just as likely a scenario. It's useful to have both tools on hand so you can pick the more appropriate one on a case-by-case basis.</p>
<pre class="lang-js prettyprint-override"><code>const xp = '//*[@class=&quot;elements&quot;]//button[text()=&quot;Button text&quot;]';
const [el] = await page.$x(xp);
await el?.click();
</code></pre>
<p>Note that many other answers missed the <code>.elements</code> parent class requirement.</p>


blocks|key|4338107|text|文本选择器或组合器选项不支持css选择器语法，我的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4338108|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++
++++++++}
++++});|code-block|syntax|javascript|4338109|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>There is no supported css selector syntax for text selector or a combinator option, my work around for this would be:</p>

<pre><code>await page.$$eval('selector', selectorMatched =&gt; {
    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  
        }
    });
</code></pre>


blocks|key|4338206|text|在puppeteer+12.0.1中，以下内容适用于我：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4338207|await+page.click("input[value='Opt1']");+//where+value+is+an+attribute+of+the+element+input
await+page.waitForTimeout(1000);

await+page.click("li[value='Nested+choice+1']");+//where+value+is+an+attribute+of+the+element+li+after+clicking+the+previous+option
await+page.waitForTimeout(5000);|code-block|syntax|javascript|4338208|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>With puppeteer 12.0.1, the following works for me:</p>
<pre><code>await page.click(&quot;input[value='Opt1']&quot;); //where value is an attribute of the element input
await page.waitForTimeout(1000);

await page.click(&quot;li[value='Nested choice 1']&quot;); //where value is an attribute of the element li after clicking the previous option
await page.waitForTimeout(5000);
</code></pre>


blocks|key|4338115|text|我不得不：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4338116|await+this.page.$eval(this.menuSelector,+elem+=>+elem.click());|offset|length|style|CODE|4338117|entityMap^0|0|0|1R|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>I had to:</p>

<p><code>await this.page.$eval(this.menuSelector, elem =&gt; elem.click());</code></p>


<p>Is there any method (didn't find in API) or solution to click on element with text?</p>
<p>For example I have html:</p>
<pre><code>&lt;div class=&quot;elements&quot;&gt;
    &lt;button&gt;Button text&lt;/button&gt;
    &lt;a href=#&gt;Href text&lt;/a&gt;
    &lt;div&gt;Div text&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>And I want to click on element in which text is wrapped (click on button inside .elements), like:</p>
<pre><code>Page.click('Button text', '.elements')
</code></pre>


How to click on element with text in Puppeteer

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

有没有什么方法(在API中找不到)或者解决方案来点击带有文本的元素？例如，我有html：<div class="elements">    <button>Button text</button>    <a href=#>Href text</a>    <div>Div text</div></div>我想单击其中包含文本的元素(单击.elements中的按钮)，如下所示：Page.click

问如何在Puppeteer中用文本点击元素
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Puppeteer中用文本点击元素EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Puppeteer中用文本点击元素
EN