Creating Features

Intro

Let's start by opening the testcafe-cucumber repo in VSCode. If you are lost please refer to the intro.

Now that the repo is open let's run the cucumber files that are in there as an example. Type npm run test into the command line. Four tests will be run and three will pass and one will fail. You'll also see what step in Cucumber failed and TestCafe will show where in the code the failure occurred. The following pages will help you become familiar with what's going on.

A fresh new file

Lets take out the current tests from the project.

1. Expand the features folder and remove the github.feature and google.feature files.
2. Expand the step_definitions folder and remove the github.js and google.js files.
3. Expand the support folder and expand the pages folder and remove the github-page.js file
4. The folder structure should look like the following

Creating our first feature file

A .feature file contains the test(s) for a feature. The .feature file starts simply with the keyword Feature: which needs to be added for the following tests to be run. Let's create a .feature file below.

1. In the features folder root directory add the file sample_form.feature

2. Add the Feature: line to the top of the form and describe the feature
3. Add a description under Feature: so feature is further defined

Adding a Scenario (test)

You can add any information under the Feature: until you type the keyword Scenario:. A scenario quite simply is a test with a list of steps written under it. Each step could start with a *, but in order for the steps to be more comprehensible and business friendly use the predetermined Gherkin steps Given, When, Then, But, and And.

There is plenty of information online about the Gherkin syntax, so I won't go into much detail.

• Given put the system in a known state
• When specify an action performed
• Then observe outcomes or expected results
• And and But creates multiple Given, When, and Then steps

Each test should have at least a Given, When, and Then step. Let's create a Scenario: for the sample form page.

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
        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 "This is a comment John Doe" in the message field on the submission form
        And I see the "Message Sent" message

That's it you've successfully created your first scenario.

Additional notes

• If you are using the Cucumber (Gherkin) Full Support extension in VSCode you'll notice all of the syntax highlighting and completion.

• You can auto-format the .feature file by the hotkey command CTRL + ALT + F

• Additional reading on Feature files and Gherkin

  • Feature Introduction
  • Given When Then (new)
  • Given When Then
  • Gherkin