Electron自动化测试技术选型调研

> navigator.appVersion
< '104.0.5112.124 qunheclient/1.0.0 kujialesoft/12.3.9 kujialeclient/12.3.9 utm_industry=kujiale/12.3.9 utm_campaign=autoUpdate'

> process.versions.electron
< '20.3.8'

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/

yarn create wdio .

 zhongxin@zhongxindeMacBook-Pro demo2 % yarn create wdio .
yarn create v1.22.19
[1/4]   Resolving packages...
[2/4]   Fetching packages...
[3/4]   Linking dependencies...
[4/4]   Building fresh packages...success Installed "create-wdio@8.2.5" with binaries:
- create-wdio
[#####################################################] 53/53
-:...........................-:.
+                              +
`` +      `...`        `...`      + `
./+/ +    .:://:::`    `::///::`  ` + ++/.
.+oo+ +    /:+ooo+-/    /-+ooo+-/ ./ + +oo+.
-ooo+ +    /-+ooo+-/    /-+ooo+-/ .: + +ooo.
-+o+ +    `::///:-`    `::///::`    + +o+-
``. /.     `````        `````     .: .``
.----------------------------.
`-::::::::::::::::::::::::::::::::::::::::-`
.+oooo/:------------------------------:/oooo+.
`.--/oooo-                                  :oooo/--.`     .::-``:oooo`                                  .oooo-``-::.
./-`    -oooo`--.: :.--                         .oooo-    `-/.
-/`    `-/oooo////////////////////////////////////oooo/.`    `/-
`+`   `/+oooooooooooooooooooooooooooooooooooooooooooooooo+:`   .+`
-/    +o/.:oooooooooooooooooooooooooooooooooooooooooooo:-/o/    +.
-/   .o+  -oooosoooososssssooooo------------------:oooo- `oo`   +.
-/   .o+  -oooodooohyyssosshoooo`                 .oooo-  oo.   +.
-/   .o+  -oooodooysdooooooyyooo` `.--.``     .:::-oooo-  oo.   +.
-/   .o+  -oooodoyyodsoooooyyooo.//-..-:/:.`.//.`./oooo-  oo.   +.
-/   .o+  -oooohsyoooyysssysoooo+-`     `-:::.    .oooo-  oo.   +.
-/   .o+  -ooooosooooooosooooooo+//////////////////oooo-  oo.   +.
-/   .o+  -oooooooooooooooooooooooooooooooooooooooooooo-  oo.   +.
-/   .o+  -oooooooooooooooooooooooooooooooooooooooooooo-  oo.   +.
-+////o+` -oooo---:///:----://::------------------:oooo- `oo////+-
+ooooooo/`-oooo``:-```.:`.:.`.+/-    .::::::::::` .oooo-`+ooooooo+ oooooooo+`-oooo`-- `/` .:+  -/-`/`   .::::::::::  .oooo-.+oooooooo
+-/+://-/ -oooo-`:`.o-`:.:-````.:    .///:``````  -oooo-`/-//:+:-+
: :..--:-:.+ooo+/://o+/-.-:////:-....-::::-....--/+ooo+.:.:--.-- /
- /./`-:-` .:///+/ooooo/+///////////////+++ooooo/+///:. .-:.`+./ :
:-:/.           :`ooooo`/`              .:.ooooo :           ./---
:`ooooo`/`              .:.ooooo :
:`ooooo./`              .:-ooooo :
:`ooooo./`              .:-ooooo :
`...:-+++++:/.              ./:+++++-:...`
:-.````````/../              /.-:````````.:-
-/::::::::://:/+             `+/:+::::::::::+.
:oooooooooooo++/              +++oooooooooooo-                            Webdriver.IO
Next-gen browser and mobile automation
test framework for Node.jsInstalling @wdio/cli to initialize project...
✔ Success!===============================  WDIO Configuration Wizard
===============================? What type of testing would you like to do? Desktop Testing - of Electron Applications
> https://webdriver.io/docs/desktop-testing/electron
? What is the path to your compiled Electron app? ./dist
? Which framework do you want to use? Jasmine (https://jasmine.github.io/)
? Do you want to use a compiler? No!
? Do you want WebdriverIO to autogenerate some test files? Yes
? Where should these files be located? /Users/zhongxin/gitproject/desktopui/demo2/test/specs/**/*.js
? Which reporter do you want to use? spec, allure
? Do you want to add a plugin to your test setup?
? Do you want to add a service to your test setup? electron
? Do you want me to run `npm install` YesInstalling wdio packages:
- @wdio/local-runner@latest
- @wdio/jasmine-framework@latest
- @wdio/spec-reporter@latest
- @wdio/allure-reporter@latest
- wdio-electron-serviceadded 78 packages, and changed 1 package in 11s97 packages are looking for funding
run `npm fund` for details
✔ Success! Creating a WebdriverIO config file...
✔ Success! Autogenerating test files...
✔ Success! Adding "wdio" script to package.json.
✔ Success! Successfully setup project at /Users/zhongxin/gitproject/desktopui/demo2Join our Discord Community Server and instantly find answers to your issues or queries. Or just join and say hi !    https://discord.webdriver.ioVisit the project on GitHub to report bugs  or raise feature requests :    https://github.com/webdriverio/webdriverioTo run your tests, execute:
$ cd /Users/zhongxin/gitproject/desktopui/demo2
$ npm run wdioDone in 72.80s.

npm i -D chromedriver@104

capabilities: [{
browserName: 'chrome',        'goog:chromeOptions': {
binary: 'chromedriver/bin/chromedriver', // Electron 二进制文件的路径
args: [/* 命令行参数 */] // 可选, 比如 'app=' + /path/to/your/app/
}
}],services: [[        'electron',
{
appPath: '/Users/zhongxin/Downloads',
appName: "酷家乐",
appArgs: ['foo', 'bar=baz'],
chromedriver: {
port: 9519,
logFileName: 'wdio-chromedriver.log',
chromedriverCustomPath: 'chromedriver/bin/chromedriver' // resolves to chromedriver binary
},
electronVersion: '20.3.8',
}
]],

import { browser } from '@wdio/globals'describe('Electron Testing', () => {
it('should print application metadata', async () => {        console.log('听白测试')
await browser.$('//*[text()="账号登录"]').click()
await browser.$('//input[@placeholder="输入手机号/邮箱"]').setValue("xxxx@xxxx.com")
await browser.$('//input[@placeholder="输入密码"]').setValue("xxxx")
await browser.$('//button[text()="登录"]').click()
await browser.pause(5000)
await browser.saveScreenshot('./test.png')
})
})

npm init

zhongxin@zhongxindeMacBook-Pro demo2 % npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See `npm help init` for definitive documentation on these fields
and exactly what they do.Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.Press ^C at any time to quit.
package name: (demo2)version: (1.0.0)description:entry point: (index.js)test command:git repository:keywords:author:license: (ISC)About to write to /Users/zhongxin/gitproject/desktopui/demo2/package.json:{
"name": "demo2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}Is this OK? (yes)

npm install --save-dev electron-chromedriver@20.0.0./node_modules/.bin/chromedriver

npm install --save-dev selenium-webdriver

const webdriver = require('selenium-webdriver')const { Builder } = require('selenium-webdriver');(async function myTest() {    let driver = await new Builder()
.usingServer('http://localhost:9515')
.withCapabilities({            'goog:chromeOptions': {
binary: '/Users/zhongxin/Downloads/mac-arm64/酷家乐.app/Contents/MacOS/酷家乐'
}
})
.forBrowser('chrome') // 注意: 使用 .forBrowser('electron') for selenium-webdriver <= 3.6.0
.build()    console.log('听白测试')
await driver.sleep(5000)
await driver.findElement(webdriver.By.xpath('//*[text()="账号登录"]')).click()
await driver.findElement(webdriver.By.xpath('//input[@placeholder="输入手机号/邮箱"]')).sendKeys("xxxx@xxxx.com")
await driver.findElement(webdriver.By.xpath('//input[@placeholder="输入密码"]')).sendKeys("xxxx")
await driver.findElement(webdriver.By.xpath('//button[text()="登录"]')).click()
await driver.sleep(5000)
await driver.takeScreenshot().then(        function (image, err) {            require('fs').writeFile('test.png', image, 'base64', function (err) {                console.log(err)
})
})
await driver.quit()
})();

npm init playwright@latest

zhongxin@zhongxindeMacBook-Pro demo3 % npm init playwright@latest
Need to install the following packages:
create-playwright@1.17.128Ok to proceed? (y)
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · JavaScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
Initializing NPM project (npm init -y)…
Wrote to /Users/zhongxin/gitproject/desktopui/demo3/package.json:{
"name": "demo3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}Installing Playwright Test (npm install --save-dev @playwright/test)…added 3 packages in 5s
Downloading browsers (npx playwright install)…
Writing playwright.config.js.
Writing tests/example.spec.js.
Writing tests-examples/demo-todo-app.spec.js.
Writing package.json.
✔ Success! Created a Playwright Test project at /Users/zhongxin/gitproject/desktopui/demo3Inside that directory, you can run several commands:npx playwright test
Runs the end-to-end tests.npx playwright test --ui
Starts the interactive UI mode.npx playwright test --project=chromium
Runs the tests only on Desktop Chrome.npx playwright test example
Runs the tests in a specific file.npx playwright test --debug
Runs the tests in debug mode.npx playwright codegen
Auto generate tests with Codegen.We suggest that you begin by typing:npx playwright testAnd check out the following files:
- ./tests/example.spec.js - Example end-to-end test
- ./tests-examples/demo-todo-app.spec.js - Demo Todo App end-to-end tests
- ./playwright.config.js - Playwright Test configurationVisit https://playwright.dev/docs/intro for more information. ✨Happy hacking!

npm i electron@20.3.8

const {_electron: electron} = require('@playwright/test');(async () => {    const electronApp = await electron.launch({
cwd: '/Users/zhongxin/gitproject/main/app/dist',
args: ['main.js']
});    console.log('开始测试')    const window = await electronApp.firstWindow();
await window.waitForTimeout(3000)    window.on('console', console.log);    console.log(await window.title());
await window.screenshot({path: 'intro.png'});
await window.click('text=账号登录');
await window.fill('input[placeholder="输入手机号/邮箱"]', 'xxxx@xxxx.com')
await window.fill('input[placeholder="输入密码"]', 'xxxx')
await window.click('button[title="账密登录"]');
await window.waitForTimeout(3000)
await window.locator('text=登录').last().click();
await window.waitForTimeout(3000)
await window.screenshot({path: 'test.png'});
await electronApp.close();
})();

npm init

npm i electron@20.3.8 puppeteer-core

const {spawn} = require("child_process");const port = 9200;spawn(    "/Users/zhongxin/Downloads/mac-arm64/酷家乐.app/Contents/MacOS/酷家乐",
[`--remote-debugging-port=${port}`],
{shell: true}
);

const puppeteer = require("puppeteer-core");const port = 9200;(async () => {    let app = await puppeteer.connect({
browserURL: `http://localhost:${port}`,
});    const pages = await app.pages();    const [page] = pages;
await (await page.$x('//button[text()="账号登录"]'))[0].click();
await (await page.$x('//input[@placeholder="输入手机号/邮箱"]'))[0].type('xxxx@xxxx.com')
await (await page.$x('//input[@placeholder="输入密码"]'))[0].type('xxxx');
await (await page.$x('//button[text()="登录"]'))[0].click();
await page.screenshot({path: 'test.png'});
setTimeout(async () => await app.close(), 5000)
})()