Cucumber + Protractor - 执行步骤时出现超时错误

Question

我正在使用黄瓜和量角器编写行为驱动测试。我的场景和所有步骤都会通过，但最后会显示超时错误。第一步将加载主页，稍后它将不执行步骤定义文件中描述的任何步骤。加载页面后，它应该单击选项卡。我在步骤定义文件中提到了这些步骤。但是这些步骤没有执行，它将显示控制台中传递的所有步骤。我点击此链接以供参考https://semaphoreci.com/community/tutorials/getting-started-with-protractor-and-cucumber

这是错误信息

请在下面找到示例代码。

//sample.feature
Feature: The Dashboard has 2 tabs, Statistics and Results 

Scenario: I  want to have 2 tabs with Displayed text "Statistics" and "Results" on the homepage 

Given I go to Dashboard homepage
And I click on the "#/results" 
Then the Results page is displayed
And I click on the "#/Statistics" tab
Then the Statistics page is displayed

//menu.steps.js
var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');

chai.use(chaiAsPromised);
var expect = chai.expect;

module.exports = function() {
  this.Given(/^I go to Dashboard homepage$/, function() {
  browser.get('http://localhost:8100/#/');
  browser.waitForAngular();
  });

    this.Then(/^I click on the "([^"]*)"$/,function(arg1){
    element(by.css('[href="#/results"]')).click();    
   });

    this.Then(/^the results page is displayed$/, () => {
    browser.get('http://localhost:8100/#/results'); 
});
    this.When(/^I click on the "([^"]*)" tab$/, function(arg1) {
    element(by.css('[href="#/statistics"]')).click();     
    });


    this.Then(/^the statistics page is displayed$/,  () =>{         
    browser.get('http://localhost:8100/#/statistics');  
    });

//cucumber.conf.js
exports.config = {
  framework: 'custom',  // set to "custom" instead of cucumber.
  frameworkPath: require.resolve('protractor-cucumber-framework'), 
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['test/e2e/cucumber/*.feature'],
  capabilities: {
    'browserName': 'firefox',

},
baseUrl: 'http://localhost:8100/#/',


   // cucumber command line options
  cucumberOpts: {
    require: ['test/e2e/cucumber/*.steps.js'],  // require step definition files before executing features
    tags: [],                      // <string[]> (expression) only execute the features or scenarios with tags matching the expression
    strict: true,                  // <boolean> fail if there are any undefined or pending steps
    format: ["pretty"],            // <string[]> (type[:path]) specify the output format, optionally supply PATH to redirect formatter output (repeatable)
    dryRun: false,                 // <boolean> invoke formatters without executing steps
    compiler: []                   // <string[]> ("extension:module") require files with the given EXTENSION after requiring MODULE (repeatable)
  },

 onPrepare: function () {
    browser.manage().window().maximize(); // maximize the browser before executing the feature files
  },

  resultJsonOutputFile: './test/e2e/results.json'
}

Answer 1

如果你使用 CucumberJS，你可以选择使用 callbacks 或 promises。在您的代码中，您没有使用其中之一。下面，您将找到如何使用 Promise 和回调的步骤示例。

请注意，如果您实施这两种解决方案之一，您的测试仍然可能失败，但这更多地与测试实施有关，而不是回调/承诺的解决方案

// With promises
module.exports = function() {
  this.Given(/^I go to Dashboard homepage$/, function() {
    browser.get('http://localhost:8100/#/');
    return browser.waitForAngular();
  });

  this.Then(/^I click on the "([^"]*)"$/, function(arg1) {
    return element(by.css('[href="#/results"]')).click();
  });

  this.Then(/^the results page is displayed$/, () => {
    return browser.get('http://localhost:8100/#/results');
  });
  this.When(/^I click on the "([^"]*)" tab$/, function(arg1) {
    return element(by.css('[href="#/statistics"]')).click();
  });

  this.Then(/^the statistics page is displayed$/, () => {
    return browser.get('http://localhost:8100/#/statistics');
  });
}

// With callbacks
module.exports = function() {
  this.Given(/^I go to Dashboard homepage$/, function(done) {
    browser.get('http://localhost:8100/#/');
    browser.waitForAngular().then(done);
  });

  this.Then(/^I click on the "([^"]*)"$/, function(arg1, done) {
    element(by.css('[href="#/results"]')).click().then(done);
  });

  this.Then(/^the results page is displayed$/, (done) => {
    browser.get('http://localhost:8100/#/results').then(done);
  });
  this.When(/^I click on the "([^"]*)" tab$/, function(arg1, done) {
    element(by.css('[href="#/statistics"]')).click().then(done);
  });

  this.Then(/^the statistics page is displayed$/, (done) => {
    browser.get('http://localhost:8100/#/statistics').then(done);
  });
}