WebdriverIO+Mocha环境下Page Object未执行的问题求助

问题背景 #

使用WebdriverIO 6.14.13 + Mocha编写测试，采用Page Object模式封装了removeNotifications.js页面对象，但调用后测试失败，所有封装的操作均未执行。

原页面对象代码 #

class clearNotifications {
    get closeTheCmp() {
        const cmpDismissal = $('~ACCEPT AND CLOSE');
        if (cmpDismissal.isExisting()) {
                cmpDismissal.click();
                cmpDismissal.waitForExist({ reverse: true });
        }
    }
    get allowNotifications() {
        const notificationsDismissal = $('~Allow');
        if (notificationsDismissal.isExisting()) {
                notificationsDismissal.click();
                notificationsDismissal.waitForExist({ reverse: true });
        }
    }
    get skipToContent() {
        const skipButton = $('~SKIP');
        skipButton.waitForExist({timeout: 50000});
        skipButton.isExisting();
        skipButton.click();
    }
}
export default new clearNotifications();

原测试调用代码 #

var clearNotifications = require ('../pages/removeNotifications.js');

describe('testing the app cmp.....', () => {
    it('Close CMP, Notifications and Skip to content...', async () => {
        await clearNotifications.closeTheCmp();
        await clearNotifications.allowNotifications();
        await clearNotifications.skipToContent();
    });
});

错误原因 #

核心问题是使用**get访问器**定义操作逻辑，而非异步方法：

• get访问器是同步机制，但WebdriverIO的所有元素操作（isExisting()、click()、waitForExist()）均为异步Promise操作，未添加await时这些操作不会实际执行。
• 测试脚本中虽然用了await，但get访问器不返回Promise，await无法生效，导致逻辑未按预期触发。

修复方案 #

将页面对象中的get替换为异步方法，并对所有WebdriverIO异步操作添加await：

修正后的页面对象代码 #

class clearNotifications {
    async closeTheCmp() {
        const cmpDismissal = $('~ACCEPT AND CLOSE');
        if (await cmpDismissal.isExisting()) {
                await cmpDismissal.click();
                await cmpDismissal.waitForExist({ reverse: true });
        }
    }
    async allowNotifications() {
        const notificationsDismissal = $('~Allow');
        if (await notificationsDismissal.isExisting()) {
                await notificationsDismissal.click();
                await notificationsDismissal.waitForExist({ reverse: true });
        }
    }
    async skipToContent() {
        const skipButton = $('~SKIP');
        await skipButton.waitForExist({timeout: 50000});
        // waitForExist已确保元素存在，可移除isExisting检查
        await skipButton.click();
    }
}
export default new clearNotifications();

测试脚本说明 #

原测试脚本无需修改，因为已使用await调用方法，修正后的方法返回Promise，await会正确等待操作完成。

内容的提问来源于stack exchange，提问作者Darren Harley