函数及其选择器来选择如何导出 CSV

Question

这是用户选择导出CSV文件的页面中的源代码。

<div class="btn-group pull-right" style="margin-right: 10px">
    <a class="btn btn-sm btn-twitter"><i class="fa fa-download"></i> 导出</a>
    <button type="button" class="btn btn-sm btn-twitter dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="/admin/order?_export_=all" target="_blank">全部</a></li>
        <li><a href="/admin/order?_export_=page%3A1" target="_blank">当前页</a></li>
        <li><a href="/admin/order?_export_=selected%3A__rows__" target="_blank" class='export-selected'>选择的行</a></li>
    </ul>
</div>

代码的目的是从 3 个选项中选择 当前页 并启动导出事件。这是导出 CSV 的代码片段：

await page._client.send('Page.setDownloadBehavior', {behavior: 'allow', 
         downloadPath: '/tmp'})
res = await Promise.all([
      page.waitForNavigation({waitUntil: 'load', timeout: 60000}),
      page.click('a[href$="/admin/order?_export_=page%3A1"]'),      
    ]);

错误是：

Error: No node found for selector: a[href$="/admin/order?_export_=page%3A1"]
at assert (C:\node_modules\puppeteer\lib\helper.js:259:11)
at Frame.click (C:\node_modules\puppeteer\lib\FrameManager.js:704:5)
at <anonymous>

这里有2个问题。第一个是：page.click() 是否符合目的？ page.select() 做类似的事情。第二个是：我想选择的第二个选项的正确选择器是什么？

Answer 1

page.click()是正确的，如果你想遵循link。 page.select() 用于 select 在 select 框中输入值。

关于您的查询select或者，您缺少右括号和引号。它应该像这样工作：

page.click('a[href$="/admin/order?_export_=page%3A1"]')

Answer 2

确保在单击 link 之前单击下拉按钮：

await page.click('.btn-twitter.dropdown-toggle');

然后，一旦 link 可见，您可以使用以下选择器单击它：

await page.click('a[href$="/admin/order?_export_=page%3A1"]');

如果元素是动态生成的，您可能需要使用page.waitForSelector()等待元素添加到DOM：

await page.waitForSelector('a[href$="/admin/order?_export_=page%3A1"]');

函数及其选择器来选择如何导出 CSV

Function and its selector to choose how to export CSV

javascript

node.js

headless-browser

google-chrome-devtools

puppeteer