javascript - 用于选择如何导出 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

在单击链接之前，请确保单击下拉按钮:

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

然后，一旦链接可见，您就可以使用以下选择器单击它:

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

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

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