CucumberJS Scenario Outlines, creating step code

Question

I have the following feature file:

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
             

I am trying to figure out how to create the step file. Whenever I run protractor, it gives me auto generated code; however, it is giving me one for each scenario. For example, it wants me to write six Given steps for each case. How can I just create two Given steps with the variables passed to the function? Same thing for the Then step.

I tried the following (using Typescript) but it still wants me to create all the different step cases and, of course, none of the below ones pass.

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

So I actually had two errors. I didn't have the pipes after COLOR_THREE in the feature file and I needed to use {variable_here} instead in the step file. Here's the updated feature file and code:

Feature file:

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       |
         

Step file:

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();
});

Now you get the various values from the table in the feature file inside the variables. And the tests pass (of course, didn't test for anything in the above example). Hope it helps someone!