javascript - 如何在任何网络浏览器中运行 Puppeteer 代码?
问题描述
我正在尝试使用 Puppeteer 进行一些网络抓取,我需要将值检索到我正在构建的网站中。
我试图将 Puppeteer 文件加载到 html 文件中,就好像它是 JavaScript 文件一样,但我一直收到错误消息。但是,如果我在 cmd 窗口中运行它,它运行良好。
Scraper.js:getPrice();
function getPrice() {
const puppeteer = require('puppeteer');
void (async () => {
try {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('http://example.com')
await page.setViewport({ width: 1920, height: 938 })
await page.waitForSelector('.m-hotel-info > .l-container > .l-header-section > .l-m-col-2 > .m-button')
await page.click('.m-hotel-info > .l-container > .l-header-section > .l-m-col-2 > .m-button')
await page.waitForSelector('.modal-content')
await page.click('.tile-hsearch-hws > .m-search-tabs > #edit-search-panel > .l-em-reset > .m-field-wrap > .l-xs-col-4 > .analytics-click')
await page.waitForNavigation();
await page.waitForSelector('.tile-search-filter > .l-display-none')
const innerText = await page.evaluate(() => document.querySelector('.tile-search-filter > .l-display-none').innerText);
console.log(innerText)
} catch (error) {
console.log(error)
}
})()
}
索引.html:
<html>
<head></head>
<body>
<script src="../js/scraper.js" type="text/javascript"></script>
</body>
</html>
预期的结果应该是 Chrome 控制台中的这个:
但我收到了这个错误:
我究竟做错了什么?
解决方案
编辑:由于 puppeteer 删除了对 puppeteer-web 的支持,我将其移出 repo 并尝试对其进行修补。
它确实适用于浏览器。该软件包称为puppeteer-web,专门为此类情况制作。
但重点是,某些服务器上必须运行一些 chrome 实例。只有这样你才能连接到它。
您可以稍后在您的网页中使用它来通过其 WS Endpoint 驱动另一个浏览器实例:
<script src="https://unpkg.com/puppeteer-web">
</script>
<script>
const browser = await puppeteer.connect({
browserWSEndpoint: `ws://0.0.0.0:8080`, // <-- connect to a server running somewhere
ignoreHTTPSErrors: true
});
const pagesCount = (await browser.pages()).length;
const browserWSEndpoint = await browser.wsEndpoint();
console.log({ browserWSEndpoint, pagesCount });
</script>
我在 puppeteer 和 webpack 上玩得很开心,
请参阅这些答案以全面了解创建服务器等等,
推荐阅读
- php - Laravel - 将数组变量传递给路由
- nexus - Sonatype Nexus 3 - 上传的文件存储在哪里?
- scopus - 为了使用 Scopus 的 API,我需要将哪些域添加到允许列表中?
- python - 使用 spark.read.json() 时,PySpark 是否具有与 pandas 'orient' 选项等效的选项?
- scala - Scala:从 scylla 读取数据引发异常
- jsp - 如何将tr中的选定数据显示到另一个jsp页面
- trusted-web-activity - 无法为 twa 添加快捷方式
- label - 为 compoplot 中的每个条添加标签
- python - 如何使用文件创建特定的 python 字典
- swift - 自适应填充与自定义填充 SwiftUI