Electron Forge+Vite+Selenium使用chrome.Options触发主进程JS错误

问题概述 #

用npm init electron-app@latest my-new-app -- --template=vite-typescript初始化Electron项目，执行yarn add selenium-webdriver && yarn add -D @types/selenium-webdriver安装依赖后：

• 主进程中不使用chrome.Options/chrome.ServiceBuilder时，Selenium代码可正常运行
• 一旦实例化chrome.Options，就会触发主进程JavaScript错误
• 切换到Webpack环境后，又出现chromedriver无法被识别的问题

错误日志 #

App threw an error during load
Error: Failed to import atoms module get-attribute.js. If running in dev mode, you need to run `bazel build //javascript/node/selenium-webdriver/lib/atoms:get-attribute.js` from the projectroot: Error: Could not dynamically require "./atoms/get-attribute.js". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.
    at requireAtom (/Users/ittae/GitHub/my-vite-app/.vite/build/main.js:1585:13)
    at Object.<anonymous> (/Users/ittae/GitHub/my-vite-app/.vite/build/main.js:1572:22)
    at Module._compile (node:internal/modules/cjs/loader:1391:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1451:10)
    at Module.load (node:internal/modules/cjs/loader:1214:32)
    at Module._load (node:internal/modules/cjs/loader:1030:12)
    at c._load (node:electron/js2c/node_init:2:13672)
    at cjsLoader (node:internal/modules/esm/translators:360:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)

涉事代码片段 #

let driver: WebDriver | null = null
try {
  const options = new chrome.Options()
  // chrome.setDefaultService(new chrome.ServiceBuilder("/path/to/chromedriver"))

  driver = await new Builder()
    // .setChromeOptions(options)
    .forBrowser(Browser.CHROME)
    .build()

  await driver.get("https://www.google.com")
  await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN)
  await driver.wait(until.titleIs("webdriver - Google Search"), 1000)
} finally {
  if (driver) {
    await driver.quit()
  }
}

解决方法 #

针对Vite环境的动态依赖问题 #

错误根源是Rollup的commonjs插件未处理Selenium内部的动态require调用，需在vite.config.ts中添加配置：

import { defineConfig } from 'vite'
import electron from 'vite-plugin-electron'
import commonjs from '@rollup/plugin-commonjs'

export default defineConfig({
  plugins: [
    electron({
      main: {
        rollupOptions: {
          plugins: [
            commonjs({
              dynamicRequireTargets: [
                'node_modules/selenium-webdriver/lib/atoms/**/*.js',
                'node_modules/selenium-webdriver/**/*.js'
              ]
            })
          ]
        }
      }
    })
  ]
})

同时确保代码中正确导入chrome模块：

import { Builder, Browser, By, Key, until, WebDriver } from 'selenium-webdriver'
import * as chrome from 'selenium-webdriver/chrome'

替代方案：调整Selenium初始化方式 #

若不想修改Vite配置，可尝试用异步方式创建Chrome选项：

const options = await chrome.Options.create()

针对Webpack环境的chromedriver识别问题 #

Webpack默认不会复制二进制文件到输出目录，需用copy-webpack-plugin手动复制：

1. 安装插件：yarn add -D copy-webpack-plugin
2. 修改webpack.config.js：

const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')

module.exports = {
  // 其他Webpack配置...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.join(__dirname, 'node_modules/chromedriver/lib/chromedriver'),
          to: path.join(__dirname, 'dist/chromedriver'),
          force: true
        }
      ]
    })
  ]
}

3. 在代码中指定chromedriver路径：

import * as path from 'path'
import * as chrome from 'selenium-webdriver/chrome'

const service = new chrome.ServiceBuilder(path.join(__dirname, './chromedriver')).build()
chrome.setDefaultService(service)

内容的提问来源于stack exchange，提问作者Seong Jun