How to ensure webdriverio is really getting page's elements - node.js

Question

I've been facing an issue testing an Vue/Nuxt app with WebdriverIO. Mainly, it my tests are always passing. The following code will have an success execution:
it('should open correct app', () => {
Page.open()
browser.pause(1000)
expect(browser).toHaveTitle('Checkout')
browser.pause(1000)
})
As does this one:
it('should open correct app', () => {
Page.open()
browser.pause(1000)
expect(browser).toHaveTitle('Something Completely Different')
browser.pause(1000)
})
My first guess is that Page.open() is loading asynchronous, and the expect condition were being verified before the element existed. But if I try make the function asynchronous, to use await:
it('should open correct app', async () => {
await Page.open()
await browser.pause(1000)
await expect(browser).toHaveTitle('Checkout')
await browser.pause(1000)
})
it gives me an error... of connection.
[Chrome 100.0.4896.60 linux #0-0] 1) Yourapp should open correct app
[Chrome 100.0.4896.60 linux #0-0] net::ERR_CONNECTION_REFUSED at http://localhost:3000/
[Chrome 100.0.4896.60 linux #0-0] net::ERR_CONNECTION_REFUSED at http://localhost:3000/
[Chrome 100.0.4896.60 linux #0-0] Error: net::ERR_CONNECTION_REFUSED at http://localhost:3000/
It happens because my tests are configured with an initialization of Nuxt server on the webdriver config hooks, that is basically inspired in that example:
wdio.conf.ts:
...
async onPrepare () {
if (process.env.NUXT_ENV_CI !== 'true') {
return
}
const rootDir = path.resolve(__dirname, '.')
const nuxtConfig = {
head: {
title: 'Yourapp'
},
dev: false,
rootDir,
modules: ['bootstrap-vue/nuxt']
}
this.nuxtInstance = new nuxt.Nuxt(nuxtConfig)
await new nuxt.Builder(this.nuxtInstance).build()
// its based on Express ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
await this.nuxtInstance.server.listen(3000, 'localhost')
},
onComplete () {
if (process.env.NUXT_ENV_CI !== 'true') {
return
}
this.nuxtInstance.close()
}
...
and, despite it has been issued and corrected here https://github.com/webdriverio/webdriverio/issues/4042 looks like the asynchronous function is running after the onComplete hook is triggered. That's an issue I need the most to fix, since I'm using Browserstack Automate to test in multiple browsers in CI/CD and it only works when those hooks are correctly executed .
Anyway, I handled that locally running npm run dev on another terminal, what makes the tests run again, but they keep always passing successfully even when they shouldn't .
I'm using
Node 16.14.2
NPM 8.5.0
WebdriverIO 7.16.14
Nuxt 2.15.8
Ubuntu 20.04.4
Example code:
https://github.com/kaabsimas/issue-example