makeブログにE2Eテスト導入のプロポーザルが発表された。これまでWordPressコアはJestによるテストのサンプルコードしか持たなかったが、本格的なE2Eテストの導入に向けて動き出すようだ。採用されるのはGutenbergプロジェクトで生まれたJest+Puppeteerベースの@wordpress/e2e-test-utilsだと思われる。
E2E（エンド・トゥー・エンド）テストとは？
コードのテストには色々あるが、WordPressではPHPUnitによる自動テストが導入されてきた。テストは結構な量に及び、Ajaxでの動作を確認するための結合テストもPHPUnitを拡張する形で大量に書かれている。
このユニットテスト（および結合テスト）は低レベルでのコードの信頼性を高めるのには役立つが、昨今のJSフレームワークゴリゴリの管理画面で発生する問題には対処しづらい。そこで、E2Eテストと呼ばれるシナリオベースの手法が取られ、ブラウザ上での動作を再現して問題が発生したかどうかをチェックすることができる。
E2Eテストの多くはヘッドレスブラウザと呼ばれるブラウザをコマンドライン経由で動かして実際の操作をエミュレートする。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();上記はPuppeteerのサンプルコードで「ブラウザを開いてページを開き、スクリーンショットを取る」というテストを行っている。WordPressであれば、投稿編集画面で公開時間を未来に設定した場合に公開ボタンは「予約公開」になるか、といったテストが導入されるのだろう。
E2Eテストの導入で何が変わるか
WordPressはそのエディターをはじめとしていくつかの技術が複雑に絡み合ったアプリケーションである。E2Eテストが導入されると、その動作の安定性はより高くなるだろう。
また、コアでE2Eテストの環境が整備されると、先日紹介したwp-envのようにプラグイン＆テーマ開発でも簡単に使えるようになるかもしれない。wp-envではPHPUnitも導入されているし、npmでちょちょいのちょいとテストのための環境を整えることも夢ではなさそうだ。
E2Eテストのユーティリティが揃えば、次のようなテストが容易になるだろう。
- プラグインに依存するプラグインが動作するか（e.g. WooCommerceの決済プラグインで実際に購入を完了するまでが正しく動作するか）
- ユーザーの状態に応じたテスト（e.g. ログインしていないユーザーには「続きを読む」ボタンが表示）
- デザイン変更の検知（e.g. スクリーンショットを撮って差分を比較）
これまではそれぞれの開発者が頑張って実装している状況だったので、コアで統一された手法が開発されればもう少し気軽に導入できるのではないだろうか。
なお、マイルストーンはまだ発表されておらず、協力者やアイデアを募っている段階だ。要望のある人、コントリビュートしたい人はコメント欄に書き込んでみよう。