Welcome to the sui Tech Blog!

日々の開発で得た知見や、実験的な実装を記録する技術ブログです。
TypeScript に関する記事が中心です。

ブログを読む

About me

最新記事

すべての記事を見る

2026/1/25

Playwright

agent-browser

Playwright CLI と agent-browser のどちらがトークン消費量が少ないか比較検証してみた

Playwright CLIとagent-browserで同一操作を行い、トークン消費量を比較しました。スナップショットをファイル出力してGrep検索する設計思想により、Playwright CLIはagent-browserより約40%のトークン削減を達成しています。本記事ではAIブラウザ操作ツールの設計思想の違いがコストに与える影響を検証します。

記事を読む

2026/1/12

Playwright

やはり俺のPlaywrightはまちがっている。

過去のプロジェクトから流用したPlaywrightのコードは「動いて」いました。しかし、偶然ドキュメントを読み直したとき、「動く」と「正しく動く」の間には設計思想の違いがあることに気づきました。page.evaluate()ではなくlocatorを使うべき理由、waitForNavigation()が非推奨である理由。公式ドキュメントには、単なるAPIリファレンスではなく「なぜこの方法が推奨されるのか」が書かれています。時間がない現実の中で、それでもドキュメントを読む価値とは何かを考えます。

AIエージェント向けに最適化されてたagent-browserをPlaywright MCPと比較検証してみた

agent-browserの「Up to 93% less context than Playwright MCP」は本当か気になったので、Yahoo! JAPANを対象にPlaywright MCPと比較してデータ削減率とトークン消費量を検証します。

記事を読む

すべての記事を見る

Shorts

すべて見る

Playwright では要素を待つとき locator.waitFor() が推奨されている

Playwright で特定のセレクタを待つ場合、page.waitForSelector() は非推奨 (discouraged) とされており、代わりに locator.waitFor() を使用することが公式に推奨されています。

// 🤔
await page.waitForSelector('#order-sent');
 
// ☺️
const orderSent = page.locator('#order-sent');
await orderSent.waitFor();

Claude Code でスキルが実行されると isMeta プロパティが付与される

Claude Code の出力で、スキル実行時は必ず Skill ツールが存在し、その後続メッセージとして isMeta: true プロパティが付与される。
skills を利用するように指示したのに isMeta プロパティがない場合、処理を停止するような Hooks の作成も検討できる。

Astroでcharset=utf-8パラメータが削除される場合がある

Astro v5 のプリレンダリングされたエンドポイントでは、カスタム Response ヘッダーが本番ビルド時に無視される仕様がある。開発環境では以下のコードで正常に動作するが、本番ビルドでは charset=utf-8 が削除され、日本語が文字化けする。

const headers = new Headers({
  'Content-Type': 'text/markdown; charset=utf-8',
});
return new Response(body, {
  status: 200,
  headers, // 開発環境では有効、本番ビルドでは無視される
});