WebdriverIO封装browser到类后出现spec文件加载错误求助

错误信息 #

Unable to load spec files quite likely because they rely on `browser` object that is not fully initialised.

相关代码与配置 #

DashboardPage类代码 #

/* eslint-disable require-jsdoc */
/* eslint-disable no-trailing-spaces */
/* eslint-disable indent */
/* eslint-disable linebreak-style */

//import {browser} from '@wdio/globals';
//const browser = require('@wdio/globals');

/**
 * A class that handles DashboardPage
 */
//export default class DashboardPage {
class DashboardPage {
    /**
    * Opens the browser.
    * @param {int} num1 The first number.
    * @param {int} num2 The second number.
    * @return {int} The sum of the two numbers.
    */
    async open() {  
        await browser.url('https://www.demoblaze.com');
        await browser.pause(200);
    }
}

// export default new DashboardPage();
module.exports = DashboardPage;

测试代码 #

//const DashboardPage = require('../../po/pages/dashboard.page');
import {expect} from 'chai';
import DashboardPage from '../../po/pages/dashboard.page';

const dashboardPage = new DashboardPage();

describe('CSS selectors section', () => {
    describe('DemoBlaze Home Page', () => {
        beforeEach(async () => {              
            await dashboardPage.open();
            // await browser.url('https://www.demoblaze.com');    
            // await browser.pause(200); 
        });

        it('Sony vaio i7 title on card should exist', async () => { 
            const form = await $('div:nth-child(9) > div > div > h4 > a');
            expect(form).to.exist;
        });        
    });
});

wdio.conf.js的spec配置 #

'./src/tests/specs/**/*.js',

package.json配置 #

{
  "name": "automated-testing-with",
  "type": "module",
  "version": "1.0.0",
  "description": "init testing example",
  "main": "index.js",
  "scripts": {
    "test": "mocha",
    "wdio": "wdio run ./wdio.conf.js"
  },
  "repository": {
    "type": "git",
    "url": "https://git.epam.com/jhon_hernandez/automated-testing-with-js"
  },
  "author": "Jhon Hernandez",
  "license": "ISC",
  "devDependencies": {
    "@wdio/allure-reporter": "^8.15.0",
    "@wdio/browser-runner": "^8.14.6",
    "@wdio/cli": "^8.14.6",
    "@wdio/junit-reporter": "^8.15.0",
    "@wdio/local-runner": "^8.15.4",
    "@wdio/mocha-framework": "^8.14.0",
    "@wdio/spec-reporter": "^8.14.0",
    "eslint": "^8.46.0",
    "eslint-config-google": "^0.14.0",
    "geckodriver": "^4.2.0",
    "mocha": "^10.2.0",
    "wdio-geckodriver-service": "^5.0.2"
  },
  "dependencies": {
    "c8": "^8.0.1",
    "chai": "^4.3.7",
    "chromedriver": "^115.0.1",
    "husky": "^8.0.3",
    "mocha": "^10.2.0",
    "mochawesome": "^7.1.3",
    "wdio-chromedriver-service": "^8.1.1",
    "webdriverio": "^8.14.3"
  }
}

解决方法 #

1. 正确导入browser对象 #

项目启用了ES模块（package.json中"type": "module"），需在DashboardPage类中显式导入browser：

import { browser } from '@wdio/globals';

移除注释的导入代码，确保该行生效。

2. 统一ES模块导出格式 #

修改DashboardPage类的导出方式，符合ES模块规范：

export default class DashboardPage {
    // 类内部逻辑保持不变
}

删除module.exports = DashboardPage;，保持模块风格一致。

3. 延迟Page实例化 #

不要在测试文件顶层直接创建Page实例，移到测试钩子（如beforeEach）中，确保browser初始化完成后再实例化：

import { expect } from 'chai';
import DashboardPage from '../../po/pages/dashboard.page';

describe('CSS selectors section', () => {
    describe('DemoBlaze Home Page', () => {
        let dashboardPage;
        
        beforeEach(async () => {              
            dashboardPage = new DashboardPage();
            await dashboardPage.open();
        });

        it('Sony vaio i7 title on card should exist', async () => { 
            const form = await $('div:nth-child(9) > div > div > h4 > a');
            expect(form).to.exist;
        });        
    });
});

核心原因 #

错误本质是WebdriverIO初始化browser对象前，代码已尝试访问它：顶层的new DashboardPage()会在测试框架启动前执行，此时browser未完成初始化；同时Page类未正确导入browser，导致环境无法识别该变量，最终触发初始化错误。

内容的提问来源于stack exchange，提问作者Jhon Hernandez