← レポート一覧
TESTER ARMY / E2E / ELI5

e2e: やりたいことを書くと
AI が画面を操作してくれる
E2E テストフレームワーク

どのボタンを押すかは AI にまかせ、人は目的を書きます。Web とスマホアプリを、TypeScript の同じ書き方でテストできます。

1 / ちがい

これまでのテストと e2e の違い

e2e は TesterArmy が作っているオープンソースの E2E テストフレームワークです(npm パッケージ名 e2e、Apache-2.0)。

これまでは 1 手ずつ「どこを押すか」を書いていました。e2e では 「何をしたいか」を書くと、AI が画面を見て操作します。

これまで (Playwright など) click('#btn-upgrade') click('.plan-card:nth(2)') fill('#coupon', '') click('button.submit') ↑ 1 手ずつ「どこを押すか」を書く ボタンの id が変わると壊れる e2e 「Pro プランに  アップグレードして」 AI が画面を見る Pro にする 見た目が多少変わっても動く
押し方は AI、目的は人が書きます。
2 / 書き方

AI とふつうのコードを 1 本に混ぜて書く

あいまいな操作や確認は agent(AI)に、正確に確かめたい所は screen / expect(いつものコード)に書きます。書き味は Playwright に近いです。

// tests/checkout.e2e.ts test('Pro にアップグレード', async ({ app, agent, screen }) => { await app.open('/settings/billing'); await agent.act('upgrade the workspace to the Pro plan'); await agent.assert('the invoice preview shows a prorated amount'); await expect(screen.getByRole('status')).toContainText('Pro'); });
AI

agent.act / assert / extract

act は目的に向けて操作、assert は画面が条件を満たすか判定、extract は画面から値を取り出します。

コード

screen / expect

role やテキストで要素を探して確かめる、確定的なチェックです。AI は呼びません。

あいまいな所は AI、厳密な所はコードで確かめます。
3 / キャッシュ

2 回目からは AI を呼ばない

agent.act の操作は、後のチェックが通ると録画されます。次からは録画を再生するだけなので、AI の呼び出しは 0 回です。

1 回目 AI が考えて操作 後の確認が OK 操作を録画して保存 2 回目 録画を再生するだけ AI 呼び出し 0 回 → 速い・安い 画面が 変わった 再生… ! 続きを AI が引き継ぐ テストは止まらない

実行結果にはこう出ます: Cache 4 replayed · 1 handed off · 1 missed

キャッシュされるのは act だけです。assert と extract は毎回 AI が判定します。日時入りのメールアドレスのように毎回変わる値は、unique() で包むと再生できます。

速くて安いのは録画を再生できる間だけ。画面が変わると AI が続きを引き継ぎます。
4 / 保存場所

録画はどこに保存されるか

プロジェクトのルート(e2e.config.ts がある所)の .e2e/cache/ に、1 ステップ 1 ファイルの JSON で保存されます。

my-app/ ├ e2e.config.ts ├ tests/ └ .e2e/cache/ 3f9a…c1.json ← 1 ステップ 8b20…7e.json = 1 ファイル 自分の PC 再生する + 記録する (read-write) CI 再生だけ (read-only)。でも中身は空 .gitignore に入るので、初期設定のままでは CI に届かない
入っているもの

操作の手順と、終わりの画面のチェック

押した要素の特徴(role / name / test id)、入力した文字、終了時の URL と出現・消滅した要素。

入っていないもの

プロンプト、スクショ、Secret の値

ただし Secret 以外の入力値はそのまま入ります。共有する前に中身を確認します。

初期設定
e2e init が .e2e/cache/ を .gitignore に入れます。CI は read-only(再生だけ)ですが、中身が空なので CI では毎回 AI が動きます。
CI でも効かせる
.gitignore から外してコミットし、PR で記録の差分をレビューします。
古い録画に気づく
--strict-cache を付けると、再生できない録画があるときに AI に黙って引き継がせず、テストを失敗させます。
URL が変わる環境
PR ごとにプレビュー URL が変わるなら app.identity を固定します。キャッシュキーに URL が入るためです。
変更・確認
場所は cache: { dir: '...' } で変えられます。npx e2e cache ls / stats / clear で一覧・件数・削除。
録画は署名されていないので、共有するならテストコードと同じくレビューします。
5 / 見せるもの

AI に見せるもの・見せないもの

AI に渡すのは、画面の要素の「役割・名前・テキスト」の要約です。HTML や cookie は渡しません。

実際の画面 <div class="x9"> cookie: sid=… password: ●●●● button "Pro にする" text "請求額 ¥980" ランナー で絞る AI が受け取る button "Pro にする" text "請求額 ¥980" textbox password [masked] HTML・cookie・ヘッダー・ 環境変数は渡さない

パスワードは Secret にすると、AI には名前しか渡らず、入力はテストランナー自身が行います。スクリーンショットは、テキストの要約で足りないときだけ使います。

AI は画面を読むだけで、秘密の値には触れません。
6 / 動く場所

どこで動くか

e2e Web 中身は Playwright iOS シミュレータ Android エミュレータ 実機も可
CI / PR

PR ごとに実行

GitHub Actions などで実行し、@e2e-dev/github で結果を PR にコメントします。

モデル

AI は持ち込み

API キー、OpenRouter、Vercel AI Gateway、ChatGPT / Copilot / SuperGrok のサブスク、ローカルモデル。

エージェント

AI にテストを書かせる

コーディングエージェント用のスキルと e2e mcp サーバーがあります。

移行

既存ツールから

Playwright / Cypress / Selenium / Detox / Maestro 向けの移行ガイドがあり、1 ファイルずつ移せます。

Web もスマホも、同じ書き方でテストできます。
7 / 注意

使う前に知っておくこと

向いている

UI がよく変わるアプリ

セレクタの保守がつらいとき。「購入できる」など業務の流れを確かめたいとき。Web とスマホを同じ書き方に揃えたいとき。

注意

まだ 1.0 前

API と設定は変わりえます。AI ステップはトークン代がかかります(assert は毎回)。厳密な値は expect で確かめます。CLI は匿名の利用統計を送ります(E2E_TELEMETRY_DISABLED=1 で停止)。

8 / 始め方

試すなら 2 行

Node.js 22.12 以上が必要です。init で Web かモバイルか、使うモデルを選ぶと、設定ファイルとサンプルのテストができます。

npx e2e init # 設定とサンプルを作る npx e2e run # 実行
出典
← レポート一覧