自动化测试¶

这将启动一个配置向导，帮助你完成正确的设置、安装所有必要的包，并生成 `wdio.conf.js` 配置文件。请务必在最初询问 _"What type of testing would you like to do?"_ 的某个问题中选择 _"Desktop Testing - of Electron Applications"_。

#### 将 WDIO 连接到你的 Electron 应用 {#connect-wdio-to-your-electron-app}

运行配置向导后，你的 `wdio.conf.js` 应大致包含以下内容：

```js title='wdio.conf.js' @ts-nocheck
export const config = {
  // ...
  services: ['electron'],
  capabilities: [{
    browserName: 'electron',
    'wdio:electronServiceOptions': {
      // WebdriverIO can automatically find your bundled application
      // if you use Electron Forge or electron-builder, otherwise you
      // can define it here, e.g.:
      // appBinaryPath: './path/to/bundled/application.exe',
      appArgs: ['foo', 'bar=baz']
    }
  }]
  // ...
}

此外，WebdriverIO 允许你访问 Electron API，以获取有关应用的静态信息：

```js @ts-nocheck
import { browser } from '@wdio/globals'

describe('trigger message modal', async () => {
  it('message modal can be triggered from a test', async () => {
    await browser.electron.execute(
      (electron, param1, param2, param3) => {
        const appWindow = electron.BrowserWindow.getFocusedWindow()
        electron.dialog.showMessageBox(appWindow, {
          message: 'Hello World!',
          detail: `${param1} + ${param2} + ${param3} = ${param1 + param2 + param3}`
        })
      },
      1,
      2,
      3
    )
  })
})

$ npx wdio run wdio.conf.js

请记住端口号 `9515`，稍后将用到它。

#### 将 Selenium 连接到 ChromeDriver {#connect-selenium-to-chromedriver}

接下来，将 Selenium 安装到你的项目中：

```sh npm2yarn
npm install --save-dev selenium-webdriver

## 使用 Playwright {#using-playwright}

[Microsoft Playwright](https://playwright.dev) 是一个端到端测试框架，基于浏览器特定的远程调试协议构建，类似于 [Puppeteer][] 的无头 Node.js API，但更专注于端到端测试。Playwright 通过 Electron 对 [Chrome DevTools Protocol][] (CDP) 的支持，提供了实验性的 Electron 支持。



### 安装依赖 {#install-dependencies}

你可以通过首选的 Node.js 包管理器安装 Playwright。它自带一个[测试运行器][playwright-intro]，专为端到端测试而构建：

```sh npm2yarn
npm install --save-dev @playwright/test

之后，你将能够访问 Playwright `ElectronApp` 类的一个实例。这是一个功能强大的类，可以访问主进程模块，例如：

```js {5-10} @ts-nocheck
import { test, _electron as electron } from '@playwright/test'

test('get isPackaged', async () => {
  const electronApp = await electron.launch({ args: ['.'] })
  const isPackaged = await electronApp.evaluate(async ({ app }) => {
    // This runs in Electron's main process, parameter here is always
    // the result of the require('electron') in the main app script.
    return app.isPackaged
  })
  console.log(isPackaged) // false (because we're in development mode)
  // close app
  await electronApp.close()
})

使用 Playwright 测试运行器将以上内容组合起来，让我们创建一个 `example.spec.js` 测试文件，其中包含一个测试和断言：

```js title='example.spec.js' @ts-nocheck
import { test, expect, _electron as electron } from '@playwright/test'

test('example test', async () => {
  const electronApp = await electron.launch({ args: ['.'] })
  const isPackaged = await electronApp.evaluate(async ({ app }) => {
    // This runs in Electron's main process, parameter here is always
    // the result of the require('electron') in the main app script.
    return app.isPackaged
  })

  expect(isPackaged).toBe(false)

  // Wait for the first BrowserWindow to open
  // and return its Page object
  const window = await electronApp.firstWindow()
  await window.screenshot({ path: 'intro.png' })

  // close app
  await electronApp.close()
})

☁  $ npx playwright test

Running 1 test using 1 worker

  ✓  example.spec.js:4:1 › example test (1s)

在 Electron 应用内部，你可以使用 Node.js 的 [`process`](https://nodejs.org/api/process.html) API 监听消息并发送回复：

```js title='main.js'
// listen for messages from the test suite
process.on('message', (msg) => {
  // ...
})

// send a message to the test suite
process.send({ my: 'message' })

// start child process
env.APP_TEST_DRIVER = 1 // let the app know it should listen for messages
this.process = childProcess.spawn(path, args, { stdio: ['inherit', 'inherit', 'inherit', 'ipc'], env })

// handle rpc responses
this.process.on('message', (message) => {
  // pop the handler
  const rpcCall = this.rpcCalls[message.msgId]
  if (!rpcCall) return
  this.rpcCalls[message.msgId] = null
  // reject/resolve
  if (message.reject) rpcCall.reject(message.reject)
  else rpcCall.resolve(message.resolve)
})

// wait for ready
this.isReady = this.rpc('isReady').catch((err) => {
  console.error('Application failed to start', err)
  this.stop()
  process.exit(1)
})

在应用代码中，你可以编写一个简单的处理器来接收 RPC 调用：

```js title='main.js'
const METHODS = {
  isReady () {
    // do any setup needed
    return true
  }
  // define your RPC-able methods here
}

const onMessage = async ({ msgId, cmd, args }) => {
  let method = METHODS[cmd]
  if (!method) method = () => new Error('Invalid method: ' + cmd)
  try {
    const resolve = await method(...args)
    process.send({ msgId, resolve })
  } catch (err) {
    const reject = {
      message: err.message,
      stack: err.stack,
      name: err.name
    }
    process.send({ msgId, reject })
  }
}

if (process.env.APP_TEST_DRIVER) {
  process.on('message', onMessage)
}