Skip to content

Harnessing Cucumber's Power

Jump to bottom
rquellh edited this page May 16, 2018 · 5 revisions

So you've created you're first Cucumber scenario, but you might be wondering why we went through all of that trouble. The plain TestCafe test worked just as good as the Cucumber + TestCafe test. The following document will show you the power of creating Cucumber scenarios.

Using previously created steps

Since I've created my tests to be flexible, I can now create a similar test with different data by just creating a new scenario in my .feature file. Since I'm going to reuse my steps I don't have to make any code changes to the step definitions. Let's try it.

  1. Add the following scenario to the sample_form.feature file
    Scenario: Form Submission - Required Fields Only - Jane Doe
        Given I navigate to the example form page
        When I fill out the name field with "Jane Doe"
        And I fill out the email field with "janedoe@gmail.com"
        And I fill out the comment box with "This is a comment Jane Doe"
        And I select "5-7" from the expereince dropdown
        And I click the submit button
        Then I see "Jane Doe" in the name field on the submission form
        And I see "janedoe@gmail.com" in the email field on the submission form
        And I see "5-7" in the expereince field on the submission form
        And I see "This is a comment Jane Doe" in the message field on the submission form
        And I see the "Message Sent" message
  1. Run the tests. You should see the first scenario run, and then you should see the second scenario. The second scenario is using the same steps as the first scenario but with different data.

Scenario Outline

The previous example is really powerful, but creating similar tests could be tedious and difficult to manage if you have a lot of data you want to run through the same test steps.

A scenario outline has 3 main differences from a scenario.

  1. Scenario is replaced with Scenario Outline
  2. Cucumber parameters are replaced with <> delimited parameters
  3. An example table is created below the scenario that contains the data you want to run

Let's combine the last two tests into a scenario outline.

  1. Start by renaming Scenario to Scenario Outline.
  2. Add an Examples table to the bottom of the Scenario Outline. (If you are using the VSCode extension Cucumber (Gherkin) Full Support you should see an example Examples table.)
Examples:
        | Header 1 | Header 2 | Header 3 |
        | Value 1  | Value 2  | Value 3  |
  1. Add the example placeholders to the newly created outline
    @debug
    Scenario Outline: Form Submission - Required Fields Only
        Given I navigate to the example form page
        When I fill out the name field with "<name>"
        And I fill out the email field with "<email>"
        And I fill out the comment box with "<comment>"
        And I select "<experience>" from the expereince dropdown
        And I click the submit button
        Then I see "<name>" in the name field on the submission form
        And I see "<email>" in the email field on the submission form
        And I see "<experience>" in the expereince field on the submission form
        And I see "<comment>" in the message field on the submission form
        And I see the "Message Sent" message
  1. Add the placeholders and data to the Examples table
        Examples:
            | name     | email             | comment                    | experience |
            | Jane Doe | janedoe@gmail.com | This is a comment Jane Doe | 5-7        |
  1. Add the John Doe example to the Examples table
        Examples:
            | name     | email             | comment                    | experience |
            | Jane Doe | janedoe@gmail.com | This is a comment Jane Doe | 5-7        |
            | John Doe | johndoe@gmail.com | This is a comment John Doe | 1-3        |
  1. Let's tag the Scenario so we only run the scenario outline and no other tests. We can do this by adding an @ and name before the scenario outline.
    @active
    Scenario Outline: Form Submission - Required Fields Only

  1. Now let's run just the scenario outline by using the following command in the command line.

    Windows .\node_modules\.bin\cucumber-js.cmd --tags "@active"

    Mac\Linux node_modules/cucumber/bin/cucumber-js --tags "@active"

What did you see? You should see tests being run for the Jane and John scenarios. A new line in the Examples table creates a new test with the data in the table.

The complete .feature file below...

Feature: Sample Form

    As a user
    I want to fill out the form
    So that the company recieves my information

    Scenario: Form Submission - Required Fields Only - John Doe
        Given I navigate to the example form page
        When I fill out the name field with "John Doe"
        And I fill out the email field with "johndoe@gmail.com"
        And I fill out the comment box with "This is a comment John Doe"
        And I select "5-7" from the expereince dropdown
        And I click the submit button
        Then I see "John Doe" in the name field on the submission form
        And I see "johndoe@gmail.com" in the email field on the submission form
        And I see "5-7" in the expereince field on the submission form
        And I see "This is a comment John Doe" in the message field on the submission form
        And I see the "Message Sent" message

    Scenario: Form Submission - Required Fields Only - John Doe
        Given I navigate to the example form page
        When I fill out the name field with "Jane Doe"
        And I fill out the email field with "janedoe@gmail.com"
        And I fill out the comment box with "This is a comment Jane Doe"
        And I select "5-7" from the expereince dropdown
        And I click the submit button
        Then I see "Jane Doe" in the name field on the submission form
        And I see "janedoe@gmail.com" in the email field on the submission form
        And I see "5-7" in the expereince field on the submission form
        And I see "This is a comment Jane Doe" in the message field on the submission form
        And I see the "Message Sent" message

    @active
    Scenario Outline: Form Submission - Required Fields Only
        Given I navigate to the example form page
        When I fill out the name field with "<name>"
        And I fill out the email field with "<email>"
        And I fill out the comment box with "<comment>"
        And I select "<experience>" from the expereince dropdown
        And I click the submit button
        Then I see "<name>" in the name field on the submission form
        And I see "<email>" in the email field on the submission form
        And I see "<experience>" in the expereince field on the submission form
        And I see "<comment>" in the message field on the submission form
        And I see the "Message Sent" message

        Examples:
            | name     | email             | comment                    | experience |
            | Jane Doe | janedoe@gmail.com | This is a comment Jane Doe | 5-7        |
            | John Doe | johndoe@gmail.com | This is a comment John Doe | 1-3        |
Clone this wiki locally