angularjs - 我无法让 phantomjs 单击登录按钮

Question

我可以让 chrome 单击登录按钮。我正在使用 Protractor 并将其自动化，以便我们可以使用 phantomjs 进行 e2e 测试。

html 是:

<div class="form-input">
    <input type="submit" id="login-button" class="btn" value="Sign in">

我已经尝试过:

element(by.css('[class="form-input"]')).click();
element(by.css('[type="submit"]')).click();
element.all(by.id('login-button')).first().click();
element(by.id('login-button')).click();
element(by.css('[class="btn"]')).click();
element(by.css('[value="Sign in"]')).click();
element.all(by.className('form-input')).last().click();

这是我的 ads-e2econf.js

var fs = require('fs');

//retrieving current date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

//retrieving current time
var time = new Date();
var hour = time.getHours() + ":";
var minutes = time.getMinutes() + ":";

if(dd<10) {
    dd='0'+dd
} 
if(mm<10) {
    mm='0'+mm
} 

today = mm+'/'+dd+'/'+yyyy;
time = hour + minutes;

var results = '\nThe following Protractor tests have failed on '+ today + ' @' + time + '\n\n';

exports.config = {
  capabilities: {
    browserName: 'chrome',
    version: '',
    platform: 'ANY'
  },

  seleniumServerJar: 'node_modules/protractor/selenium/selenium-server-standalone-2.45.0.jar',

  specs: [
           'test/specs/manage/*.js',
           'test/specs/manage/clone/*.js',
           'test/specs/regression/*.js',
           'test/specs/create/create-basicAd.js',
           'test/specs/create/create-pagepost.js',
           'test/specs/create/create-targeting.js'
          ],

  onPrepare: function () {
    require('jasmine-reporters');
    jasmine.getEnv().addReporter(new jasmine.ConsoleReporter(console.log));
    jasmine.getEnv().addReporter(new function() {
      this.reportSpecResults = function(spec) {
        if (!spec.results().passed()) {
          results +=  spec.suite.description +  ' ' + spec.description;
          if(spec.suite.description.substring(0, 4) == 'ADS-') {
            results += 'censored' + spec.suite.description;
            results += 'censored';
          }
          results += '\n';
        }
      };
    });
  },

  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 1000000,
    isVerbose: true
  },

  allScriptsTimeout: 1000000,

  onCleanUp: function() {
    fs.writeFileSync('/tmp/results.txt', results);
  }
}

这是我的 karma 配置文件。 //Karma 配置

module.exports = function(config) {
  'use strict';

  config.set({
    // base path, that will be used to resolve files and exclude
    basePath: '',

    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
        'app/bower_components/jquery/dist/jquery.js',
        'app/bower_components/lodash/dist/lodash.js',
        'app/bower_components/angular/angular.js',
        'app/bower_components/angular-mocks/angular-mocks.js',
        'app/bower_components/angular-resource/angular-resource.js',
        'app/bower_components/angular-cookies/angular-cookies.js',
        'app/bower_components/angular-sanitize/angular-sanitize.js',
        'app/bower_components/angular-route/angular-route.js',
        'app/bower_components/angular-lodash/angular-lodash.js',
        'app/bower_components/angular-bootstrap/ui-bootstrap.js',
        'app/bower_components/ui-utils/ui-utils.js',
        'app/bower_components/angulartics/src/angulartics.js',
        'app/bower_components/angulartics/src/angulartics-ga.js',
        'app/bower_components/ng-csv/src/ng-csv/ng-csv.js',
        'app/bower_components/angulartics/src/angulartics-ga.js',
        'app/bower_components/moment/moment.js',
        'app/bower_components/ng-bs-daterangepicker/src/ng-bs-daterangepicker.js',
        'app/bower_components/select2/select2.js',
        'app/bower_components/angular-ui-select/dist/select.js',
        'app/bower_components/angular-ui-select2/src/select2.js',
        'app/bower_components/bn-tokens-angular/dist/bn-tokens-angular.js',
        'app/bower_components/bn-catm-angular/dist/bn-catm-angular.js',
        'app/bower_components/bn-topnav/dist/js/bn-topnav.js',
        'app/bower_components/angular-ui-router/release/angular-ui-router.js',
        'app/bower_components/bn-expression-builder/dist/bn-expression-builder.js',
        'app/bower_components/bn-appbar/dist/js/bn-appbar.js',
        'app/bower_components/zeroclipboard/dist/ZeroClipboard.js',
        'app/bower_components/ng-clip/dest/ng-clip.min.js',
        'app/bower_components/bn.dayparting/dist/bn.dayparting.js',
        'app/lib/ng-grid/build/ng-grid.js',
        'app/lib/ns-popover/nsPopover.js',
        'app/lib/ps-input-time.js',
        'app/lib/angular-ui-scrollfix/scrollfix.js',
        'app/scripts/services/facebookAPI/providers/fbcommon.js', // FML
        'app/scripts/services/facebookAPI/providers/facebook.js', // FMLx2
        'app/scripts/*.js',
//        'app/mock/api/api.mock.js',
//        'app/mock/api/*.mock.js',
        'app/scripts/**/*.js',
        'app/templates/**/*.html',
        'test/unit/**/*.js'
    ],

    // generate js files from html templates to expose them during testing.
    preprocessors: {
      'app/templates/**/*.html': 'html2js'
    },

// list of files / patterns to exclude
exclude: [],

// web server port
port: 9010,

// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,


// enable / disable watching file and executing tests whenever any file changes
//autoWatch: true,


// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
//browsers: ['Chrome'],

// Timeout for capturing a browser (in ms).
captureTimeout: 60 * 1e3,

// to avoid DISCONNECTED messages
browserDisconnectTimeout : 10000, // default 2000
browserDisconnectTolerance : 1, // default 0
browserNoActivityTimeout : 60 * 1e3, //default 10000


// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false

}); };

这是我的 package.json:

{
  "name": "client",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-angular-templates": "^0.5.4",
    "grunt-autoprefixer": "~0.4.0",
    "grunt-concurrent": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-coffee": "~0.7.0",
    "grunt-contrib-compass": "~0.6.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-connect": "~0.5.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-cssmin": "~0.7.0",
    "grunt-contrib-htmlmin": "~0.1.3",
    "grunt-contrib-imagemin": "~0.3.0",
    "grunt-contrib-jshint": "~0.7.1",
    "grunt-contrib-uglify": "~0.2.0",
    "grunt-contrib-watch": "~0.5.2",
    "grunt-google-cdn": "~0.2.0",
    "grunt-jscs": "^0.8.1",
    "grunt-karma": "~0.6.2",
    "grunt-newer": "~0.5.4",
    "grunt-ng-constant": "^1.1.0",
    "grunt-ngmin": "~0.0.2",
    "grunt-protractor-runner": "~0.2.3",
    "grunt-rev": "~0.1.0",
    "grunt-svgmin": "~0.2.0",
    "grunt-usemin": "~2.0.0",
    "grunt-wiredep": "~2.0.0",
    "jasmine-reporters": "~0.4.1",
    "jshint-stylish": "~0.1.3",
    "karma": "~0.10.9",
    "karma-chrome-launcher": "~0.1.2",
    "karma-coffee-preprocessor": "~0.1.2",
    "karma-firefox-launcher": "~0.1.3",
    "karma-html2js-preprocessor": "~0.1.0",
    "karma-jasmine": "~0.1.5",
    "karma-ng-html2js-preprocessor": "~0.1.0",
    "karma-ng-scenario": "~0.1.0",
    "karma-phantomjs-launcher": "~0.1.1",
    "karma-requirejs": "~0.2.1",
    "karma-script-launcher": "~0.1.0",
    "load-grunt-tasks": "~0.2.0",
    "phantomjs": "~1.9.7-1",
    "protractor": "~2.0.0",
    "requirejs": "~2.1.10",
    "time-grunt": "~0.2.1"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "start": "grunt serve",
    "test": "grunt test"
  }
}

Answer 1

PhantomJS 是使用 protractor 进行 e2e 测试的最差选择。

甚至protractor核心开发人员recommend against it :

We recommend against using PhantomJS for tests with Protractor. There are many reported issues with PhantomJS crashing and behaving differently from real browsers.

如果您仍然想使用 PhantomJS 解决此问题，请尝试以下操作:

• 通过 executeScript() 触发点击:

  browser.executeScript("arguments[0].click();", button.getWebElement());
  

• 等待元素变得可点击再进行点击:

  var EC = protractor.ExpectedConditions;
  browser.wait(EC.elementToBeClickable(button), 5000);
  

• 启动时最大化浏览器窗口:

  browser.manage().window().maximize();
  

其中 button 是您找到的元素，例如:

var button = element(by.id("login-button"));