如何在任何Web浏览器中运行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.
我试图加载hp文件中的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.
Scraper.js：
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)
}
})()
}
index.html：
index.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-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.
使用Browserify捆绑Puppeteer：
To bundle Puppeteer using Browserify:
克隆Puppeteer存储库：
Clone Puppeteer repository:
git clone https://github.com/GoogleChrome/puppeteer && cd puppeteer
npm install
npm run bundle
这将创建 ./ utils / browser / puppeteer-web.js 包含Puppeteer包的文件。
This will create ./utils/browser/puppeteer-web.js file that contains Puppeteer bundle.
您可以稍后在您的文件中使用它通过其WS端点驱动另一个浏览器实例的网页：
You can use it later on in your web page to drive another browser instance through its WS Endpoint:
<script src='./puppeteer-web.js'></script>
<script>
const puppeteer = require('puppeteer');
const browser = await puppeteer.connect({
browserWSEndpoint: '<another-browser-ws-endpont>'
});
// ... drive automation ...
</script>
我和puppeteer和webpack玩得很开心，
I had some fun with puppeteer and webpack,
- playground-react-puppeteer
- playground-electron-react-puppeteer-example
有关创建服务器的详细信息，请参阅以下答案，
See these answers for full understanding of creating the server and more,
- Official link to puppeteer-web
- Puppeteer with docker
- Puppeteer with chrome extension
- Puppeteer with local wsEndpoint
这篇关于如何在任何Web浏览器中运行Puppeteer代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
