webdriverio-skill

WebdriverIO 自動化スキル

ステップ 1 — 実行先

デフォルトはローカルです。「cloud」、「TestMu」、「LambdaTest」に言及がある場合は、WDIO LambdaTest service を使用したクラウドになります。

ステップ 2 — フレームワーク

シグナル	テストランナー
デフォルト	Mocha
「Jasmine」	Jasmine
「Cucumber」、「BDD」	Cucumber

基本パターン

セレクター

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

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

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

基本的なテスト（Mocha）

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

ページオブジェクト

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
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,
        }
    }],
};

待機戦略

// 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' }
);

クイックリファレンス

タスク	コマンド
セットアップ	npm init wdio@latest
すべて実行	npx wdio run wdio.conf.js
指定して実行	npx wdio run wdio.conf.js --spec ./test/login.js
テストスイートを実行	npx wdio run wdio.conf.js --suite smoke
並列実行	設定で maxInstances: 5 を指定
スクリーンショット	await browser.saveScreenshot('./screenshot.png')

リファレンスファイル

ファイル	読むタイミング
reference/cloud-integration.md	LambdaTest service、並列実行、capabilities
reference/advanced-patterns.md	カスタムコマンド、レポーター、サービス

詳細なパターン → reference/playbook.md

§	セクション	内容
1	本番環境の設定	マルチ環境、マルチブラウザー設定
2	ページオブジェクトモデル	BasePage、LoginPage、DashboardPage
3	カスタムコマンド	ブラウザーおよび要素コマンド、TypeScript
4	ネットワークモック	DevTools のモック、リクエストの中断、エラーのシミュレーション
5	ファイル操作	アップロード、ダウンロード、ドラッグ＆ドロップ
6	マルチタブ、iFrame、Shadow DOM	ウィンドウハンドル、ネストされたシャドウ
7	ビジュアルリグレッション	画像比較サービス
8	API テスト	Fetch ベース、API と UI の組み合わせ
9	モバイルテスト	Appium service の統合
10	LambdaTest の統合	クラウドグリッド設定
11	CI/CD の統合	GitHub Actions、Docker Compose
12	デバッグクイックリファレンス	よくある 11 の問題
13	ベストプラクティスチェックリスト	14 項目