アサーション

WDIOテストランナーには、ブラウザや（Web）アプリケーション内の要素のさまざまな側面に対して強力なアサーションを実行できる組み込みのアサーションライブラリが付属しています。これは、Jests Matchersの機能を、E2Eテストに最適化された追加のマッチャーで拡張します。例：

const $button = await $('button')
await expect($button).toBeDisplayed()

または

const selectOptions = await $$('form select>option')

// make sure there is at least one option in select
await expect(selectOptions).toHaveChildren({ gte: 1 })

完全なリストについては、expect APIドキュメントを参照してください。

Chaiからの移行

Chaiとexpect-webdriverioは共存でき、いくつかのマイナーな調整でexpect-webdriverioへのスムーズな移行を実現できます。WebdriverIO v6にアップグレードした場合、デフォルトでexpect-webdriverioのすべてのアサーションにすぐにアクセスできます。これは、グローバルにexpectを使用する場合は常にexpect-webdriverioアサーションを呼び出すことを意味します。ただし、injectGlobalsをfalseに設定した場合、またはグローバルなexpectをChaiを使用するように明示的にオーバーライドした場合は除きます。この場合、expect-webdriverioパッケージを必要な場所に明示的にインポートせずに、expect-webdriverioアサーションにアクセスすることはできません。

このガイドでは、ローカルでオーバーライドされている場合にChaiから移行する方法と、グローバルにオーバーライドされている場合にChaiから移行する方法の例を示します。

ローカル

Chaiがファイルに明示的にインポートされていると仮定します。例：

// myfile.js - original code
import { expect as expectChai } from 'chai'

describe('Homepage', () => {
    it('should assert', async () => {
        await browser.url('./')
        expectChai(await browser.getUrl()).to.include('/login')
    })
})

このコードを移行するには、Chaiのインポートを削除し、代わりに新しいexpect-webdriverioアサーションメソッドtoHaveUrlを使用します

// myfile.js - migrated code
describe('Homepage', () => {
    it('should assert', async () => {
        await browser.url('./')
        await expect(browser).toHaveUrl('/login') // new expect-webdriverio API method https://webdriverio.dokyumento.jp/docs/api/expect-webdriverio.html#tohaveurl
    });
});

同じファイルでChaiとexpect-webdriverioの両方を使用したい場合は、Chaiのインポートを維持し、expectはデフォルトでexpect-webdriverioアサーションになります。例：

// myfile.js
import { expect as expectChai } from 'chai'
import { expect as expectWDIO } from '@wdio/globals'

describe('Element', () => {
    it('should be displayed', async () => {
        const isDisplayed = await $("#element").isDisplayed()
        expectChai(isDisplayed).to.equal(true); // Chai assertion
    })
});

describe('Other element', () => {
    it('should not be displayed', async () => {
        await expectWDIO($("#element")).not.toBeDisplayed(); // expect-webdriverio assertion
    })
})

グローバル

expectがグローバルにオーバーライドされてChaiを使用していると仮定します。 expect-webdriverioアサーションを使用するには、「before」フックでグローバルに変数を設定する必要があります。例：

// wdio.conf.js
before: async () => {
    await import('expect-webdriverio');
    global.wdioExpect = global.expect;
    const chai = await import('chai');
    global.expect = chai.expect;
}

これで、Chaiとexpect-webdriverioを一緒に使用できます。コードでは、次のようにChaiとexpect-webdriverioアサーションを使用します。例：

// myfile.js
describe('Element', () => {
    it('should be displayed', async () => {
        const isDisplayed = await $("#element").isDisplayed()
        expect(isDisplayed).to.equal(true); // Chai assertion
    });
});

describe('Other element', () => {
    it('should not be displayed', async () => {
        await expectWdio($("#element")).not.toBeDisplayed(); // expect-webdriverio assertion
    });
});

移行するには、各Chaiアサーションをゆっくりとexpect-webdriverioに移動します。すべてのChaiアサーションがコードベース全体で置き換えられたら、「before」フックを削除できます。 wdioExpectのすべてのインスタンスをexpectに置き換えるグローバル検索と置換により、移行が完了します。