QR Send

スマホとPCのChrome間で、URLやテキストをQRコード1回のペアリングで送り合える自作Chrome拡張。アカウント不要・無料。

使ってみる →

Playwright

テスト自動化

Playwright 1.63のPerfettoレポーターとduration waterfallで遅いテストを追う

Playwright 1.63.0で、テストが遅い理由を追うための証跡が一段扱いやすくなりました。組み込みのPerfettoレポーターはTrace Event Formatを書き出し、HTMLレポートにはテストステップごとのduration...
AI活用

Claude CodeでE2Eテストを自動生成させようとしてルールとhooksをブチこみまくったら、逆に仕事してくれなくなった話

Claude CodeのCLAUDE.mdとhooksにルールを詰め込みまくったら、AIが探索する前に止まってしまいました。公式ドキュメントの「hooksは決定的、CLAUDE.mdは助言」という位置づけの違いに気づいてCLAUDE.md/skills/hooksの3層構造に整理し直したら、Playwright E2Eテスト自動生成の仕組みを別リポジトリへ横展開できるようになった話です。
テスト自動化

Playwrightで「ファイルがダウンロードできたか」をテストする:waitForEvent(‘download’)とsaveAs()、Seleniumのprefs設定はもう要らない

Seleniumのdownloadダイアログをprefsでいじる設定は、Playwrightでは不要です。waitForEvent('download')とsaveAs()の基本形、複数ダウンロード、ファイル内容検証までまとめました。
テスト自動化

見た目の崩れをtoHaveScreenshot()で止める:CIで安定するVisual Regression Testingの始め方

PlaywrightのtoHaveScreenshot()で見た目の崩れを検知するVisual Regression Testing入門。初回実行のベースライン生成、CIで真っ赤になる環境差対策(公式Dockerイメージ)、mask/animationsでのノイズ除去、maxDiffPixelRatioを最後に触る順番まで解説します。
テスト自動化

「たまに落ちるテスト」を勘で直さない:–repeat-eachとFlakyタグで本当に不安定なテストを先に特定する

テストが1回落ちただけで「flakyだから」とretriesを足して蓋をしていませんか。Playwrightの--repeat-eachでテストの不安定さを数値化し、HTMLレポートのFlakyタグで候補を絞ってから、waitForTimeoutとCSSセレクタという2大原因を潰す順番を紹介します。
AI活用

MCPが2026-07-28でステートレスな仕様に変わった:OAuth/OIDC強化とApps/Tasksが拡張機能に切り出された話

普段MCPサーバーは npx @playwright/mcp@latest のようにコマンド一発で立ち上げて、あとは黙って動いてくれるものだと思っていました。ところが2026年7月28日付でMCP(Model Context Protoco...
AI活用

Playwright MCPの「プロファイル」を理解する:persistent(既定)/isolated/extensionの3モードでログイン状態は毎回消えるのか残るのか

Playwright MCPは既定でpersistentプロファイルを使い、ワークスペースごとにCookieやログイン状態を自動保存します。isolated/extensionモードとの違い、storage-stateでの初期状態注入、名前付きセッション管理がまだfeature request段階である点まで整理しました。
テスト自動化

CIのPlaywrightが遅いのはworkersの数じゃない:–shardが均等に「分けてくれない」理由

「shardを増やしたのにCIが速くならない」を素直に眺めると、大抵1つのshardだけが突出して遅いことに気付きます。workers・fullyParallel・--shardという別レイヤーの3つを整理し、shardがなぜ均等に分割してくれないのかを一次情報で確認しました。
テスト自動化

PlaywrightのテストでTypeScriptに最初につまずくところ:Cannot find module(TS2307)を順番に片づける

import { test } from '@playwright/test' が赤線、自作ヘルパーが@/utilsで読めない。Playwright + TypeScriptで1年目がテストのロジックより先につまずくCannot find moduleを、原因ごとに切り分けて片づけます。
AI活用

AIに書かせたテストをリポジトリのどこに置くか:tests-ai/で分けてCIを止めない運用にする

AIに書かせたPlaywrightテストは、レビューを通しても一定割合は不安定です。tests-ai/でディレクトリを分け、retriesでフレークを吸収し、不安定なものは消さず一時skipして再生成キューに回す。CIを止めない運用ルールをコード付きでまとめました。