使用 aurelia cli 运行 e2e 测试

Question

我正在尝试在我的 aurelia-cli 应用中实施一些 e2e 测试。我试过寻找文档或博客，但没有找到关于 cli 的 e2e 设置的任何内容。我对项目做了以下调整。

首先我将此添加到aurelia.json

"e2eTestRunner": {
    "id": "protractor",
    "displayName": "Protractor",
    "source": "test/e2e/src/**/*.ts",
    "dist": "test/e2e/dist/",
    "typingsSource": [
      "typings/**/*.d.ts",
      "custom_typings/**/*.d.ts"
    ]
},

还在aurelia_project/tasks上添加了e2e任务：

e2e.ts

import * as project from '../aurelia.json';
import * as gulp from 'gulp';
import * as del from 'del';
import * as typescript from 'gulp-typescript';
import * as tsConfig from '../../tsconfig.json';
import {CLIOptions} from 'aurelia-cli';

import { webdriver_update, protractor } from 'gulp-protractor';

function clean() {

  return del(project.e2eTestRunner.dist + '*');

}

function build() {

  var typescriptCompiler = typescriptCompiler || null;

  if ( !typescriptCompiler ) {

    delete tsConfig.compilerOptions.lib;

    typescriptCompiler = typescript.createProject(Object.assign({}, tsConfig.compilerOptions, {
      // Add any special overrides for the compiler here
      module: 'commonjs'
    }));

  }

  return gulp.src(project.e2eTestRunner.typingsSource.concat(project.e2eTestRunner.source))
    .pipe(typescript(typescriptCompiler))
    .pipe(gulp.dest(project.e2eTestRunner.dist));

}

// runs build-e2e task
// then runs end to end tasks
// using Protractor: http://angular.github.io/protractor/
function e2e() {

  return gulp.src(project.e2eTestRunner.dist + '**/*.js')
    .pipe(protractor({
      configFile: 'protractor.conf.js',
      args: ['--baseUrl', 'http://127.0.0.1:9000']
    }))
    .on('end', function() { process.exit(); })
    .on('error', function(e) { throw e; });

}

export default gulp.series(
  webdriver_update,
  clean,
  build,
  e2e
);

和 e2e.json

{
  "name": "e2e",
  "description": "Runs all e2e tests and reports the results.",
  "flags": []
}

我已将protractor.conf 文件和aurelia.protractor 添加到我的项目的根目录

量角器.conf.js

exports.config = {
  directConnect: true,

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },

  //seleniumAddress: 'http://0.0.0.0:4444',
  specs: ['test/e2e/dist/*.js'],

  plugins: [{
    path: 'aurelia.protractor.js'
  }],

  // Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  }
};

aurelia.protractor.js

/* Aurelia Protractor Plugin */
function addValueBindLocator() {
  by.addLocator('valueBind', function (bindingModel, opt_parentElement) {
    var using = opt_parentElement || document;
    var matches = using.querySelectorAll('*[value\\.bind="' + bindingModel +'"]');
    var result;

    if (matches.length === 0) {
      result = null;
    } else if (matches.length === 1) {
      result = matches[0];
    } else {
      result = matches;
    }

    return result;
  });
}

function loadAndWaitForAureliaPage(pageUrl) {
  browser.get(pageUrl);
  return browser.executeAsyncScript(
    'var cb = arguments[arguments.length - 1];' +
    'document.addEventListener("aurelia-composed", function (e) {' +
    '  cb("Aurelia App composed")' +
    '}, false);'
  ).then(function(result){
    console.log(result);
    return result;
  });
}

function waitForRouterComplete() {
  return browser.executeAsyncScript(
    'var cb = arguments[arguments.length - 1];' +
    'document.querySelector("[aurelia-app]")' +
    '.aurelia.subscribeOnce("router:navigation:complete", function() {' +
    '  cb(true)' +
    '});'
  ).then(function(result){
    return result;
  });
}

/* Plugin hooks */
exports.setup = function(config) {
  // Ignore the default Angular synchronization helpers
  browser.ignoreSynchronization = true;

  // add the aurelia specific valueBind locator
  addValueBindLocator();

  // attach a new way to browser.get a page and wait for Aurelia to complete loading
  browser.loadAndWaitForAureliaPage = loadAndWaitForAureliaPage;

  // wait for router navigations to complete
  browser.waitForRouterComplete = waitForRouterComplete;
};

exports.teardown = function(config) {};
exports.postResults = function(config) {};

我在我的test/e2e/src 文件夹中添加了一个示例测试，它没有被执行。我还尝试在单元测试文件夹中实现 e2e 测试，因为当我运行 au test 时，我看到打开了一个 chrome 浏览器。

describe('aurelia homepage', function() {  
  it('should load page', function() {
    browser.get('http://www.aurelia.io');
    expect(browser.getTitle()).toEqual('Home | Aurelia');
  });
}); 

但这会引发错误browser is undefined。我是否缺少使用 cli 进行 e2e 测试的内容？我知道 aurelia-protractor 是预装的，但我没有看到任何运行它的方法。

Answer 1

我知道这是一个很晚的答案，但也许对于其他正在寻找答案的人，您可以尝试从 aurelia-protractor 插件导入

import {browser} from 'aurelia-protractor-plugin/protractor';