これまで、iOSネイティブアプリのE2Eテスト実現のために、Appium+TypeScript環境を構築してきました。
最後に、これまで構築してきた環境にVRT環境を追加します。
webdriverioにのサービスにwdio-image-comparison-serviceという画像回帰テストのサービス（プラグイン的な立ち位置）があります。しかし、こちらのサービスはWebブラウザ向けであり、モバイルネイティブアプリでは動作しません。
そこで、筆者はwdio-native-app-compareを導入し、モバイルネイティブアプリ上でのVRT環境を構築しました。
前提
これまで構築してきたAppium+TypeScript環境についてはこちらの記事をご参考ください。
環境構築
VRT(Visual Regression Testing)の導入
1. wdio-native-app-compareのインストール
モバイルネィティブアプリ向けの画像比較ツールであるwdio-native-app-compareをインストールします。
npm i wdio-native-app-compare-service
2. wdio.conf.tsの更新
wdio.conf.ts内の配列プロパティservicesに以下を追加します。
[
'native-app-compare',
// The options
{
// Mandatory
baselineFolder: join(process.cwd(), './baseline/'),
screenshotPath: join(process.cwd(), '.tmp/'),
// Optional
// See Options for more options
//..
// Some options, see the docs for more
imageNameFormat: '{tag}-{deviceName}-{platformName}-{platformVersion}',
savePerInstance: true,
autoSaveBaseline: true,
blockOutStatusBar: true,
blockOutToolBar: true,
blockOutNavigationBar: true,
isHybridApp: true,
},
]
テストシナリオの更新
テストシナリオを以下のコードに書き換えます。
メソッドの詳細については、こちらをご参考ください。
describe('Hello World!', () => {
it('should display Hello, World!', async () => {
const el = await $("~textField")
const word = "Hello, World!"
await el.setValue(word)
await driver.saveScreen('page')
await driver.saveElement(el, 'el')
});
it('should no diff Element!', async () => {
const el = await $("~textField")
const result = await driver.compareElement(el, 'el')
expect(result.misMatchPercentage).toEqual(0)
});
it('should no diff Page!', async () => {
const result = await driver.compareScreen('page')
expect(result.misMatchPercentage).toEqual(0)
});
});
テストの実行
npx wdio run text/wdio.conf.ts
以上です。
追加編：wdio-native-app-compareのメソッドに型を追加する
wdio-native-app-comparepackageには型定義がないため、コーディングの際に補完が働きません。そこで追加編では、wdio-native-app-compareのメソッドに型情報を追加します。
1. tsconfig.jsonの更新
tsconfig.jsonに型定義ファイルのパスを追加します。
compilerOptionsに配列型のtypeRootsプロパティを追加し、配列の第0要素に"./src/@types"をおきます。
{
"compilerOptions": {
...
"typeRoots": [
"./src/@types"
]
}
}
- 型定義ファイル
wdio.d.tsの作成
tsconfig.jsonに設定したパスを作成します。
作成するパスは、tsconfig.jsonが存在するディレクトリから見た相対パスになります。
mkdir -p ./src/@types
次に型定義ファイルを作成します。
cd ./src/@types
touch wdio.d.ts
-
wdio.d.tsの編集
wdio-native-app-compareのドキュメントを参考にinterfaceを定義します。
// Ref: https://github.com/wswebcreation/wdio-native-app-compare
// Ref: https://github.com/wswebcreation/wdio-native-app-compare/issues/18
declare module 'wdio-native-app-compare-service';
/**
* The save methods return an object like this:
*/
interface SaveResult {
fileName: string
folders: {
actual: string
}
}
/**
* The compare methods return an object like this:
*/
interface CompareResult {
fileName: string
folders: {
actual: string
baseline: string,
diff: string
}
/**
* @param {number} 0.00-100.00(%)
*/
misMatchPercentage: number
}
declare namespace WebdriverIO {
interface Browser {
/**
* With this method you can create a screenshot of an element in the view. You'll need to provide the following options
* @param {WebdriverIO.Element} elemnt Provide the element, so NOT the selector, like for example
* @param {string} tag The tag is the part that is used for determining the image name when it is saved
* @param {object?} options You can provide an object with https://github.com/wswebcreation/wdio-native-app-compare/blob/master/docs/OPTIONS.md#method-options, see options for details
*
* Provide the element, so NOT the selector, like for example
* @example
* browser.saveElement(browser.element('\~your-accessibility-id'), 'name-of-your-file');
* @example
* browser.saveElement($('\~your-accessibility-id'), 'name-of-your-file');
*/
saveElement: (elemnt: WebdriverIO.Element, tag: string, options?: object) => SaveResult
/**
* With this method you can create a screenshot of the view. You'll need to provide the following options
* @param {string} tag The tag is the part that is used for determining the image name when it is saved
* @param {object?} options You can provide an object with https://github.com/wswebcreation/wdio-native-app-compare/blob/master/docs/OPTIONS.md#method-options, see options for details
*
* @example
* browser.saveScreen('name-of-your-file');
*/
saveScreen: (tag: string) => SaveResult
/**
* With this method you can compare a screenshot of an element in the view with a baseline image. It will return a mismatch percentage between the actual element screenshot and the baseline. You'll need to provide the following options
* @param {WebdriverIO.Element} elemnt Provide the element, so NOT the selector, like for example
* @param {string} tag The tag is the part that is used for determining the image name when it is saved
* @param {object?} options You can provide an object with https://github.com/wswebcreation/wdio-native-app-compare/blob/master/docs/OPTIONS.md#method-options, see options for details
*
* @example
* browser.compareElement(browser.element('\~your-accessibility-id'), 'name-of-your-file');
* @example
* browser.compareElement($('\~your-accessibility-id'), 'name-of-your-file');
*/
compareElement: (elemnt: WebdriverIO.Element, tag: string) => CompareResult
/**
* With this method you can create a screenshot of the view. You'll need to provide the following options
* @param {string} tag The tag is the part that is used for determining the image name when it is saved
* @param {object?} options You can provide an object with https://github.com/wswebcreation/wdio-native-app-compare/blob/master/docs/OPTIONS.md#method-options, see options for details
*
* @example
* browser.compareScreen('name-of-your-file');
*/
compareScreen: (tag: string) => CompareResult
}
}
以上です。