Creating Step Definitions - rquellh/testcafe-cucumber GitHub Wiki

Creating the Step Definition file

There are a couple ways to generate the steps for the step definitions file. We could create them by hand, but there's a nice feature built into Cucumber that creates the steps if it doesn't find them in any step definition files. Let's try it out.

1. In the root directory of the step_definitions folder is the place we put our step definitions. Let's create a file called sample_form_steps.js.
2. Now let's pull in some modules. We need to pull in Given, When, and Then from Cucumber. Add the following line to the top of sample_form_steps.js.

const {Given, When, Then} = require('cucumber');

3. Now let's run Cucumber and try to run our newly created .feature file. On the terminal run the command .\node_modules\.bin\cucumber-js.cmd if you are using Windows and node_modules/cucumber/bin/cucumber-js if you are using Mac or Linux.

4. What you should see is Cucumber couldn't find the step definitions for the files we just created. You should also see Cucumber created suggested code snippets to aid us creating the steps. Copy and paste the suggestions to the sample_form_steps.js file. The solution is shown below.

const { Given, When, Then } = require('cucumber');

Given('I navigate to the example form page', function () {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

When('I fill out the name field with {string}', function (string) {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

When('I fill out the email field with {string}', function (string) {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

When('I fill out the comment box with {string}', function (string) {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

When('I select {string} from the expereince dropdown', function (string) {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

When('I click the submit button', function () {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

Then('I see {string} in the name field on the submission form', function (string) {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

Then('I see {string} in the email field on the submission form', function (string) {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

Then('I see {string} in the expereince field on the submission form', function (string) {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

Then('I see {string} in the message field on the submission form', function (string) {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

Then('I see the {string} message', function (string) {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

5. Make sure you save sample_form_steps.js and let's run Cucumber again. You should see that the first step has been found, but it's "pending" meaning the code to run the step is not there.

Passing parameters to the step definition

Let's look at the following step.

When('I fill out the name field with {string}', function (string) {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
});

You can see that the step is not quite the same as what we typed in the sample_form.feature file.

When I fill out the name field with "John Doe"

What is going on? Did Cucumber make a mistake when creating the step definition for this step?

Actually, Cucumber is creating a parameter that can be using in the step definition. It knew that I wanted a to create a parameter, because I added quotation marks "" around the name "John Doe".

You can see the parameter that Cucumber created in the parenthesis () after the word function. In this case the parameter is called string. If I were to define the step above using the following code...

When('I fill out the name field with {string}', function (string) {
    return console.log(string);
});

then the console would output John Doe. If this is a bit unclear to you it might become more clear in the upcoming exercises.

More information about Cucumber expressions