WebdriverIO Browser.click statement gives is not a function error - automation

Question

I am fairly new to WebDriverIO framework, I was trying to automate below scenario:
const assert = require('assert');
describe('Second Test With WebDriverIO', () => {
it('Click the button for WebDriverIO Page', () => {
browser.url('http://www.kevinlamping.com/webdriverio-course-content/');
var title = browser.getTitle();
assert.strictEqual(title,'Robot Parts Emporium');
//browser.click('.shop-callout a');
$('.shop-callout a').click();
title = browser.getTitle();
assert.strictEqual(title,'Totally Not Evil Sentient Robot - Robot Parts Emporium');
});
});
However, I get an error mentioning "[chrome windows nt #0-0] browser.click is not a function"
But I use $('.shop-callout a').click(); instead of browser.click('.shop-callout a'); then it all works fine.
const assert = require('assert');
describe('Second Test With WebDriverIO', () => {
it('Click the button for WebDriverIO Page', () => {
browser.url('http://www.kevinlamping.com/webdriverio-course-content/');
var title = browser.getTitle();
assert.strictEqual(title,'Robot Parts Emporium');
//browser.click('.shop-callout a');
$('.shop-callout a').click();
title = browser.getTitle();
assert.strictEqual(title,'Totally Not Evil Sentient Robot - Robot Parts Emporium');
});
});
Any help would be appreciated.

Answer 1

Use browser.elementClick(elementId), instead of browser.click(), as this is the correct method name as per webdriver protocol.
See below:-
https://w3c.github.io/webdriver/#element-click
$(selector).click() is a custom method provided by webdriverio and they have used the same method as mentioned above.