PlaywrightとTestCafe比較

こんにちは、フロントエンドエンジニアの菅野です。

E2Eフレームワーク,ライブラリといえば Selenium,Cypress,Puppeteer,TestCafe,Playwright などたくさんありますが、 今回は私もプロジェクトで導入しているTestCafeと昨年にリリースされたPlaywrightについて簡単に比較してみたのでお話したいと思います。

TestCafe

• 開発会社：Developer Express Inc.
• リリース年：2016年
• Github：https://github.com/DevExpress/testcafe

Playwright

• 開発会社：Microsoft
• リリース年：2020年
• Github：https://github.com/microsoft/playwright

どちらも最新リリースが10日以内(8/23時点)なので活発に開発されています。

PlaywrightはMicrosoftが開発しているので今後開発されなくなるリスクは少なそうに思います。

サポートブラウザ

	TestCafe	Playwright
Chrome	○	○
Safari	○	○
Firefox	○	○
Opera	○	×
Edge	○	○ ※Chromiumのみ
IE11	○	×
Chrome mobile	○	○
iOS Safari	○	○

機能 / 特徴

	TestCafe	Playwright
ヘッドレスモード	○	○
TypeScriptサポート	○	○
同時テスト実行	○	○
デバッグモード	○	○
モバイル実機テスト	○	×
コード生成	×	○

他にもたくさんあるのですがいくつか抜粋して書いてみました。

TestcafeではスマホでURLやQRコードを読み込めば実機上でテストが実行できる機能があり、 Playwrightにはテストケースをちまちま書かなくてもユーザーの操作からコードを生成してくれる機能があったりと、それぞれに特徴や強みがあるのが分かります。

コード / 実行時間

簡単にですがスクリーンショットを撮るコードで違いを見てみたいと思います。

TestCafe

import { Selector } from 'testcafe';

fixture`screenShot`
  .page('https://example.com');
test('top', async t => {
  await t
    .takeScreenshot({
      path: `${t.browser.name}/testcafe/top.png`
    });
});

Playwright

const { chromium } = require('playwright')

(async () => {
  const browser = await chromium.launch({
    headless: false
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: `./screenshots/Chrome/playwright/top.png` });
  await browser.close();
})();

Playwrightではブラウザコンテキストとコンテキストの中でpageを生成する記述があるため、TestCafeと比べるとコードが少し長くなってしまいます。

あとは、browser.close();を書くことでブラウザを閉じ処理を終了するのですが、TestCafeは記述を書かなくても自動でブラウザを閉じてくれるのでそういう細かいところで便利だなと思います。

続いて実行時間を比べてみます。

今回はブラウザUIを表示させて時間を計測したかったので、Playwrightではデフォルトでtrueとなっているheadlessモードをfalseにしています。

	TestCafe	Playwright
Time	10183.922ms	2313.172ms

実行時間はPlaywrightが7秒以上速い結果となりました。

TestCafeはブラウザが立ち上がるまでに特に時間がかかってしまうのでそこで大きく差が出てしまいました。

まとめ

Playwrightは学び始めたところでまだまだ分かっていない部分も多いのですが、 比較をしてみると互いの長所短所が分かりやすくなりますね。

ユーザー操作からコードを生成してくれるPlaywrightはメンテナンスのしやすさからフォームテストなどのテストケースが多い場合に向いてると思います。

TestCafeはサポートブラウザが充実しているのでスマホ実機、IEなど様々な環境でテストを行いたい場合に選ぶと良さそうです。

プロジェクトによってどういったテストを行いたいのか、検証範囲はどこまでなのかなどがあると思いますので、ぜひそれぞれにあったフレームワーク,ライブラリを選んでみてください。

株式会社Wizではエンジニアを募集しています！ ↓↓↓興味ある方はぜひご覧ください！↓↓↓ careers.012grp.co.jp