如何在任何网络浏览器中运行 Puppeteer 代码? [英] How to run Puppeteer code in any web browser?
问题描述
我正在尝试使用 Puppeteer 进行一些网络抓取，我需要将值检索到我正在构建的网站中.
I'm trying to do some web scraping with Puppeteer and I need to retrieve the value into a Website I'm building.
我尝试在 html 文件中加载 Puppeteer 文件，就好像它是一个 JavaScript 文件一样，但我一直收到错误消息.但是，如果我在 cmd 窗口中运行它，它运行良好.
I have tried to load the Puppeteer file in the html file as if it was a JavaScript file but I keep getting an error. However, if I run it in a cmd window it works well.
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 控制台中的预期结果应该是这个:
The expected result should be this one in the console of Chrome:
但我收到了这个错误:
我做错了什么?
推荐答案
由于 puppeteer 取消了对 puppeteer-web 的支持，我将其移出 repo 并尝试对其进行一些修补.
它确实适用于浏览器.该软件包名为 puppeteer-web，专为此类情况而设计.
It does work with browser. The package is called puppeteer-web, specifically made for such cases.
但重点是，一定有一些 chrome 实例在某个服务器上运行.只有这样你才能连接到它.
But the main point is, there must be some instance of chrome running on some server. Only then you can connect to it.
您可以稍后在您的网页中使用它来通过其 WS 端点驱动另一个浏览器实例:
You can use it later on in your web page to drive another browser instance through its 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 上玩得很开心，
I had some fun with puppeteer and webpack,
请参阅这些答案以全面了解创建服务器等，
See these answers for full understanding of creating the server and more,
这篇关于如何在任何网络浏览器中运行 Puppeteer 代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
