javascript - Selenium Webdriver 无法在 Electron 构建中工作

Question

我有一个 Electron 项目，它渲染一个带有按钮的 html 页面，单击该按钮时会调用 Node js 脚本(通过 IPC)，该脚本使用 selenium 来抓取网页。

这是我的项目结构:

    -app/
     --index.html
     --main.js
     --index.js
    -package.json

这是我的 package.json:

    {
        "name": "agencies-scraper",
        "version": "1.0.0",
        "main": "app/main.js",
        "devDependencies": {
            "electron": "^5.0.7",
            "electron-builder": "^21.1.1"
        },
        "scripts": {
            "start": "electron .",
            "pack": "electron-builder --dir",
            "dist": "electron-builder",
            "postinstall": "electron-builder install-app-deps"
        },
        "build": {
            "appId": "my.id",
            "files": [
                "app/**/*",
                "node_modules/**/*",
                "package.json"
            ],
            "mac": {
                "category": "your.app.category.type"
            },
        },
        "dependencies": {
            "csv-writer": "^1.5.0",
            "selenium-webdriver": "^4.0.0-alpha.4"
        }
    }

在index.html中我有一个按钮:

    <button id="test">Click to Scrape</button>

点击后会引发以下一系列 react :

1. 链接的index.js，向“backchannel”ipc channel 发送信号:

    const {ipcRenderer} = require("electron");
    const button = document.getElementById("test");
    button.addEventListener("click", () => {
      ipcRenderer.send("backchannel"); 
    }

在 main.js 中，我监听“backchannel”，并在触发时实例化 selenium webdriver 并在单独的 Chrome 浏览器中打开 google.com:

const {app, BrowserWindow, ipcMain} = require('electron')
const webdriver = require('selenium-webdriver')

ipcMain.on('backchannel', async (event, arg) => {
    const driver = new webdriver.Builder()
            .forBrowser('chrome')
            .build()
    try {
        await driver.get('https://google.com');
    } catch (error) {
        console.log(error)
    }
})

操作系统询问我是否希望 Electron 应用程序接受传入连接，然后我单击“允许”(无论如何，selenium 都会打开浏览器):

当我通过 npm start 进行开发时，这非常有效。

但是，当我通过 npm run-script pack 或 npm run-script dist 打包应用程序时，构建版本未达到步骤 3。无权限窗口弹出并且没有浏览器打开。 Selenium 在那里不起作用。

我确信 IPC 正在构建版本中从 index.js 到 main.js 工作，因此问题不在于此。我在这里缺少什么？

Answer 1

我遇到了同样的问题，this answer帮助我调试问题

我引用它以防它被删除

1. In terminal type lldb path/to/build.app
2. In the opened debugger type run --remote-debugging-port=8315. It should open a window of your app.
3. Open Chrome at http://localhost:8315/
4. Click on the name of the app. For example, Webpack App.
5. If you don't see anything in the opened tab, focus on the window of your app.

然后在终端中检查是否存在此错误:

在当前路径中找不到 ChromeDriver。请从 http://chromedriver.storage.googleapis.com/index.html 下载最新版本的 ChromeDriver，并确保可以在您的 PATH 中找到它。

如果是这样的话，那么 download the latest version of chromedriver并将二进制文件添加到项目的根目录。

再次运行构建，它应该可以工作!

编辑: 您面临的问题是 app.asar 内的二进制文件无法执行，因此，可以快速解决此问题:

在 package.json 上，将以下属性添加到“build”对象

"asar": false

它应该看起来像这样:

.
.
.
        "build": {
            "appId": "my.id",
            "asar": false,
            "files": [
                "app/**/*",
                "node_modules/**/*",
                "package.json"
            ],
            "mac": {
                "category": "your.app.category.type"
            },
        },
.
.
.

编辑#2:

Electron builder 自动解压可执行二进制文件，因此以下解决方案对我有用。

运行npm install chromedriver

在构建 chromedriver 的部分，将构建方式更改为:

const chromedriverPath = require('chromedriver').path.replace('app.asar', 'app.asar.unpacked');
const serviceBuilder = new ServiceBuilder(chromedriverPath);
let driver = new webdriver.Builder()
  .forBrowser("chrome")
  .setChromeService(serviceBuilder)
  .build();

这样，驱动程序就可以获得 chromedriver 二进制文件的正确解压路径。