JS WebdriverIO TypeError: browser.getMetrics is not a function - google-chrome-devtools

Question

I'm trying to reproduce an example site https://webdriver.io/docs/devtools-service, but i get an error "TypeError: browser.getMetrics is not a function"
const assert = require('assert')
describe('JSON.org page', () => {
before(() => {
browser.enablePerformanceAudits()
})
it('should load within performance budget', () => {
/**
* this page load will take a bit longer as the DevTools service will
* capture all metrics in the background
*/
browser.url('http://json.org')
let metrics = browser.getMetrics()
assert.ok(metrics.speedIndex < 1500) // check that speedIndex is below 1.5ms
let score = browser.getPerformanceScore() // get Lighthouse Performance score
assert.ok(score >= .99) // Lighthouse Performance score is at 99% or higher
$('=Esperanto').click()
metrics = browser.getMetrics()
assert.ok(metrics.speedIndex < 1500)
score = browser.getPerformanceScore()
assert.ok(score >= .99)
})
after(() => {
browser.disablePerformanceAudits()
})
})
My package.json file:
{
"name": "devtools",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "wdio"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#wdio/cli": "^7.20.7",
"#wdio/devtools-service": "^7.20.7",
"#wdio/local-runner": "^7.20.7",
"#wdio/mocha-framework": "^7.20.7",
"#wdio/spec-reporter": "^7.20.7",
"chromedriver": "^103.0.0",
"wdio-chromedriver-service": "^7.3.2"
},
"dependencies": {
"uuid": "^8.3.2"
}
}
My wdio.conf.js file:
services: ['chromedriver','devtools'],
but i get an error in Terminal:
[0-0] TypeError in "JSON.org page.should load within performance budget"
TypeError: browser.getMetrics is not a function
at Context.<anonymous> (C:\Users\User\PhpstormProjects\DevTools\test\specs\1.js:15:31)
at Context.executeAsync (C:\Users\User\PhpstormProjects\DevTools\node_modules\#wdio\utils\build\shim.js:333:27)
at Context.testFrameworkFnWrapper (C:\Users\User\PhpstormProjects\DevTools\node_modules\#wdio\utils\build\test-framework\testFnWrapper.js:51:32)

Answer 1

The problem was in asynchronous mode, did this:
const assert = require('assert')
describe('JSON.org page', async () => {
before(() => {
browser.enablePerformanceAudits()
})
it('should load within performance budget', async () => {
/**
* this page load will take a bit longer as the DevTools service will
* capture all metrics in the background
*/
await browser.url('http://json.org')
let metrics = browser.getMetrics()
assert.ok((await metrics).speedIndex < 1500) // check that speedIndex is below 1.5ms
let score = await browser.getPerformanceScore() // get Lighthouse Performance score
assert.ok(score >= .90) // Lighthouse Performance score is at 99% or higher
})
after(async () => {
await browser.disablePerformanceAudits()
})
})