angular - CucumberJS 场景大纲，创建步骤代码

Question

我有以下功能文件:

Feature: Color feature

    @test
    Scenario Outline: Test color
        Given the first color is <COLOR_ONE>
        And the second color is <COLOR_TWO>
        When the user loads page
        Then the <COLOR_THREE> is displayed

        Examples:
            | COLOR_ONE | COLOR_TWO | COLOR_THREE
            | red       | white     | pink
            | blue      | black     | black
            | green     | purple    | white
             

我正在尝试弄清楚如何创建步骤文件。每当我运行 Protractor 时，它都会给我自动生成的代码；但是，它为每种情况提供了一个。例如，它希望我为每种情况编写六个 Given 步骤。如何使用传递给函数的变量创建两个 Given 步骤？ Then 步骤也是如此。

我尝试了以下操作(使用 Typescript)，但它仍然希望我创建所有不同的步骤案例，当然，以下案例都没有通过。

import { browser, element, by } from 'protractor';
const { Given, When, Then, defineSupportCode } = require('cucumber');

defineSupportCode(function ({ setDefaultTimeout }) {
    setDefaultTimeout(120 * 1000);
});

Given(/^ the first color is "([^"]*)" $/, (color, next) => {
    next();
});

Given(/^ the second color is "([^"]*)" $/, (color, next) => {
    next();
});

When(/^ the user loads page $/, (next) => {
    next();
});

Then(/^ the "([^"]*)" is displayed $/, (color, next) => {
    next();
});

Answer 1

所以我实际上有两个错误。我在功能文件中的 COLOR_THREE 之后没有管道，我需要在步骤文件中使用 {variable_here} 代替。以下是更新后的功能文件和代码:

功能文件:

Feature: Color feature

    @test
    Scenario Outline: Test color
        Given the first color is <COLOR_ONE>
        And the second color is <COLOR_TWO>
        When the user loads page
        Then the <COLOR_THREE> is displayed

        Examples:
        | COLOR_ONE | COLOR_TWO | COLOR_THREE |
        | red       | white     | pink        |
        | blue      | black     | black       |
        | green     | purple    | white       |
         

步骤文件:

import { browser, element, by } from 'protractor';
const { Given, When, Then, defineSupportCode } = require('cucumber');

defineSupportCode(function ({ setDefaultTimeout }) {
    setDefaultTimeout(120 * 1000);
});

Given('the first color is {color}', (color, next) => {
    next();
});

Given('the second color is {color}', (color, next) => {
    next();
});

When('the user loads page', (next) => {
    next();
});

Then('the {color} is displayed', (color, next) => {
    next();
});

现在您可以从变量内的特征文件的表中获取各种值。并且测试通过了(当然，没有测试上面示例中的任何内容)。希望它对某人有帮助!