使用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

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';