問題描述

我有一個使用 Protractor 和 Cucumber 的示例 BDD 測試.在執行代碼時，控制臺立即顯示結果為通過，代碼實際上才開始執行.

I have a sample BDD test using Protractor with Cucumber. On executing the code, the console immediately shows the result as passed and the code actually begins executing only after that.

我希望執行狀態顯示與實際執行同步.(例如，控制臺顯示 - '鑒于我啟動量角器演示頁面'并執行下面的代碼，然后控制臺顯示下一步和等等)我知道它與異步編碼和回調有關，但無法找出確切的問題.

I wish execution status display to be in sync with actual execution.(e.g Console displays - 'Given I launch the protractor demo page' and the code underneath is executed, then console displays next step and so on) I know it has got something to do with Async coding and callbacks, not able to figure out the exact problem though.

功能文件:

Feature: Test
Scenario:  Test Scenario
    Given I launch the protractor demo page
    When I enter two in the first field
    And I enter three in the second field
    And I click Go button
    Then Result should be displayed as Five

步驟文件:

 var chai = require('chai');
    var chaiAsPromised = require('chai-as-promised');
    chai.use(chaiAsPromised);
    var expect = chai.expect;

    module.exports = function () {


        this.Given(/^I launch the protractor demo page$/, function (callback) {
            browser.driver.manage().window().maximize();
            browser.get('http://juliemr.github.io/protractor-demo/');

            browser.getTitle().then(function(text){
               console.log('title is - ' + text);
                expect(text).to.equal('Super Calculator');
            });
         callback();
        });

        this.When(/^I enter two in the first field$/, function (callback) {
            element(by.model('first')).sendKeys('2');
            callback();
        });

        this.When(/^I enter three in the second field$/, function (callback) {
            element(by.model('second')).sendKeys('3');
            callback();
        });

        this.When(/^I click Go button$/, function (callback) {
            element(by.id('gobutton')).click();
            callback();
        });

        this.Then(/^Result should be displayed as Five$/, function (callback) {
             element(by.repeater('result in memory')).all(by.tagName('td')).get(2).getText().then(function(text){
            expect(text).to.equal('5');
            });
            callback();
        });

    };

推薦答案

您需要 return 一個承諾或在步驟定義中使用 done 回調.否則黃瓜不知道你什么時候異步動作完成.

You need to either return a promise or use the done callback in your step definitions. Otherwise cucumber doesn't know when your asynchronous actions are complete.

我有同樣的問題，上面的陳述是 protractor-cucumber github 論壇的核心成員之一的回復.

I had the same question and above statement was the response from one of the core members of the protractor-cucumber github forum.

當我使用 .then 函數對結果執行某些操作時，我更喜歡 return 承諾，并在我使用 .done 回調函數時不是，你也不需要 callbacks 現在 CucumberJS 支持承諾.所以你的步驟文件應該看起來像 -

I prefer to return promises when I am performing some actions on the results with .then function and use .done callback function when I am not, Also you don't need callbacks now CucumberJS supports promises. So your step file should look like -

var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;

module.exports = function () {


    this.Given(/^I launch the protractor demo page$/, function () {
        browser.driver.manage().window().maximize();
        browser.get('http://juliemr.github.io/protractor-demo/');

      return browser.getTitle().then(function(text){
           console.log('title is - ' + text);
            expect(text).to.equal('Super Calculator');
        });
    });

    this.When(/^I enter two in the first field$/, function () {
       return element(by.model('first')).sendKeys('2'); 
    });

    this.When(/^I enter three in the second field$/, function () {
       return element(by.model('second')).sendKeys('3'); // you can use return also
    });

    this.When(/^I click Go button$/, function () {
        return element(by.id('gobutton')).click();
    });

    this.Then(/^Result should be displayed as Five$/, function () {
        return element(by.repeater('result in memory')).all(by.tagName('td')).get(2).getText().then(function(text){
        expect(text).to.equal('5');
        });

    });

};

我建議你閱讀Promises http://www.html5rocks.com/en/tutorials/es6/promises/ 因為它需要一些了解它們的行為方式.它們有時可能很棘手，我花了一段時間才得到一個想法，但我還有很多東西要學:)

I would recommend you to read about Promises http://www.html5rocks.com/en/tutorials/es6/promises/ as it requires some understanding how they behave.They can be sometimes tricky, it took me a while to get an idea still I have lot to learn :)

這篇關于Protractor Cucumber BDD 測試在執行前顯示通過的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！