使用单个 Gulp 任务运行 Protractor

Question

有没有办法在单个任务中使用 Protractor 和 Gulp 运行 e2e 测试？

现在，为了运行 e2e 测试，我必须打开 3 个单独的 shell 并运行以下命令：

webdriver-manager update

webdriver-manager start

npm start (which runs the app server)

protractor protractor.conf.js (in a separate window)

必须有一种更简单的方法来运行这些测试。有什么想法吗？

Answer 1

这是一个可行的解决方案

var protractor = require("gulp-protractor").protractor;
var spawn = require('child_process').spawn; 

//run webdriver method
function runWebdriver(callback) {
    spawn('webdriver-manager', ['start'], {
        stdio: 'inherit'
    }).once('close', callback);
}

//run protractor.config method
function runProtractorConfig() {
    gulp.src('./**/*-page.spec.js')
        .pipe(protractor({
            configFile: 'protractor.config.js'
        }))
        .on('error', function (e) {
            throw e;
        });
}
//execute protractor.config after webdriver is executed
function runWebdriverProtractor(){
    runWebdriver(runProtractorConfig);
}
//put them into gulp task
gulp.task('run-protractor', runWebdriverProtractor);

Answer 2

是的，这是可能的。

1. 第一种方式：（仅适用于使用简单命令“protractor [config file]”从控制台运行它

只需使用 NPM 运行一次命令：

npm install protractor@2.5.1
npm install selenium-standalone-jar@2.45.0

这将安装所需的软件包。

接下来修改protractor.conf.js，用selenium Standalone代替selenium地址：

//seleniumAddress: 'http://localhost:4444/wd/hub',
seleniumServerJar: './node_modules/selenium-standalone-jar/bin/selenium-server-standalone-2.45.0.jar',

现在，当你运行 protractor [配置文件] 时，例如：protractor protractor.conf.js，他将为自己启动 selenium 并进行测试。

1. 第二种方式：

您可以在构建过程中实现它，在使用 GULP 构建期间，他会为您启动量角器，而量角器将自己启动 selenium-driver。

我看到你运行这些命令真的很累，你为什么还要这样做，只是使用 Gulp 为你做。

我将在工作示例中向您解释这一点。

你只需要：

添加到您的 (NPM) package.json 文件中：（选择适合您的版本，这对我有用。

"gulp-protractor": "^2.1.0",
"protractor": "2.5.1",
"selenium-standalone-jar": "2.45.0",

然后你需要在 protractor.conf.js 中进行正确的配置： 您需要用直接 JAR 文件替换“seleniumAddress”，以便量角器为您触发并自动附加到它！ 一段文件是：

    framework: 'jasmine',
    //seleniumAddress: 'http://localhost:4444/wd/hub',
    seleniumServerJar: './node_modules/selenium-standalone-jar/bin/selenium-server-standalone-2.45.0.jar',

seleniumServerJar 是文件的参考路径，该文件将与您的 package.json 文件中的 "selenium-standalone-jar": "2.45.0" 一起安装。

最后一步是正确地完成一个 gulp 任务，这是我的：

var angularProtractor = require('gulp-angular-protractor');
    gulp.task('protractor-test', function(callback) {
        gulp
            .src(['./**/*.js'])  -< 
            .pipe(angularProtractor({
                'configFile': 'protractor.conf.js',
                'debug': true,
                'autoStartStopServer': true
            }))
            .on('error', function(e) {
                console.log(e);
            })
            .on('end', callback);

});

享受吧！

Answer 3

您也可以通过在 'args' 中添加 --suite 来运行测试套件。

var angularProtractor = require('gulp-angular-protractor');
gulp.task('test', function (callback) {
     gulp
         .src([__dirname+'/public/apps/adminapp/**/**_test.js'])
         .pipe(angularProtractor({
             'configFile': 'public/apps/adminapp/app.test.config.js',
             'debug': false,
             'args': ['--suite', 'adminapp'],
             'autoStartStopServer': true
         }))
         .on('error', function(e) {
             console.log(e);
         })
        .on('end',callback);
});

Answer 4

一个完整的解决方案，（与 Travis CI 合作）

1. npm配置

基本上，在运行 gulp 脚本之前配置 http-server 以启动。稍后您将不得不通过npm, fe 运行测试。 npm test 或 npm run <action> 如果您选择其他名称。

"devDependencies": {
  "gulp-angular-protractor": "latest",
  "http-server": "^0.9.0",
  ...
},
"scripts": {
  "pretest": "npm install",
  "test": "(npm start > /dev/null &) && (gulp protractor)",

  "start": "http-server -a localhost -p 8000 -c-1 ./",

  "dev": "(npm start > /dev/null &) && (gulp dev)"
},

1. 设置gulp 和gulp-angular-protractor

定义您要运行的操作。

var gulpProtractorAngular = require('gulp-angular-protractor');
...
gulp.task('protractor', function (callback) {
    gulp
        .src('tests/*.js')
        .pipe(gulpProtractorAngular({
            'configFile': 'protractor.conf.js',
            'debug': false,
            'autoStartStopServer': true,
            'verbose': false,
            'webDriverUpdate': {
                'browsers': ['ie', 'chrome']
            }
        }))
        .on('error', function (e) {
            console.log(e);
        })
        .on('end', callback);
});

---

在 GitHub 项目中查看上述内容： https://github.com/atais/angular-eonasdan-datetimepicker