EY-Office ブログ

EY-Office React教育でのE2Eテストツールの遍歴

EY-OfficeのReact教育の中で(自動)テスティングの教育も行っています、テスティング教育ではユニットテストとE2Eテストの講義と実習を行っています。先日、E2Eテストで使っていたjest-puppeteerの開発(メンテナンス)が2020年10月で終了していることを知り驚愕しました!

悪夢

過去に使って来たE2Eテストツールの遍歴

Nightmare

作りながら学ぶ React 入門を書いた2017年当時にはこのサイトに書かれているように多数のE2Eテストツールがありました。 「作りながら学ぶ React 入門」では、環境構築が簡単でテストコードの書きやすいツールとして Nightmare を選びました。

当時はPhantomJSの開発が停滞し、まだPuppeteerは出てきてない時代でした。
NightmareはElectronをヘッドレスにしたツールで人気がありましたが、PhantomJSのようにいつか開発が止まるのではとの思いもありましたが、「作りながら学ぶ React 入門]」ではGitHubにサポートページを作ったのでなんとかサポートできるるだろうと思っていました。

そして、Nightmareは2019年4月に開発終了しました 😭

Puppeteer(jest-puppeteer)

現在のEY-OfficeのReact教育ではReactプロジェクトの作成にはcreate-react-appを使っています。create-react-appはテストツールJestをインストールしてくれるので、JestとPuppeteerを繋ぐ jest-puppeteerを使いE2Eテストを書くことにしました。

Puppeterはブラウザー自動化ツールとして人気ですし、Jestも人気のあるJavaScriptテスティングフレームワークです。これでしばらくは安泰だと思っていたのですが、まさかそれを接続するjest-puppeteerの開発が終了してしまうとは・・・😭

Playwright

しかし、捨てる神あれば拾う神ありという言葉通り、Playwrightというツールが開発されていました !!

Playwrightは、マイクロソフトを中心に開発されているオープンソースのプロジェクトで、なんとAPIはPuppeter(jest-puppeteer)の上位互換です !
現在のPuppeter用E2Eテストコードもごく僅かな修正で動きました 😄

さらにPlaywrightは、Chrome(Chromium)に加え、Safari(WebKit)、Firefoxを使ってE2Eテストを書けます。マイクロソフトが開発の中心になっているので直ぐに止める事はないと思います(思いたい・・・お願い・・・🙏)。

- about -

EY-Office代表取締役
・プログラマー
吉田裕美の
開発者向けブログ