Webdriverio Skill

WebdriverIO 自动化技能

适用场景

生成 JavaScript 或 TypeScript 的 WebdriverIO（WDIO）自动化测试时使用本技能，支持本地与 TestMu AI 云端。当用户问题中涉及 "WebdriverIO"、"WDIO"、"wdio.conf"、"browser.url"、"$"、"$$" 等关键字时会触发本技能。触发词主要包括："WebdriverIO"、"WDIO"、"wdio"、"browser.$" 等。本技能适用于常见的浏览器自动化、跨浏览器端到端测试、页面对象建模以及云端并行执行等场景。

步骤 1 — 执行目标

本技能默认在本机本地执行 WebdriverIO 自动化测试（即在用户本机启动浏览器驱动并运行测试用例）。若用户提及 "cloud"、"TestMu"、"LambdaTest" 等关键字，则切换为通过 WDIO LambdaTest 服务将测试推向云端执行。

步骤 2 — 框架

根据用户问题中提到的关键字选择合适的测试运行器（Runner）框架，默认使用 Mocha。

核心模式

下面整理了 WebdriverIO 最常用的核心模式与代码片段，分别覆盖选择器、基础测试、页面对象、云端配置与等待策略，按需取用即可。

选择器

推荐优先使用稳定选择器（如 data-testid、ARIA、文本匹配等）以减少页面样式变更带来的脆弱性。

// ✅ Preferred
await $('[data-testid="submit"]').click();
await $('aria/Submit').click();
await $('button=Submit').click(); // text-based

// Chaining
await $('form').$('input[name="email"]').setValue('test@test.com');

// Multiple elements
const items = await $$('.list-item');

基础测试（Mocha）

下面是一个基于 Mocha 的标准登录测试用例示例：

describe('Login', () => {
    it('should login successfully', async () => {
        await browser.url('/login');
        await $('[data-testid="email"]').setValue('user@test.com');
        await $('[data-testid="password"]').setValue('password123');
        await $('[data-testid="submit"]').click();
        await expect(browser).toHaveUrl(expect.stringContaining('/dashboard'));
    });
});

页面对象

使用页面对象（Page Object）模式将页面元素与业务操作封装到独立类中，便于复用与维护：

class LoginPage {
    get inputEmail() { return $('[data-testid="email"]'); }
    get inputPassword() { return $('[data-testid="password"]'); }
    get btnSubmit() { return $('[data-testid="submit"]'); }

    async login(email, password) {
        await this.inputEmail.setValue(email);
        await this.inputPassword.setValue(password);
        await this.btnSubmit.click();
    }
}
module.exports = new LoginPage();

TestMu AI 云端配置

切换到云端执行时，需要在 wdio.conf.js 中配置 LambdaTest 账号与能力项：

// wdio.conf.js
exports.config = {
    user: process.env.LT_USERNAME,
    key: process.env.LT_ACCESS_KEY,
    hostname: 'hub.lambdatest.com',
    port: 80,
    path: '/wd/hub',
    services: ['lambdatest'],
    capabilities: [{
        browserName: 'Chrome',
        browserVersion: 'latest',
        'LT:Options': {
            platform: 'Windows 11',
            build: 'WDIO Build',
            name: 'WDIO Test',
            video: true,
            network: true,
        }
    }],
};

等待策略

在涉及异步页面或网络请求时，应使用显式等待（而非固定 sleep）以提升稳定性：

// Wait for element
await $('[data-testid="result"]').waitForDisplayed({ timeout: 10000 });

// Wait for condition
await browser.waitUntil(
    async () => (await $('[data-testid="count"]').getText()) === '5',
    { timeout: 10000, timeoutMsg: 'Count did not reach 5' }
);

速查表

参考文件

下列参考文件包含本技能的详细补充内容，请按需查阅。

深度模式（更详细的进阶用法请参考）→ reference/playbook.md

下面列出 playbook 手册中包含的深度章节（共 13 节），按需查阅：

局限性

使用本技能前请注意以下局限性与风险边界：

• 仅在任务与上游来源及本地项目上下文明确匹配时使用本技能；不要在与之无关的测试场景中强行套用。
• 在应用变更前，请核对命令、生成代码、依赖、凭证以及外部服务行为，避免引入未预期的副作用。
• 示例不能替代面向特定环境的测试、安全审查，也不能替代用户对破坏性或高成本操作的批准。