页面UI测试

使用 torchjs(推荐)

Test framework to light up the world.

页面UI测试 - 图1

安装

  1. $ npm i torchjs --save-dev

配置

  1. $ torch --help
  3.   Usage: torch [options]
  5.   Options:
  7.     -h, --help                              output usage information
  8.     -V, --version                           output the version number
  9.     -C, --no-colors                         force disabling of colors
  10.     -O, --reporter-options <k=v,k2=v2,...>  reporter-specific options
  11.     -R, --reporter <name>                   specify the reporter to use
  12.     -S, --sort                              sort test files
  13.     -b, --bail                              bail after first test failure
  14.     -g, --grep <pattern>                    only run tests matching <pattern>
  15.     -f, --fgrep <string>                    only run tests containing <string>
  16.     -i, --invert                            inverts --grep and --fgrep matches
  17.     -r, --require <name>                    require the given module
  18.     -s, --slow <ms>                         "slow" test threshold in milliseconds [75]
  19.     -t, --timeout <ms>                      set test-case timeout in milliseconds [2000]
  20.     -u, --ui <name>                         specify user-interface (bdd|tdd|exports)
  21.     --check-leaks                           check for global variable leaks
  22.     --compile                               compile with babel
  23.     --compile-opts <path>                   path of compile options
  24.     --compilers <ext>:<module>,...          use the given module(s) to compile files
  25.     --coverage                              report coverage
  26.     --debug                                 enable Electron debugger on port [5858]; for --renderer tests show window and dev-tools
  27.     --debug-brk                             like --debug but pauses the script on the first line
  28.     --globals <names>                       allow the given comma-delimited global [names]
  29.     --inline-diffs                          display actual/expected differences inline within each string
  30.     --interactive                           run tests in renderer process in a visible window that can be reloaded to re-run tests
  31.     --interfaces                            display available interfaces
  32.     --no-timeouts                           disables timeouts
  33.     --notify-on-fail                        notify on failures
  34.     --notify-on-success                     notify on success
  35.     --opts <path>                           specify opts path
  36.     --preload <name>                        preload the given script in renderer process
  37.     --recursive                             include sub directories
  38.     --renderer                              run tests in renderer process
  39.     --require-main <name>                   load the given script in main process before executing tests
  40.     --source-pattern <sources>              glob pattern of source files
  41.     --watch                                 watching source file changes
  42.     --watch-aggregate-timeout               delay time for re-run test cases after files changed

更多配置

页面UI测试 - 图2

页面UI测试 - 图3

使用 UITest

安装

  1. $ npm i uitest --save-dev

用法

页面UI测试 - 图4

直接引入 uitest-mocha-shim.js 文件即可在浏览器中运行。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>macaca mocha test</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
  8.   </head>
  9.   <body>
  10.     <div id="mocha"></div>
  11.     <script src="./node_modules/mocha/mocha.js"></script>
  12.     <script src='./node_modules/uitest/uitest-mocha-shim.js'></script>
  13.     <script src="./node_modules/should/should.js"></script>
  14.     <script>
  15.     _macaca_uitest.setup({
  16.       ui: 'bdd',
  17.       timeout: 5000,
  18.       slow: 2000
  19.     });
  20.     </script>
  21.     <script>
  22.     describe('sample', function() {
  24.       beforeEach('init', function() {
  25.       });
  27.       it('#case_1', function() {
  28.       });
  30.     });
  31.     </script>
  32.     <script>
  33.     _macaca_uitest.run();
  34.     </script>
  35.   </body>
  36. </html>

Node.js

页面UI测试 - 图5

在命令行里运行

  1. const uitest = require('uitest');
  3. uitest({
  4.   url: 'file:///Users/name/path/index.html',
  5.   width: 600,
  6.   height: 480,
  7.   hidpi: false,
  8.   useContentSize: true,
  9.   show: false,
  10. }).then(() => {
  11.   console.log('uitest success')
  12. }).catch(() => {
  13.   console.log('uitest error')
  14. });

Gulp

也可以通过 Gulp 引入：

  1. $ npm i gulp-uitest --save-dev
  1. const uitest = require('gulp-uitest');
  2. //test
  3. gulp.task('test', function() {
  4.   return gulp
  5.     .src('test/html/index.html')
  6.     .pipe(uitest({
  7.       width: 600,
  8.       height: 480,
  9.       hidpi: false,
  10.       useContentSize: true,
  11.       show: false,
  12.     }));
  13. });

原文: https://macacajs.github.io/zh/pageuitest