WebdriverIO 5 - 'browser.$(...).click is not a function' error - webstorm

Question

I am new to WebdriverIO. I was trying to execute my first feature file and I get this error :
[chrome windows #0-0] browser.$(...).click is not a function
[chrome windows #0-0] TypeError: browser.$(...).click is not a function
But I can see the click() function listed in the auto suggestions when I type the code in the editor. Can someone point out what I am doing wrong?
Here is my Step definition file :
import {Given, Then} from "cucumber";
Given(/^I navigated to RPA Challenge website$/, function() {
browser.url("http://rpachallenge.com/");
});
Then(/^I see the submit button$/, function () {
browser.$("/html/body/app-root/div[2]/app-rpa1/div/div[2]/form/input").click();
console.log("URL is "+browser.getUrl());
});
Here is my package.json file :
{
"name": "WebdriverIO_2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.6",
"#babel/preset-env": "^7.8.6",
"#babel/register": "^7.8.6",
"#wdio/cli": "^5.18.7",
"#wdio/cucumber-framework": "^5.18.6",
"#wdio/local-runner": "^5.18.7",
"#wdio/spec-reporter": "^5.18.7",
"#wdio/sync": "^5.18.7",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"chromedriver": "^80.0.1",
"cucumber": "^6.0.5",
"install": "^0.13.0",
"wdio-chromedriver-service": "^5.0.2",
"webdriverio": "^5.18.7"
},
"dependencies": {
"wdio-selenium-standalone-service": "0.0.12"
}
}
Output and Error message :
C:\Users\myusername\Desktop\WebdriverIO3>node_modules\.bin\wdio wdio.conf.js
2020-03-04T07:18:16.130Z DEBUG #wdio/sync: Couldn't load fibers package for Node v10 and above
2020-03-04T07:18:16.130Z DEBUG #wdio/sync: Couldn't load fibers package for Node v8
Execution of 1 spec files started at 2020-03-04T07:18:18.858Z
2020-03-04T07:18:19.124Z INFO #wdio/cli:launcher: Run onPrepare hook
Starting ChromeDriver 80.0.3987.16 (320f6526c1632ad4f205ebce69b99a062ed78647-refs/branch-heads/3987#{#185}) on port 4444
Only local connections are allowed.
Please protect ports used by ChromeDriver and related test frameworks to prevent access by malicious code.
2020-03-04T07:18:19.940Z INFO #wdio/local-runner: Start worker 0-0 with arg: wdio.conf.js
[0-0] 2020-03-04T07:18:22.709Z INFO #wdio/local-runner: Run worker command: run
[0-0] RUNNING in chrome - C:\Users\myusername\Desktop\WebdriverIO3\features\login.feature
[0-0] 2020-03-04T07:18:24.759Z INFO webdriverio: Initiate new session using the webdriver protocol
[0-0] 2020-03-04T07:18:24.766Z INFO webdriver: [POST] http://127.0.0.1:4444/wd/hub/session
[0-0] 2020-03-04T07:18:24.766Z INFO webdriver: DATA { capabilities: { alwaysMatch: { browserName: 'chrome' }, firstMatch: [ {} ] },
desiredCapabilities: { browserName: 'chrome' } }
[3132:23720:0304/124825.906:ERROR:configuration_policy_handler_list.cc(90)] Unknown policy: AlwaysAuthorizePlugins
[3132:23720:0304/124825.906:ERROR:configuration_policy_handler_list.cc(90)] Unknown policy: DisablePluginFinder
[3132:23720:0304/124825.906:ERROR:configuration_policy_handler_list.cc(90)] Unknown policy: PasswordManagerAllowShowPasswords
[3132:23720:0304/124826.015:ERROR:configuration_policy_handler_list.cc(90)] Unknown policy: AlwaysAuthorizePlugins
[3132:23720:0304/124826.015:ERROR:configuration_policy_handler_list.cc(90)] Unknown policy: DisablePluginFinder
[3132:23720:0304/124826.015:ERROR:configuration_policy_handler_list.cc(90)] Unknown policy: PasswordManagerAllowShowPasswords
DevTools listening on ws://127.0.0.1:53324/devtools/browser/9124ea53-8ac6-483b-8bba-3dcdf611bb28
[0-0] 2020-03-04T07:18:34.702Z INFO webdriver: COMMAND navigateTo("http://rpachallenge.com/")
[0-0] 2020-03-04T07:18:34.703Z INFO webdriver: [POST] http://127.0.0.1:4444/wd/hub/session/0132136b9c7a963983c93889b31c16d5/url
2020-03-04T07:18:34.703Z INFO webdriver: DATA { url: 'http://rpachallenge.com/' }
[0-0] 2020-03-04T07:18:34.712Z INFO webdriver: COMMAND findElement("xpath", "/html/body/app-root/div[2]/app-rpa1/div/div[2]/form/input")
[0-0] 2020-03-04T07:18:34.713Z INFO webdriver: [POST] http://127.0.0.1:4444/wd/hub/session/0132136b9c7a963983c93889b31c16d5/element
[0-0] 2020-03-04T07:18:34.714Z INFO webdriver: DATA { using: 'xpath',
value: '/html/body/app-root/div[2]/app-rpa1/div/div[2]/form/input' }
[0-0] Error in "RPA Challenge website launch: scenario 1: Then I see the submit button"
browser.$(...).click is not a function
[0-0] 2020-03-04T07:18:34.775Z INFO webdriver: COMMAND deleteSession()
[0-0] 2020-03-04T07:18:34.777Z INFO webdriver: [DELETE] http://127.0.0.1:4444/wd/hub/session/0132136b9c7a963983c93889b31c16d5
[1583306316.590][SEVERE]: Timed out receiving message from renderer: 0.100
[1583306316.692][SEVERE]: Timed out receiving message from renderer: 0.100
[1583306316.796][SEVERE]: Timed out receiving message from renderer: 0.100
[1583306316.898][SEVERE]: Timed out receiving message from renderer: 0.100
[0-0] 2020-03-04T07:19:14.197Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': '54156a65-2e41-4f61-b9fe-7669cf591b1c' }
[0-0] FAILED in chrome - C:\Users\myusername\Desktop\WebdriverIO3\features\login.feature
2020-03-04T07:19:14.593Z INFO #wdio/cli:launcher: Run onComplete hook
"spec" Reporter:
------------------------------------------------------------------
[chrome windows #0-0] Spec: C:\Users\myusername\Desktop\WebdriverIO3\features\login.feature
[chrome windows #0-0] Running: chrome on windows
[chrome windows #0-0] Session ID: 0132136b9c7a963983c93889b31c16d5
[chrome windows #0-0]
[chrome windows #0-0] RPA Challenge website launch
[chrome windows #0-0] scenario 1
[chrome windows #0-0] ✓ Given I navigated to RPA Challenge website
[chrome windows #0-0] ✖ Then I see the submit button
[chrome windows #0-0]
[chrome windows #0-0] 1 passing (44.3s)
[chrome windows #0-0] 1 failing
[chrome windows #0-0]
[chrome windows #0-0] 1) scenario 1 Then I see the submit button
[chrome windows #0-0] browser.$(...).click is not a function
[chrome windows #0-0] TypeError: browser.$(...).click is not a function
[chrome windows #0-0] at World.<anonymous> (C:\Users\myusername\Desktop\WebdriverIO3\stepDefs/Login.stepdef.js:8:76)
[chrome windows #0-0] at World.executeAsync (C:\Users\myusername\Desktop\WebdriverIO3\node_modules\#wdio\utils\build\shim.js:123:21)
[chrome windows #0-0] at World.testFrameworkFnWrapper (C:\Users\myusername\Desktop\WebdriverIO3\node_modules\#wdio\utils\build\test-framework\testFnWrapper.js:55:28)
[chrome windows #0-0] at <anonymous>
Spec Files: 0 passed, 1 failed, 1 total (100% completed) in 00:00:55
2020-03-04T07:19:14.600Z INFO #wdio/local-runner: Shutting down spawned worker
2020-03-04T07:19:14.860Z INFO #wdio/local-runner: Waiting for 0 to shut down gracefully
2020-03-04T07:19:14.860Z INFO #wdio/local-runner: shutting down

Answer 1

The error occurs because of fibers.
2020-03-04T07:18:16.130Z DEBUG #wdio/sync: Couldn't load fibers package for Node v10 and above
The easiest fix for me was to add fibers to the devDependencies.
Also see: https://github.com/webdriverio/webdriverio/issues/4913

Answer 2

Cannot read property 'click' of undefined
Cannot read property 'getText' of undefined
Cannot read property 'waitForClickable' of undefined
are all the same issues.
Most likely your variable name is either: not defined, or misspelled.
If you have this type of errors, always refer to whatever you have right before click, getText, waitForClickable.
Example:
this.loginPage.loginBtn.click(); loginBtn
is where issue is hidden. See if you can go into definition of that selector to verify referencing
Please check this link https://codemify.com/automation/9-Errors-explanation

Answer 3

I have just tried the same code in the project I have and it works perfectly. I assume the issue is with your config and I have put my config below. Also, you can refer my config from here as well.
I have tried with and without sync: true. Works on both occasions.
Cheers!
global.log4js = require('../log4js.config').log4js;
exports.config = {
runner: 'local',
specs: [
'./features/*.feature',
],
exclude: [],
maxInstances: 5,
capabilities: [{
'maxInstances': 1,
'browserName': 'chrome',
'goog:chromeOptions': {
w3c: true,
args: ['--headless'],
},
}, ],
// logLevel: 'info',
logLevels: {
'webdriverio': 'error',
'webdriver': 'error',
'#wdio/applitools-service': 'error',
'#wdio/browserstack-service': 'error',
'#wdio/devtools-service': 'error',
'#wdio/sauce-service': 'error',
'#wdio/mocha-framework': 'error',
'#wdio/jasmine-framework': 'error',
'#wdio/local-runner': 'error',
'#wdio/lambda-runner': 'error',
'#wdio/sumologic-reporter': 'error',
'#wdio/cli': 'error',
'#wdio/config': 'error',
'#wdio/sync': 'error',
'#wdio/utils': 'error',
},
sync: true,
coloredLogs: true,
bail: 0,
baseUrl: 'https://www.phptravels.net/',
waitforTimeout: 10000,
connectionRetryTimeout: 90000,
connectionRetryCount: 3,
services: ['selenium-standalone'],
framework: 'cucumber',
// specFileRetries: 1,
reporters: [
['allure', {
outputDir: 'allure-results',
disableWebdriverStepsReporting: true,
disableWebdriverScreenshotsReporting: false,
useCucumberStepReporter: false,
}],
['cucumberjs-json', {
jsonFolder: 'reports',
language: 'en',
}],
],
cucumberOpts: {
requireModule: ['#babel/register'],
require: ['./features/step-definitions/*.js'], // <string[]> (file/dir) require files before executing features
backtrace: true, // <boolean> show full backtrace for errors
failAmbiguousDefinitions: true, // <boolean< Treat ambiguous definitions as errors
dryRun: false, // <boolean> invoke formatters without executing steps
failFast: false, // <boolean> abort the run on first failure
ignoreUndefinedDefinitions: false, // <boolean> Enable this config to treat undefined definitions as warnings
format: ['pretty'], // <string[]> (type[:path]) specify the output format, optionally supply PATH to redirect formatter output (repeatable)
colors: true, // <boolean> disable colors in formatter output
snippets: false, // <boolean> hide step definition snippets for pending steps
source: false, // <boolean> hide source uris
profile: [], // <string[]> (name) specify the profile to use
strict: true, // <boolean> fail if there are any undefined or pending steps
tagExpression: '', // <string> (expression) only execute the features or scenarios with tags matching the expression
timeout: 60000, // <number> timeout for step definitions
ignoreUndefinedDefinitions: false, // <boolean> Enable this config to treat undefined definitions as warnings.
},
};

Answer 4

Try changing
browser.$(...).click
to
$().click
the click command gets called on the element, not the browser.