Script Script does not work with CucumberJS

Question

Script Script does not work with CucumberJS

I do CucumberJS using WebDriverIO and am testing http://webdriver.io . I had the following file description and step definition, and this worked fine.

Function file

Feature: Application Title
    Page title should be context sensitive

    Scenario: Page loads with correct title
        When Page "/" is loaded
        Then Page title is "WebdriverIO - WebDriver bindings for Node.js"

Step definition

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

const webdriverio = require('webdriverio');

When(/^Page \"(.*)\" is loaded$/, (page) => {
    browser.url(page);
});

Then(/^Page title is \"(.*)\"$/, (title) => {
    assert(browser.title(), title);
});

But when I changed the script to the script diagram, it stopped working with an error. The following are the changes made to the function file.

Function File (Updated)

Feature: Application Title
    Page title should be context sensitive

    Scenario Outline: Page loads with correct title
    When Page "<url>" is loaded
    Then Page title is "<title>"

    Examples:
    | url         | title                                        |
    | /           | WebdriverIO - WebDriver bindings for Node.js |
    | /guide.html | WebdriverIO - Developer Guide                |

Console

D:\playground\webdriverio-cucumberjs>npm run e2e

> webdriverio-cucumberjs@1.0.0 e2e D:\playground\webdriverio-cucumberjs
> wdio


[13:11:45]  COMMAND     POST     "/wd/hub/session"
[13:11:45]  DATA                {"desiredCapabilities":{"javascriptEnabled":true,"locationContextEnabled":true,"handlesAlerts":true,"rotatable":true,"maxInstances":5,"browserName":"chrome","loggingPrefs":{"browser":"ALL","driver":"ALL"},"requestOrigins":{"url":"http://webdriver.io","version":"4.12.0","name":"webdriverio"}}}
[13:11:49]  INFO        SET SESSION ID d206c5af3fcb467668d5f1d21135bd5a
[13:11:49]  RESULT              {"applicationCacheEnabled":false,"rotatable":false,"mobileEmulationEnabled":false,"networkConnectionEnabled":false,"chrome":{"chromedriverVersion":"2.36.540470 (e522d04694c7ebea4ba8821272dbef4f9b818c91)","userDataDir":"C:\\Users\\BilalM\\AppData\\Local\\Temp\\scoped_dir2072_18134"},"takesHeapSnapshot":true,"pageLoadStrategy":"normal","databaseEnabled":false,"handlesAlerts":true,"hasTouchScreen":false,"version":"65.0.3325.181","platform":"Windows NT","browserConnectionEnabled":false,"nativeEvents":true,"acceptSslCerts":false,"acceptInsecureCerts":false,"locationContextEnabled":true,"webStorageEnabled":true,"browserName":"chrome","takesScreenshot":true,"javascriptEnabled":true,"cssSelectorsEnabled":true,"setWindowRect":true,"unexpectedAlertBehaviour":""}
ERROR: Cannot read property 'steps' of undefined
chrome
Type    at CucumberEventListener.onTestStepPrepared (D:\playground\webdriverio-cucumberjs\node_modules\wdio-cucumber-framework\build\cucumberEventListener.js:186:44)
    at emitOne (events.js:101:20)
    at EventEmitter.emit (events.js:188:7)
    at TestCaseRunner.emit (D:\playground\webdriverio-cucumberjs\node_modules\cucumber\lib\runtime\test_case_runner.js:94:29)
    at TestCaseRunner.emitPrepared (D:\playground\webdriverio-cucumberjs\node_modules\cucumber\lib\runtime\test_case_runner.js:127:12)
    at TestCaseRunner.<anonymous> (D:\playground\webdriverio-cucumberjs\node_modules\cucumber\lib\runtime\test_case_runner.js:219:14)
    at next (native)
    at tryCatcher (D:\playground\webdriverio-cucumberjs\node_modules\bluebird\js\release\util.js:16:23)
    at PromiseSpawn._promiseFulfilled (D:\playground\webdriverio-cucumberjs\node_modules\bluebird\js\release\generators.js:97:49)
    at TestCaseRunner.<anonymous> (D:\playground\webdriverio-cucumberjs\node_modules\bluebird\js\release\generators.js:201:15)
    at TestCaseRunner.run (D:\playground\webdriverio-cucumberjs\node_modules\cucumber\lib\runtime\test_case_runner.js:236:22)
    at Runtime.<anonymous> (D:\playground\webdriverio-cucumberjs\node_modules\cucumber\lib\runtime\index.js:113:51)
    at next (native)
    at tryCatcher (D:\playground\webdriverio-cucumberjs\node_modules\bluebird\js\release\util.js:16:23)
    at PromiseSpawn._promiseFulfilled (D:\playground\webdriverio-cucumberjs\node_modules\bluebird\js\release\generators.js:97:49)
    at Runtime.<anonymous> (D:\playground\webdriverio-cucumberjs\node_modules\bluebird\js\release\generators.js:201:15)
[13:11:49]  COMMAND     DELETE   "/wd/hub/session/d206c5af3fcb467668d5f1d21135bd5a"
[13:11:49]  DATA                {}
------------------------------------------------------------------
[chrome #0-0] Session ID: d206c5af3fcb467668d5f1d21135bd5a
[chrome #0-0] Spec: D:\playground\webdriverio-cucumberjs\e2e\features\app-titles.feature
[chrome #0-0] Running: chrome
[chrome #0-0]
[chrome #0-0] Application Title
[chrome #0-0]
[chrome #0-0]     Page loads with correct title
[chrome #0-0]
[chrome #0-0]         Page loads with correct title
[chrome #0-0]
[chrome #0-0]
[chrome #0-0]


Cannot write xunit report: empty or invalid 'outputDir'.
Cannot write json report: empty or invalid 'outputDir'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webdriverio-cucumberjs@1.0.0 e2e: `wdio`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webdriverio-cucumberjs@1.0.0 e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\#$#$#$#$\AppData\Roaming\npm-cache\_logs\2018-04-06T11_11_49_985Z-debug.log