this.helpers['WebDriver'] returns undefined in Webdriver helper

What are you trying to achieve?

Trying to create Webdriver helper using official CodeceptJS documentation, but it seems that inside my helper this.helpers['WebDriver'] returns undefined.

My Webdriver helper

'use strict';

let Helper = codecept_helper;

class DragAndDropHelper extends Helper {
  dragAndDropHelper(sourceSelector, destinationSelector) {

    let client = this.helpers['WebDriver'].browser;
    console.log("client: "+JSON.stringify(client));

  }
}

module.exports = DragAndDropHelper;

In order to create this helper I used this official example.

What do you get instead?

Provide console output if related. Use --verbose mode for more details.

$ npx codeceptjs run -c codecept/codeceptWebdriver.conf.js --steps --verbose
CodeceptJS v2.1.4
Using test root "C:\Users\evgenii.mikhailishin\CodeceptJS-Allure\codecept"
Helpers: Webdriver, ClickFallback
Plugins: screenshotOnFail

dragNdrop --
    [1] Starting recording promises
    Emitted | suite.before ([object Object])
  1 html5
    Emitted | test.before ([object Object])
    Emitted | test.start ([object Object])
    Emitted | step.before (I am on page "http://127.0.0.1:8080/index_html5.html")
    Emitted | step.after (I am on page "http://127.0.0.1:8080/index_html5.html")
    Emitted | step.before (I see "Result:", {"css":"#resultH"})
    Emitted | step.after (I see "Result:", {"css":"#resultH"})
    Emitted | step.before (I drag and drop helper {"id":"drag1"}, {"id":"div1"})
    Emitted | step.after (I drag and drop helper {"id":"drag1"}, {"id":"div1"})
    Emitted | step.before (I see "Result: dropped", {"css":"#resultH"})
    Emitted | step.after (I see "Result: dropped", {"css":"#resultH"})
    Emitted | step.start (I am on page "http://127.0.0.1:8080/index_html5.html")
    I am on page "http://127.0.0.1:8080/index_html5.html"
    Emitted | step.passed (I am on page "http://127.0.0.1:8080/index_html5.html")
    Emitted | step.finish (I am on page "http://127.0.0.1:8080/index_html5.html")
    Emitted | step.start (I see "Result:", {"css":"#resultH"})
    I see "Result:", {"css":"#resultH"}
    Emitted | step.passed (I see "Result:", {"css":"#resultH"})
    Emitted | step.finish (I see "Result:", {"css":"#resultH"})
    Emitted | step.start (I drag and drop helper {"id":"drag1"}, {"id":"div1"})
    I drag and drop helper {"id":"drag1"}, {"id":"div1"}
    [1] Error | TypeError: Cannot read property 'browser' of undefined
    Emitted | step.failed (I drag and drop helper {"id":"drag1"}, {"id":"div1"})
    Emitted | step.finish (I drag and drop helper {"id":"drag1"}, {"id":"div1"})
    [1] Error | TypeError: Cannot read property 'browser' of undefined
    Emitted | step.failed (I see "Result: dropped", {"css":"#resultH"})
    Emitted | step.finish (I see "Result: dropped", {"css":"#resultH"})
    [1] Error | TypeError: Cannot read property 'browser' of undefined
    [1] Starting <teardown> session
    Emitted | test.failed ([object Object])
    Emitted | test.finish ([object Object])
    [1] <teardown> Stopping recording promises
  × FAILED in 356ms

    [2] Starting recording promises
    Emitted | test.after ([object Object])
  S 1 jquery
  S 1 jquery
    Emitted | suite.after ([object Object])

-- FAILURES:

  1) dragNdrop
       1 html5:
     Cannot read property 'browser' of undefined

  Scenario Steps:

  - I.dragAndDropHelper({"id":"drag1"}, {"id":"div1"}) at Test.Scenario (tests\converted\dragNdrop.js:6:6)
  - I.see("Result:", {"css":"#resultH"}) at Test.Scenario (tests\converted\dragNdrop.js:5:6)
  - I.amOnPage("http://127.0.0.1:8080/index_html5.html") at Test.Scenario (tests\converted\dragNdrop.js:4:6)

  TypeError: Cannot read property 'browser' of undefined
      at DragAndDropHelper.dragAndDropHelper (codecept\helpers\Webdriver\drag-and-drop_helper.js:19:44)
      at Step.run (node_modules\codeceptjs\lib\step.js:41:47)
      at recorder.add (node_modules\codeceptjs\lib\actor.js:70:23)
      at process.internalTickCallback (internal/process/next_tick.js:77:7)


  FAIL  | 0 passed, 1 failed, 2 skipped   // 3s
    Emitted | global.result ([object Object])
    Emitted | global.after ([object Object])

My test scenario

Feature("dragNdrop");

Scenario("1 html5", (I) => {
   I.amOnPage("http://127.0.0.1:8080/index_html5.html");
   I.see("Result:",{css:"#resultH"});
   I.dragAndDropHelper({id: 'drag1'},{id:'div1'});
   I.see("Result: dropped",{css:"#resultH"});
});

Web page that I use for testing

<!DOCTYPE HTML>
<html>

<head>
  <style>
    #div1 {
      width: 350px;
      height: 70px;
      padding: 10px;
      border: 1px solid #aaaaaa;
    }
  </style>
  <script>
    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));

      document.getElementById("resultH").textContent = "Result: dropped";
    }
  </script>
</head>

<body>

  <p>Drag the W3Schools image into the rectangle:</p>

  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <br>
  <img id="drag1" src="https://commons.wikimedia.org/wiki/File:Cat03.jpg#/media/File:Cat03.jpg" draggable="true"
    ondragstart="drag(event)" width="336" height="69">


  <h1 id="resultH">Result: </h1>

</body>

</html>

Details

• CodeceptJS version: v 2.1.4
• NodeJS Version: v 11.3.0
• Operating System: Windows 10 x64
• webdriver@5.10.4
• Configuration file:

exports.config = {
  tests: '../tests/converted/*.js',
  output: '../output',

  helpers: {
    Webdriver: {
      url: '127.0.0.1:9000',
      browser: 'firefox',
    },
    "DragAndDropHelper": {
      "require": "./helpers/Webdriver/drag-and-drop_helper.js"
    },    
  },
  include: {
    I: '../steps_file.js'
  },
  bootstrap: null,
  "plugins": {
    "autoDelay": {
      "enabled": false,
      "delayBefore": 10000,
      "delayAfter": 100
    }
  },
  mocha: {},
  name: 'Codecept-Allure POC'
}

[elukoyanov]

In Config you use Webdriver -not WebDriver

Capitalize d

[gourighode]

@evgeniy-mh Thank You for your response. Will try with other solutions.