Cucumber with Protractor - Multiple Features Not Executed Properly

Question

I have a pretty small POM based project for learning Cucumber with Protractor. I am using TypeScript. I am trying to perform pretty basic actions (clicking on button, clicking on a menu item) on Angular IO home page.

|    ├───e2e
│         ├───features
│         └───steps
│              ├───common
│              ├───getstarted
│              ├───learnmore
│              └───search

The features directory contains the features files for the tests. An example is here - where I want to click on the "Get Started" button to go to the quickstart page.

Feature: Search
    As a developer using Angular
    I need to look-up classes and guidelines
    So that I can concentrate on building awesome applications

Scenario: Click on Get Started
    Given I am on the angular.io site
    When I click on Get Started Button
    Then I should see the Get Started Page

The steps directory contains the step Definitions for the .feature files, with the common steps being clubbed in common.ts file inside steps.

If I run a single feature file, then the execution works perfectly fine, however, if I add multiple .feature in the feature dir, then the execution breaks and it goes haywire.

I have tried various strategies, like grouping the .feature and step file in one same dir, but nothing else is working.

Any pointers or help in this would be highly appreciated. A working reproducible repository is here.

Answer 1

After a day or two of hard toiling and trying a lot of combinations, I was able to get the features working correctly.

The issue was that the feature files and the steps were not glued together and many times, if I had the feature files along with the step definitions, it would throw an ambiguous error, since Cucumber gets multiple same definitions and is not able to actually tell which steps it had to run.

I put up an issue for the ambiguous error on SO, and the answer given by Kyle Fairns gave me the idea to separate the common steps at one place and after a some hours of trying things and reading a lot of blog posts, I re-structured my tests in this way -

|    ├───e2e
│         ├───features
|         |     |---search.feature
|         |     |---getstarted.feature
|         |     
│         └───steps
│              ├───common
|              |     |-common_step.ts [Contains Given step]
|              |
│              ├───getstarted
|              |      |---getstarted.po.ts
|              |      |---getstarted.steps.ts
│              ├───learnmore
|              |      |---learnmore.po.ts
|              | .    |---learnmore.steps.ts
│              |───search
|              |      |---search.po.ts
|              |      |---search.steps.ts

I grouped the .po and .steps file in a single directory for a specific action.

Since the Given step was common to all the scenarios, I put it up in a single common directory. The rest steps were separated out, action wise in their respective directory.

The dir structure that I am working currently gives me the flexibility of tuning out the exact steps and methods for a particular action , since the steps corresponds to particular function blocks in the .po files.

However, if someone comes with a better idea/structure, please feel free to add an answer to the question and I would be more than happy to try it out.