повторно использовать экземпляр браузера puppeterr

Question

Я хотел бы знать, возможно ли иметь один. js файл, который открывает экземпляр браузера, создает новую страницу / вкладку, регистрируется на веб-сайте (с именем пользователя / паролем) и просто не используется.
А во втором. js файле использовать файл одного экземпляра браузера и его страницу.

1. js

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ 
        headless: true,
        args: ['--no-sandbox'], 
        ignoreDefaultArgs: ["--hide-scrollbars"]
    });

    const page = await browser.newPage();
    const response = await page.goto('https://google.com');

    console.log('Browser open in the background (headless)!');
    //await browser.close();
})();

2. js

const puppeteer = require('puppeteer');

(async () => {
    // instructions on browser instance/page from 1.js ...
})();

Answer 1

Объект искателя сохраняет состояние экземпляра браузера, и, где бы вы ни вызывали / передавали этот экземпляр, он ссылается на тот же хром в «фоне». Если это перебор, и вы просто хотите подключиться к уже запущенному хрому с помощью puppeteer, вы можете сделать это с puppeteer.connect. взгляните на это: Как "зацепить" кукловода в работающий Chrome экземпляр / вкладку - мбит

Да, я думаю, это излишне для меня :). Но ссылка, которую вы разместили, была тем, что я хотел, но у меня есть 2 вопроса.

Это пример того, что у меня есть.

// 1.js
// open chromium, new tab, go to google.com, print browserWSEndpoint, disconnect
const puppeteer = require('puppeteer');

(async () => {
    var browser = await puppeteer.launch({headless: false});
    var page = await browser.newPage();
    var response = await page.goto('https://google.com');

    var browserWSEndpoint = browser.wsEndpoint();
    console.log(browserWSEndpoint); // prints: ws://127.0.0.1:51945/devtools/browser/6462daeb-469b-4ae4-bfd1-c3bd2f26aa5e

    browser.disconnect();
})();

И

// 2.js
// connect to the open browser with the browserWSEndpoint manualy put in, ... , disconect. 
const puppeteer = require('puppeteer');

(async () => {
    var browser = await puppeteer.connect({browserWSEndpoint: 'ws://127.0.0.1:51945/devtools/browser/6462daeb-469b-4ae4-bfd1-c3bd2f26aa5e'});

    // somehow use the tab that is open from 1.js (google.com)

    await browser.disconnect();
})();

Я получаю Строка browserWSEndpoint из console.log 1. js. Это прекрасно работает, но у меня есть две трудности.

1 - Как я могу использовать переменную browserWSEndpoint из 1. js, поэтому мне не всегда нужно копировать и вставлять ее в 2. js.

2- Если я открою новую страницу / вкладку на 1. js и go, например, для Google и отключусь (browser.disconnect ()), как можно использовать эту страницу / вкладку на 2. js.

Answer 2

Хорошо, прежде всего, спасибо, что нашли время, я попробовал твой код, и он отлично работает, но я неправильно объяснил себя.

То, что я хотел бы:

1 . js Откройте экземпляр браузера> хром и просто продолжайте работать в фоновом режиме, в моем случае cmd / powershell windows.

Затем

2. js Откройте тот же экземпляр хрома, который уже открыт в фоновом режиме с 1. js. И делай с ней все, что захочу.

Я понятия не имею, возможно ли это, но было бы неплохо.

Answer 3

Вы можете реализовать это разными способами, например, имея отдельные модули с функциями или разными классами, и это зависит от ваших конкретных потребностей.

У вас может быть класс, который запускает браузер и создает страницы, а также некоторые дополнительные функциональные возможности.

//1.js
const puppeteer = require('puppeteer');

class Crawler {
    constructor() {
        //init with whatever values you'll need in your class
        //or throw an error if the object wasn't created through build
    }
    static async build() {
        let crawler = new Crawler();
        await crawler._init();
        return crawler;
    }
    async _init() {
        //launch the browser and keep its state
        this._browser = await puppeteer.launch({timeout: 0});
        //create a page and keep its state
        this._page = await this._browser.newPage();
    }
    //getter
    get browser() {
        return this._browser;
    }
    //getter
    get page() {
        return this._page;
    }
    async login(url) {
         await this._page.goto(url);
         //do whatever is related to the login process
    }
}

module.exports = {Crawler};

Обратите внимание, что в конструкторе не может быть асин c функций. Поскольку запускается браузер asyn c, мы используем нечто вроде build для запуска браузера при создании объекта. Затем мы создаем объект для сканирования следующим образом:

//2.js
const {Crawler} = require('./1.js');

(async() => {
    let crawler = await Crawler.build(); 
    await crawler.login("https://example.com");
    //access crawler's page
    console.log(crawler.page.url());
})();

Имейте в виду, что это только пример и ни в коем случае не представитель лучших практик. Итак, сначала вам нужно понять, чего вы хотите достичь с помощью такой инкапсуляции, а затем выбрать метод, который вам подходит больше всего.

Подробнее о JS классах здесь