Puppeteer (1.14.0) 无法通过 "id" 找到锚标记,尽管 JQuery 可以找到它
Puppeteer (1.14.0) unable to find anchor tag by "id" although JQuery can find it
节点 v10.15.3(64 位)
木偶师 v1.14.0
Chromium v 75.0.3738.0(开发人员版本)(64 位)
我在网站自动化工具的最后一页,我需要按下的最后一个按钮(实际上是一个带有 "id" 属性的锚标记)无法被 Puppeteer 找到。代码是:
await page2.click('#____bs');
我收到的错误是:
错误:节点不可见或不是 HTML元素
HTML代码在这里:
<a role="button" ct="Button" rel="tooltip" title="Post"
aria-label="Please Select Post" data-toggle="cso-button" id="____bq"
class="cso-btn cso-btn cso-action cso-corner cso-btn-primary "
href="javascript:void(0)"
data-ctl-options="{'actiontype';:'ACTION','value':'Click'}"
style="display: inline-block;">Post</a>
在调试模式下打开此页面时,我可以使用 JQuery 轻松找到元素:
$("#____bq").text()
"Post"
所以,为什么Puppeteer找不到呢?有没有其他方法可以尝试单击此 link?
莫非控件(锚点)在屏幕可见边缘之外?我认为这无关紧要,因为我假设 Puppeteer 正在查看 HTML 而不是屏幕本身,但询问也无妨。
提前致谢。
更新:这是包含我正在尝试 select 的锚点的整个 HTML:
<div class="row split">
<div class="clsFP-expand clsBG-expand cso-hidden cso-cont-50r cso-pad5r">
<span class="cso-pad5-ie">
<a role="button" ct="Button" rel="tooltip" title="Cancel" aria-label="Please Select Cancel" data-toggle="cso-button" id="____bo" class="cso-btn cso-btn cso-action cso-corner cso-btn-grey " href="javascript:void(0)" data-ctl-options="{"actiontype":"ACTION","value":"Click"}" >Cancel</a>
</span>
<span class="cso-pad5-ie">
<a role="button" ct="Button" rel="tooltip" title="Post" aria-label="Please Select Post" data-toggle="cso-button" id="____bs" class="cso-btn cso-btn cso-action cso-corner cso-btn-primary inactive " href="javascript:void(0)" data-ctl-options="" >Post</a>
<a role="button" ct="Button" rel="tooltip" title="Post" aria-label="Please Select Post" data-toggle="cso-button" id="____bq" class="cso-btn cso-btn cso-action cso-corner cso-btn-primary " href="javascript:void(0)" data-ctl-options="{"actiontype":"ACTION","value":"Click"}" >Post</a>
</span>
</div>
</div>
并不是说 Puppeteer 获取不到元素。这是来自 Puppeteer 的验证(参见 https://github.com/GoogleChrome/puppeteer/blob/5ee21d97e796263857b9f3fbeaf63366179d346f/lib/JSHandle.js#L203)。
根据文档:
This method fetches an element with selector, scrolls it into view if needed, and then uses page.mouse to click in the center of the element. If there's no element matching selector, the method throws an error.
这意味着 Chromium 应该能够滚动到该元素,并且该元素应该可见以便能够点击它。
节点 v10.15.3(64 位) 木偶师 v1.14.0 Chromium v 75.0.3738.0(开发人员版本)(64 位)
我在网站自动化工具的最后一页,我需要按下的最后一个按钮(实际上是一个带有 "id" 属性的锚标记)无法被 Puppeteer 找到。代码是:
await page2.click('#____bs');
我收到的错误是:
错误:节点不可见或不是 HTML元素
HTML代码在这里:
<a role="button" ct="Button" rel="tooltip" title="Post"
aria-label="Please Select Post" data-toggle="cso-button" id="____bq"
class="cso-btn cso-btn cso-action cso-corner cso-btn-primary "
href="javascript:void(0)"
data-ctl-options="{'actiontype';:'ACTION','value':'Click'}"
style="display: inline-block;">Post</a>
在调试模式下打开此页面时,我可以使用 JQuery 轻松找到元素:
$("#____bq").text()
"Post"
所以,为什么Puppeteer找不到呢?有没有其他方法可以尝试单击此 link?
莫非控件(锚点)在屏幕可见边缘之外?我认为这无关紧要,因为我假设 Puppeteer 正在查看 HTML 而不是屏幕本身,但询问也无妨。
提前致谢。
更新:这是包含我正在尝试 select 的锚点的整个 HTML:
<div class="row split">
<div class="clsFP-expand clsBG-expand cso-hidden cso-cont-50r cso-pad5r">
<span class="cso-pad5-ie">
<a role="button" ct="Button" rel="tooltip" title="Cancel" aria-label="Please Select Cancel" data-toggle="cso-button" id="____bo" class="cso-btn cso-btn cso-action cso-corner cso-btn-grey " href="javascript:void(0)" data-ctl-options="{"actiontype":"ACTION","value":"Click"}" >Cancel</a>
</span>
<span class="cso-pad5-ie">
<a role="button" ct="Button" rel="tooltip" title="Post" aria-label="Please Select Post" data-toggle="cso-button" id="____bs" class="cso-btn cso-btn cso-action cso-corner cso-btn-primary inactive " href="javascript:void(0)" data-ctl-options="" >Post</a>
<a role="button" ct="Button" rel="tooltip" title="Post" aria-label="Please Select Post" data-toggle="cso-button" id="____bq" class="cso-btn cso-btn cso-action cso-corner cso-btn-primary " href="javascript:void(0)" data-ctl-options="{"actiontype":"ACTION","value":"Click"}" >Post</a>
</span>
</div>
</div>
并不是说 Puppeteer 获取不到元素。这是来自 Puppeteer 的验证(参见 https://github.com/GoogleChrome/puppeteer/blob/5ee21d97e796263857b9f3fbeaf63366179d346f/lib/JSHandle.js#L203)。
根据文档:
This method fetches an element with selector, scrolls it into view if needed, and then uses page.mouse to click in the center of the element. If there's no element matching selector, the method throws an error.
这意味着 Chromium 应该能够滚动到该元素,并且该元素应该可见以便能够点击它。