相关疑难解决方法(0)

我有一个Chrome容器(使用此Dockerfile部署),可以根据请求从App容器呈现页面.

基本流程是:

• 应用程序向Chrome发送http请求,并作为响应接收要使用的websocket网址(例如ws://chrome.example.com:9222/devtools/browser/13400ef6-648b-4618-8e4c-b5c73db2a122)
• 然后,应用程序使用该websocket URL与Chrome进一步通信,并接收呈现的页面.我正在使用puppeteer库连接到Chrome实例并与之通信,使用puppeteer.connect({ browserWSEndpoint: webSocketUrl });

对于单个Chrome容器,这非常有效.

但我正在尝试扩展以在Docker群中拥有多个Chrome容器.

问题是,我认为,App收到的websocket url特定于在该特定Chrome容器中运行的实例,因此当App使用它时(现在有多个Chrome容器),来自App的websocket请求将会不一定要路由到正确的Chrome容器.

处理这个问题的最佳方法是什么？

我有两个用于 puppeteer 自动化的 Node.js 脚本。

1) 启动器.js

此 Puppeteer 脚本启动 Chrome 浏览器并断开与 chrome 的连接，以便可以使用 WSEndpoint 进行连接。

const puppeteer = require('puppeteer');

module.exports = async () => {
    try {
        const options = {
            headless: false,
            devtools: false,
            ignoreHTTPSErrors: true,
            args: [
                `--no-sandbox`,
                `--disable-setuid-sandbox`,
                `--ignore-certificate-errors`
            ]
        };
        const browser = await puppeteer.launch(options);
        let pagesCount = await browser.pages();
        const browserWSEndpoint = await browser.wsEndpoint();
        // console  WSEndPoint say : "ws://127.0.0.1:42207/devtools/browser/dbb2525b-ce44-43c2-a335-ff15d0306f36"
        console.log("browserWSEndpoint----- :> ", browserWSEndpoint);
        await browser.disconnect();
        return browserWSEndpoint;
    } catch (err) {
        console.error(err);
        process.exit(1); …

我对React还是很陌生，我正在开发一个应用程序，它将获取网页的实际屏幕截图，并且该应用程序可以在所截取的屏幕截图之上绘制并添加涂鸦。最初，我使用html2canvas和domToImage拍摄客户端屏幕快照，但它无法完全呈现网页中显示的图像。

Reddit用户/ pamblam0建议我调查Google的Puppeteer。它的工作方式是启动无头铬浏览器，该浏览器转到我在本地主机上的react应用，然后轻松获取整个页面的屏幕截图。但是我的问题是，木偶戏在React应用程序中不能很好地发挥作用。它给了我一个ws错误，正如在Google搜索中所述，可以通过简单地安装ws来解决（顺便说一句不起作用）。

现在，我的操纵p脚本可以完成我的react应用程序。据我了解，它不适用于客户端应用程序（我可能错了）。我想发生的是，每当我从react应用程序中单击按钮时，puppeteer应该执行并返回base64字符串，然后将其传递到我的react应用程序中的组件。

到目前为止，这是我所做的。

puppeteerApp.js

const puppeteer = require('puppeteer');

const takeScreenshot = async () => {
    puppeteer.launch().then(async browser => {
        const page = await browser.newPage();
        const options = {
            path: 'saved_images/webshot.png',
            encoding: 'base64'
        }
        await page.goto('http://localhost:3000/', { waitUntil: 'networkidle2' });
        const elem = await page.$('iframe').then(async (iframe) => {
            return await iframe.screenshot(options)
        });

        await browser.close()
    });
}

takeScreenshot();

来自React应用的代码 App.js

import React, { Component } from 'react';
import ScreenshotsContainer from './containers/ScreenshotsContainer/ScreenshotsContainer'
import ImageContainer from './containers/ImageContainer/ImageContainer';
import html2canvas from 'html2canvas';
import …

我正在尝试使用Puppeteer进行一些Web抓取，并且需要将其值检索到我正在构建的网站中。

我试图将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 …