• 页面UI测试
    • 使用 torchjs(推荐)
      • 安装
      • 配置
    • 使用 UITest
      • 安装
      • 用法
      • Node.js
      • Gulp

    页面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. });
    • 更多关于 UITest
    • 示例：uitest-sample
    • 游戏框架Hilo测试示例： Hilo Game
    • 游戏框架pillow测试示例： Hilo Game
    • canvas框架monitor.js测试示例： Hilo Game

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