Puppeteer是一个Node库，它提供了一个高级API，通过DevTools协议控制无头Chrome或Chromium。它还可以配置为使用完整（非无头）Chrome或Chromium。
如何在不使用value属性的情况下从select中选择选项？
有没有办法使用css选择器选择具有Value1的第一个选项。我正在开发使用 puppeteer 创建的自动化工具，我可以打开下拉菜单，但无法单击该选项...
我是 Puppeteer 的新手。我在单击某个按钮时遇到问题，我怀疑是因为它是一个伪装成按钮的超链接。我对第 3 行显示的元素感兴趣。 1 我是 Puppeteer 的新手。我在单击某个按钮时遇到问题，我怀疑是因为它是一个伪装成按钮的超链接。我对第 3 行显示的元素感兴趣。 1 <div class="pull-right"> 2 <button class="btn internal-close">Cancel</button> 3 <a href="#" id="export_people_action" class="btn btn-primary excel">Download</a> 4 <div id="directory_export_people_actions_container" class="btn-group dropup hide pull-right" style="margin-left: 7px;"> 5 <a href="#" id="directory_save_and_replace_existing_template" class="btn btn-primary">Download</a> 6 <button class="btn btn btn-primary dropdown-toggle" data-toggle="dropdown"> 7 <i class="icon-caret-down" style="margin-left: -2px; margin-right: -3px;"> 8 </i> 9 </button> 10 <ul class="dropdown-menu align_left"> 11 <li class=""> 12 <a href="#" class="trigger_export_people_action">Download Without Updating</a> 13 </li> 14 <li class=""> 15 <a href="#" id="directory_save_as_new_template">Save as New Template</a> 16 </li> 17 </ul> 18 <input type="hidden" id="email_later_delay" value=""> 19 <input type="hidden" id="temp_download" value="false"> 20 <input type="hidden" id="unedited_template" value=""> 21 </div> 22 </div> 以下是我尝试过的一些事情： (1) 起初，我认为它和其他按钮一样工作，所以我使用了 id。 await page.click('#export_people_action'); 返回错误“错误：找不到选择器的元素：#export_people_action”。 (2) 然后我开始更仔细地观察，并意识到这是一个链接。我尝试过 XPath。 const downloadButton = await page.waitForSelector('::-p-xpath(//*[@class="btn btn-primary excel"])'); await downloadButton.click(); 返回错误“TimeoutError：等待选择器[[[{"name":"xpath","value":"//*[@class=\"btn btn-primary excel\"]"}]]]失败：等待失败：超出30000ms”。 从那时起我尝试了几种不同的方法，但沿着这两条线，没有成功。我承认我有点不知所措。 编辑 成功！ @ggorlen 正确识别出该按钮位于 iframe 中。 await page.waitForSelector('iframe'); const elementHandle = await page.$( 'iframe[src="/zephyr/export"]' ) const frame = await elementHandle.contentFrame(); await delay(100); await frame.click('#export_people_action')
puppeteer pdf 生成 我想实现页面结束的功能，但是没有好的解决方案，希望得到社区的帮助。 代码： puppeteer pdf 生成 我想实现页面结束的功能，但是没有好的解决方案，希望得到社区的帮助。 代码： <html> <head> <style> .content { background-color: #999; } .footer { background-color: #e9a530; } </style> </head> <body> <div class="content"> <table> <thead> <tr> <td>tabe header 1</td> <td>tabe header 2</td> <td>tabe header 3</td> <td>tabe header 4</td> </tr> </thead> <tbody> <tr> <td colspan="4">tabe content 1</td> </tr> <tr> <td colspan="4">tabe content 2</td> </tr> <tr> <td colspan="4">tabe content 3</td> </tr> <tr> <td colspan="4">tabe content 4</td> </tr> <tr> <td colspan="4">tabe content 5</td> </tr> <tr> <td colspan="4">tabe content 1</td> </tr> <tr> <td colspan="4">tabe content 2</td> </tr> <tr> <td colspan="4">tabe content 3</td> </tr> <tr> <td colspan="4">tabe content 4</td> </tr> <tr> <td colspan="4">tabe content 5</td> </tr> <tr> <td colspan="4">tabe content 1</td> </tr> <tr> <td colspan="4">tabe content 2</td> </tr> <tr> <td colspan="4">tabe content 3</td> </tr> <tr> <td colspan="4">tabe content 4</td> </tr> <tr> <td colspan="4">tabe content 5</td> </tr> <tr> <td colspan="4">tabe content 1</td> </tr> <tr> <td colspan="4">tabe content 2</td> </tr> <tr> <td colspan="4">tabe content 3</td> </tr> <tr> <td colspan="4">tabe content 4</td> </tr> <tr> <td colspan="4">tabe content 5</td> </tr> <tr> <td colspan="4">tabe content 1</td> </tr> <tr> <td colspan="4">tabe content 2</td> </tr> <tr> <td colspan="4">tabe content 3</td> </tr> <tr> <td colspan="4">tabe content 4</td> </tr> <tr> <td colspan="4">tabe content 5</td> </tr> <tr> <td colspan="4">tabe content 1</td> </tr> <tr> <td colspan="4">tabe content 2</td> </tr> <tr> <td colspan="4">tabe content 3</td> </tr> <tr> <td colspan="4">tabe content 4</td> </tr> <tr> <td colspan="4">tabe content 5</td> </tr> <tr> <td colspan="4">tabe content 1</td> </tr> <tr> <td colspan="4">tabe content 2</td> </tr> <tr> <td colspan="4">tabe content 3</td> </tr> <tr> <td colspan="4">tabe content 4</td> </tr> <tr> <td colspan="4">tabe content 5</td> </tr> <tr> <td colspan="4">tabe content 1</td> </tr> <tr> <td colspan="4">tabe content 2</td> </tr> <tr> <td colspan="4">tabe content 3</td> </tr> <tr> <td colspan="4">tabe content 4</td> </tr> <tr> <td colspan="4">tabe content 5</td> </tr> <tr> <td colspan="4">tabe content 1</td> </tr> <tr> <td colspan="4">tabe content 2</td> </tr> <tr> <td colspan="4">tabe content 3</td> </tr> <tr> <td colspan="4">tabe content 4</td> </tr> <tr> <td colspan="4">tabe content 5</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">table footer</td> </tr> </tfoot> </table> </div> <div class="footer"> I want the footer at the bottom of the print page </div> </body> </html> 当我使用 chrome 打印页面时，我希望页脚位于当前页面的底部，数据是动态的，并且分页可能是多页 镀铬打印页 我尝试过 'css位置固定'和'根据DOM的scrollHeight和offsetTop计算内容高度', 但内容中含有‘table thead tfoot’和‘page-break-inside’，定位不准确。 我认为你必须解决分页符或类似的问题，你必须根据你的数据调整进入页面的内容，最好是作为自动化过程。 在这里，我要求 ChatGPT 为您创建一个示例。我希望它有帮助： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Print with Section Footers</title> <style> /* General Styling */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .section { page-break-after: always; /* Ensure each section starts on a new page */ display: flex; flex-direction: column; height: 100vh; /* Full page height */ justify-content: space-between; /* Space between content and footer */ box-sizing: border-box; padding: 20px; } .section-content { flex-grow: 1; /* Main content grows to fill space */ } .footer { text-align: center; border-top: 1px solid #ccc; /* Optional visual separator */ padding: 10px; margin-top: 10px; } @media print { @page { margin: 0; /* Remove default page margins */ } body { margin: 0; } .section { height: 100vh; /* Ensure each section is treated as a full page */ page-break-after: always; /* Force a new page after each section */ } .footer { position: relative; bottom: 0; width: 100%; } } </style> </head> <body> <!-- Section 1 --> <div class="section"> <div class="section-content"> <h1>Section 1</h1> <p>This is the content for the first section. It can have as much or as little content as needed.</p> </div> <div class="footer"> <p>Footer for Section 1</p> </div> </div> <!-- Section 2 --> <div class="section"> <div class="content"> <table> <thead> <tr> <td>tabe header 1</td> <td>tabe header 2</td> <td>tabe header 3</td> <td>tabe header 4</td> </tr> </thead> <tbody> <tr> <td colspan="4">tabe content 1</td> </tr> <tr> <td colspan="4">tabe content 2</td> </tr> <tr> <td colspan="4">tabe content 3</td> </tr> <tr> <td colspan="4">tabe content 4</td> </tr> <tr> <td colspan="4">tabe content 5</td> </tr> <tr> <td colspan="4">tabe content 1</td> </tr> <tr> <td colspan="4">tabe content 2</td> </tr> <tr> <td colspan="4">tabe content 3</td> </tr> <tr> <td colspan="4">tabe content 4</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">table footer</td> </tr> </tfoot> </table> </div> <div class="footer"> <p>Footer for Section 2</p> </div> </div> <!-- Section 3 --> <div class="section"> <div class="section-content"> <h1>Section 3</h1> <p>This is the content for the third section. Content can vary in length.</p> </div> <div class="footer"> <p>Footer for Section 3</p> </div> </div> </body> </html>
对 puppeteer 和 javascript 非常陌生，我根本没有 JSON 经验。 我正在尝试选择以下按钮： 对 puppeteer 和 javascript 非常陌生，我根本没有 JSON 经验。 我正在尝试选择以下按钮： <button style=SomeColorInfo class=LongListOfClassNames type="button" role="button"> <span>visible text</span> </button> （我有迹象表明该网站已经知道它正在被抓取，所以除非有必要，否则我宁愿不公开 URL 或代码的具体细节。） 我可以使用（很长的）xpath 选择按钮，但这似乎有风险，因为它将我的代码与 DOM 的特定结构联系起来。 由于该页面没有很多按钮，并且 <span> 中的文本极不可能更改，因此我更希望代码查找包含该文本的按钮。 无需处理滚动或下一页问题；此页面是有限的。 我只是用头撞砖墙来尝试选择按钮！ 我依次尝试了以下各项： const theB = await page.locator('button'); const theB = await page .locator('button') .filter(button => button.innerText === 'visible text'); const theB = await page .locator('button') .filter(button => button.innerText == 'visible text'); const theB = await page .locator('button') .filter(button => button.innerText = 'visible text'); const theB = await page .locator('button') .filter(button => button.innerText.startsWith('visible')); const theB = await page .locator('button') .filter(button => button.innerText.contains('visible')); const theB = await page .locator('button') .filter(button => button.innerHTML.contains('visible')); const theB = await page.locator('::-p-aria([role="button"])'); 其中大部分都是受到此处主题的启发。 没有人在工作。 每次我从 undefined 得到 console.log(theB.innerHTML); （万一它有所作为，最终目标是单击此按钮。由于我没能实现这一点，所以我稍微后退了一步，只是选择它，然后读出它的 html。） 有人可以指出我解决这个看似基本问题的正确方向吗？ 非常感谢！ 您应该学习 XPath 查询。 然后您可以使用此按钮来选择此按钮： '//button[./span[text()="visible text"]]'
是 puppeteer 新手，无法理解如何将变量传递到 querySelector 内的浏览器 我有一些东西可以查询活跃用户的数量并返回
我尝试重写下面的标题： 等待 page.setExtraHTTPHeaders({ "接受语言": "en-US;q=0.7", }); 但是，当我在 Chrome 中检查网络时，请求标头是
在 puppeteer 中，我想在进入下一行代码之前等待定义的时间。 我尝试将 setTimeout 放入评估函数中，但它似乎被简单地忽略了 console.log('之前
Puppeteer：如何禁用 Chrome 中的“更改密码”（密码泄漏检测）弹出窗口？
我正在使用 Puppeteer 进行浏览器自动化，我在 Chrome 中遇到一个弹出窗口，上面写着： “更改您的密码。您刚刚使用的密码在数据泄露中暴露。立即在 Google 中更改它
错误：协议错误（Fetch.continueRequest）：无效的InterceptionId
我正在使用 Puppeteer 和 chrome 开发工具来拦截网络响应并在必要时修改它们。我使用以下代码。 const client = page._client; 等待 client.send("Fetch.enable&qu...
如何在 Mac OS 上在后台启动非无头 puppeteer？
当 Puppeteer 在非无头模式下启动时，新的 Chrome 会带到屏幕前面并捕获焦点，覆盖当前活动的窗口。 我想让它通过标题保持可见......
我尝试使用 Puppeteer 和 Docker 来部署应用程序，但总是遇到相同的错误：找不到浏览器： 错误：在配置的可执行文件路径（/usr/bin/g...
如何使用 Ctrl+A 和 Ctrl+C 并行抓取多个页面而不混合文本？
我使用 Puppeteer 从多个页面中抓取文本，方法是导航到每个页面，使用 Ctrl+A 选择所有内容，使用 Ctrl+C 复制它，然后检索剪贴板数据。不过，我
为了解决无法使用随机选择器单击Facebook div的问题，我想使用Facebook的移动版本（m.facebook.com）： 从“npm:puppeteer...
Puppeteer 无法监听来自 paribu.com 的所有请求
我想监听来自paribu.com的所有请求（带数据）；但我只听一些请求，没有请求数据。 等等，当我使用符号时，我只看到这个（而且我不明白为什么我看到相同的请求......
我想使用下面的类获取“data id”的值并将它们放入数组中。 我想使用下面的类获取“data id”的值并将它们放入数组中。 <div data-id="111" class="tr svelte-1q11k9a" style="z-index: auto;"> <div data-id="222" class="tr svelte-1q11k9a" style="z-index: auto;"> <div data-id="333" class="tr svelte-1q11k9a" style="z-index: auto;"> 我已经尝试过，但它返回“未定义”。 const ex = await page.$$eval("div[class='tr svelte-1q11k9a']", ({ data-id }) => data-id); console.log(ex) 问题在于您如何尝试提取 data-id 属性。解构语法 { data-id } 无效，因为带有连字符的属性名称不能在 JavaScript 对象中直接解构，因为它使用了减号运算符。 尝试下面的代码，但我更希望您可以将该属性命名为 data_id。 const ex = await page.$$eval("div.tr.svelte-1q11k9a", (elements) => { return elements.map(el => el.getAttribute("data-id")); }); console.log(ex); 要从 HTML 元素中提取 "data id" 属性的值并将其存储在数组中，您可以修改代码，如下所示： const ids = await page.$$eval("div[class='tr svelte-1q11k9a']", elements => { return elements.map(element => element.getAttribute('data-id')); }); console.log(ids); 此代码使用 page.$$eval 来评估所有匹配元素上的函数，并使用 getAttribute('data-id') 提取每个元素的“data-id”属性值。然后它使用 map 创建这些值的数组。
我想使用下面的类获取“data id”的值并将它们放入数组中。 我想使用下面的类获取“data id”的值并将它们放入数组中。 <div data-id="111" class="tr svelte-1q11k9a" style="z-index: auto;"> <div data-id="222" class="tr svelte-1q11k9a" style="z-index: auto;"> <div data-id="333" class="tr svelte-1q11k9a" style="z-index: auto;"> 我已经尝试过，但它返回“未定义”。 const ex = await page.$$eval("div[class='tr svelte-1q11k9a']", ({ data-id }) => data-id); console.log(ex) 问题在于您如何尝试提取 data-id 属性。解构语法 { data-id } 无效，因为带有连字符的属性名称不能在 JavaScript 对象中直接解构，因为它使用了减号运算符。 尝试下面的代码，但我更希望您可以将该属性命名为 data_id。 const ex = await page.$$eval("div.tr.svelte-1q11k9a", (elements) => { return elements.map(el => el.getAttribute("data-id")); }); console.log(ex);
google-chrome 尝试在 AWS 上托管的 Ubuntu Docker 映像上创建 mimeapps.list 由于只读目录，Lambda 崩溃了
我创建了一个 Ubuntu Docker 映像并将其用作 Lambda 函数。我已完成所有先决条件，例如安装 lambda-runtime-interface。 Docker 镜像是用 ...
puppeteer 是否可以在不聚焦窗口的情况下进行屏幕截图？ （在窗户上）
我有一个脚本可以创建多个浏览器，并以固定的速率将屏幕截图上传到某个API，但是当它拍摄照片时，它会使页面聚焦。然而，我偶尔需要...
从“puppeteer”导入puppeteer； 让 url="https://www.google.com/maps/place/Skittle+Lane/data=!4m7!3m6!1s0x6b12ae3f49692bed:0x4f8c7cbe2bac3f02!8m2!3d-33.8686!4d151.2048!16s%2Fg%
我正在使用 Typescript for Puppeteer。我正在尝试从元素中获取innerText。 const data = wait page.$eval(selector, node => node.innerText); 我收到错误： 属性“innerText”...