I'm trying to use puppeteer with electron.js but none of functions related to waiting and clicking do work.

It alaways gives:

Error: Passed function is not well-serializable!
    at ExecutionContext._ExecutionContext_evaluate

Example function:

// url: https://example.com/
async function scraper(url) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);
    const element = await page.waitForSelector("h1");
    console.log('element: ', element)
    await browser.close();
}

None of the solutions mentioned in these threads works. (wrapping with evals / rewriting wait functions) Puppeteer in Electron: Error: Passed function is not well-serializable

Uncaught (in promise) Error: Passed function is not well-serializable

Any ideas?

CodePudding user response：

Ok I resolved the problem. Firstly context: Generally as written in comments, you can not run puppeteer from browser environment, it works solely in odejs. Electron provides 2 processes renderer and main. Whenever you want to use node you have to do it in main one. About communication between both procesess you can read in docs, there are many ways of handling it. From what I know the best practice is to declare it in preload and use ipc bridge. Other solutions violate contextIsolation rule.

I was w wandering aound from one problem to another: like not serializable function, require not defined and many others. Finally I rewrote everything from scratch and it works here's my solution:

main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')
const { ipcMain } = require('electron');
const puppeteer = require("puppeteer");

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: true,
    },
  })
  ipcMain.handle('ping', async () => {
    await checkPup()
  })

  async function checkPup() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    page
      .waitForSelector('h1', { visible: true })
      .then(() => {
        console.log('got it')
      });
    const [button] = await page.$x("//button[contains(., 'Create account')]");
    if (button) {
      console.log('button: ', button)
      await button.click();
      await page.screenshot({ path: 'tinder.png' });

      const [button] = await page.$x("//button[contains(., 'Create account')]");
      if (button) {
        console.log('button: ', button)
        await button.click();
        await page.screenshot({ path: 'tinder.png' });
      }
    }
    await browser.close();
  }
  // and load the index.html of the app.
  mainWindow.loadFile('index.html')
  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd   Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})


// Attach listener in the main process with the given ID
ipcMain.on('request-mainprocess-action', (event, arg) => {
  // Displays the object sent from the renderer process:
  //{
  //    message: "Hi",
  //    someData: "Let's go"
  //}
  console.log(
    arg
  );
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
const { contextBridge, ipcRenderer } = require('electron')
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
  ping: () => ipcRenderer.invoke('ping'),
  // we can also expose variables, not just functions
})

renderer.js

const information = document.getElementById('info')
const btn = document.getElementById('btn')
information.innerText = `This app is using Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), and Electron (v${versions.electron()})`

btn.addEventListener('click', () => {
    console.log('habad!!!!!')
    func()
})


const func = async () => {
    const response = await window.versions.ping()
    information.innerText = response;
    console.log(response) // prints out 'pong'
  }
  

Sorry for a little bit of a mess I hope it will help someone maybe finding solutions to some other problems