WebdriverIO を TypeScript で実行する
WebdriverIO とは
ブラウザをNode.js から自動で操作し、テストを行うことができるJavaScript のフレームワークです。
環境構築
Node.js はインストールされているものとします。
$ node -v v13.2.0 $ npm -v 6.13.1
ディレクトリを作成し、初期化します。
$ mkdir webdriverio-typescript $ cd webdriverio-typescript $ npm init -y
WebdriverIO を追加します。
$ npm install --save-dev @wdio/cli ... $ npx wdio --version 6.0.5
wdio の環境構築
wdio の環境を作成するために以下のコマンドを実行します。すると質問形式で設定を行えます。
$ npx wdio config ========================= WDIO Configuration Helper ========================= ? Where should your tests be launched? local ? Where is your automation backend located? On my local machine ? Which framework do you want to use? jasmine ? Do you want to run WebdriverIO commands synchronous or asynchronous? sync ? Where are your test specs located? ./test/specs/**/*.js ? Which reporter do you want to use? spec ? Do you want to add a service to your test setup? selenium-standalone ? What is the base url? http://localhost
上記のように答えました。テストフレームワークは Jasmine を使います。また、WebdriverIO のライブラリは同期的に行うほうが書くのが楽なため、 sync にしています。
selenium-standalone を選択した場合
この手順は必要ないかもしれません。
wdio.conf.js を以下のように編集します。
exports.config = { ... services: [ ['selenium-standalone', { logPath: 'logs', installArgs: { drivers: { chrome: { version: '80.0.3987.149' }, firefox: { version: '0.26.0' } } }, args: { drivers: { chrome: { version: '80.0.3987.149' }, firefox: { version: '0.26.0' } } }, }] ], ... }
chrome, firefox のバージョンはブラウザによってインストールしているブラウザによって変わると思います。
ここでは Chrome を使うため、browserName の値を chrome に変更します。
exports.config = { capabilities: [{ ... browserName: 'chrome', ... }], }
テストファイルを置くためのディレクトリを作成し、テストファイルを作成します。
$ mkdir -p test/specs/ $ touch ./test/specs/trial-test.js
試しに実行します。
$ npx wdio run wdio.conf.js Execution of 1 spec files started at 2020-03-29T07:41:40.623Z 2020-03-29T07:41:40.728Z INFO @wdio/cli:launcher: Run onPrepare hook 2020-03-29T07:41:43.158Z INFO @wdio/cli:launcher: Run onWorkerStart hook 2020-03-29T07:41:43.159Z INFO @wdio/local-runner: Start worker 0-0 with arg: run,wdio.conf.js [0-0] 2020-03-29T07:41:43.494Z INFO @wdio/local-runner: Run worker command: run [0-0] 2020-03-29T07:41:43.499Z INFO webdriverio: Initiate new session using the ./protocol-stub protocol 2020-03-29T07:41:43.666Z INFO @wdio/cli: [0-0] SKIPPED in firefox - /test/specs/trial-test.js 2020-03-29T07:41:43.666Z INFO @wdio/cli:launcher: Run onComplete hook 2020-03-29T07:41:43.666Z INFO @wdio/selenium-standalone-service: shutting down all browsers Spec Files: 0 passed, 1 skipped, 1 total (100% completed) in 00:00:03 2020-03-29T07:41:43.667Z INFO @wdio/local-runner: Shutting down spawned worker 2020-03-29T07:41:43.922Z INFO @wdio/local-runner: Waiting for 0 to shut down gracefully 2020-03-29T07:41:43.922Z INFO @wdio/local-runner: shutting down
trial-test.js にテストコードを書きます。
describe("Trial Test", function () { it("WebdriverIO のトップページのヘッダタイトルは WebdriverIO であるべき ", function () { browser.url("https://webdriver.io/"); expect(browser.getTitle()).toContain("WebdriverIO"); }); });
再度実行して、テストが通ることを確認します。設定ファイル名が wdio.conf.js であれば、以下のように指定する必要はありません。
$ npx wdio ... [Chrome 19.2.0 darwin #0-0] 1 passing (1.5s) Spec Files: 1 passed, 1 total (100% completed) in 00:00:08 2020-03-29T07:50:52.203Z INFO @wdio/local-runner: Shutting down spawned worker 2020-03-29T07:50:52.454Z INFO @wdio/local-runner: Waiting for 0 to shut down gracefully 2020-03-29T07:50:52.454Z INFO @wdio/local-runner: shutting down
TypeScript に対応する
JavaScript で対応できたので、TypeScript で実行できるようにします。
まずは TypeScript の環境を作ります。
$ npm install typescript $ npx tsc --version Version 3.8.3 $ npx tsc --init message TS6071: Successfully created a tsconfig.json file.
環境に合わせて tsconfig.json を編集します。wdio と Jasmine のコードをコンパイルしてもらうために、以下は必須です。
{ "compilerOptions": { "types": [ "@wdio/sync", "jasmine" ], }, "exclude": [ "node_modules" ], }
コードを書くときにJasmine を認識してもらうため @types/jasmine を追加します。
npm install --save-dev @types/jasmine
@wdio/sync は wdio を追加したときに一緒に含まれているので自分で追加する必要はありません。
次に TypeScrip のファイルを作成します。
$ touch trial-test.ts
trial-test.ts にテストコードを書きます。
describe("Trial Test", () => { it("WebdriverIO のトップページのヘッダタイトルは WebdriverIO であるべき ", () => { browser.url("https://webdriver.io/"); expect(browser.getTitle()).toContain("WebdriverIO"); }); });
コンパイルした結果の出力先を変更するために tsconfig.json を以下のように変更します。先に作った trial-test.js は上書きされるので、置いておきたい人は退避するか、出力先を変更してください（出力先を変更した場合、 wdio.conf.js の設定も変更する必要があるかもしれません）
。
{ "compilerOptions": { ... "outDir": "./test/specs", ... } }
コンパイルが通るか確認します。
$ npx tsc
test/specs/trial-test.js が変わっているか確認します。自分の環境では以下のようになっていました。
"use strict"; describe("Trial Test", function () { it("WebdriverIO のトップページのヘッダタイトルは WebdriverIO であるべき ", function () { browser.url("https://webdriver.io/"); expect(browser.getTitle()).toContain("WebdriverIO"); }); });
実行できるか確認します。問題なければ前回と同じ結果が出ます。
$ npx wdio
コンパイルせずにテストを実行する
最後に、 tsc でコンパイルするのは面倒なので、コンパイルしなくても通るようにします（内部でコンパイルしてくれている？）。
ts-node と tsconfig-paths を追加します。
$ npm install --save-dev ts-node tsconfig-paths + ts-node@8.8.1 + tsconfig-paths@3.9.0
TypeScript ファイルを実行するために wdio.conf.js を開き、jasmineNodeOpts の requires に ts-node/register を追加します。
exports.config = { jasmineNodeOpts: { ... requires: ['ts-node/register'] ... }, }
TypeScript ファイルを見つけるために wdio.conf.js を開き、specs の値を ./test/specs/**/*.ts に変更します。
exports.config = { specs: [ './test/specs/**/*.ts' ], }
コンパイルしたファイルで実行していないか確認するために、test/specs/trial-test.js を削除します。代わりにtrial-test.ts を test/specs/ に移動させます。
実行して確認します。
$ npx wdio
問題なければ今までと同じ結果が表示されるはずです。
