kiro-cli + playwright-cli で QuickSight のUIを自動テストしてみた

Last updated at 2026-07-06Posted at 2026-07-05

背景・目的

やりたいのは、QuickSight ダッシュボードの UI 自動テストです。ダッシュボードは目視確認に頼りがちですが、更新のたびに毎回人が開いて確認するのは手間がかかり、見落としも起きます。これを自動化できれば、リグレッション（意図しない表示崩れ・数値の異常）を早期に検知できます。

ただし QuickSight のダッシュボードは JavaScript でレンダリングされる SPA（Single Page Application：初回に読み込んだページ上で、JavaScript が動的に画面を描き替えるWebアプリのUI形態）で、単純な HTTP フェッチでは中身が取れません。自動テストするには、実ブラウザで描画された状態を操作・検証する必要があります。そこで、実ブラウザを操作できる Playwright を、ターミナルから使える playwright-cli として kiro-cli（Kiro のターミナル版）に組み込むアプローチを取りました。

具体的に確認したいのは、次の4点です。これらを人手をかけずにチェックできる状態を目指します。

数字が正しく表示されているか
画面が崩れていないか
フィルターをかけたら数字が変わるか
画面キャプチャを自動で取得できるか

この記事では、その第一歩として、kiro-cli への playwright-cli スキル導入から、QuickSight ダッシュボードへの認証（AWS SSO 前提）、最小のUIテスト（数値表示チェック＋キャプチャ）を1本作り、最後にスキル化して繰り返し使えるようにするところまでを記録します。

まとめ

項目	内容
これは何	kiro-cli（Kiro のターミナル版）から playwright-cli で実ブラウザを操作し、QuickSight ダッシュボードのUIを自動テストする手法
何ができる	①数値が表示されているか ②画面が崩れていないか ③フィルタで数値が変わるか ④キャプチャ取得。いずれも実現可能
スキル導入	`~/.kiro/skills/playwright-cli/` に SKILL.md + references を配置するだけ（IDEのようなコマンドパレットは不要）
認証の要点	QuickSight は独自セッション層を持つため、ログイン済みの実ブラウザに attach する方式が有効
認証方式の汎用性	Playwright はログイン方式を問わない。AWS SSO（IAM Identity Center）でログイン済みのブラウザをそのまま使える
要素の指定	ref（e5等）ではなく role + アクセシブル名。QuickSight はレンダリングのたびに ref が変わるため
スキル化	ワークフローを quicksight-ui-test スキル化し、kiro-cli のエージェントから呼び出せる

概要

用語の整理

本題に入る前に、記事で繰り返し出てくる2つの用語を補足します。

SPA（Single Page Application）: 初回に1つのHTMLを読み込んだあと、ページ遷移せずに JavaScript が画面を動的に描き替えるWebアプリのUI形態。QuickSight のダッシュボードもこれにあたる。単純な HTTP フェッチでは初期HTMLしか取れず、描画後の中身が読めないため、実ブラウザでの操作が必要になる。
アクセシブル名（accessible name）: スクリーンリーダー等の支援技術が要素を識別するために使う「その要素の名前」。ボタンやリンクのラベル文字列、aria-label などから決まる。Playwright の getByRole('button', { name: '...' }) の name はこのアクセシブル名を指し、画面上の見た目のテキストとおおむね一致する。

playwright-cli とは

playwright-cli は、Microsoft の Playwright をターミナルから操作するCLIです。公式リポジトリでは「CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.」と説明されています。

This package provides CLI interface into Playwright. If you are using coding agents, that is the best fit.
https://github.com/microsoft/playwright-cli

上記を意訳すると、Playwright の操作をCLIとして提供するパッケージであり、コーディングエージェントから使うのに最適、とされています。公式は、コーディングエージェントが MCP よりCLI＋スキルを好む理由として「トークン効率」を挙げています。大きなツールスキーマや冗長なアクセシビリティツリーをモデルのコンテキストに読み込ませず、簡潔なコマンドで動けるためです（同 README）。実ブラウザ（Chromium 等）を起動して操作するため、JS レンダリングのページも中身を読み取れます。

kiro-cli では、この playwright-cli を「スキル」として組み込むことで、エージェントがブラウザ自動化コマンドを実行できるようになります。動作要件は Node.js 18 以降です（同 README）。

kiro-cli のスキルの仕組み

Kiro のスキルは、SKILL.md を所定のフォルダに置くだけで認識されます。kiro-cli には Kiro IDE のような「Install Skill from URL」コマンドパレットはありません。では、その「所定のフォルダ」はどこかというと、公式ドキュメントに次のように説明されています。

Skills can be stored in two places: .kiro/skills/（Workspace スコープ）と ~/.kiro/skills/（Global スコープ）。When skills share the same name, workspace skills take priority over global skills.
https://kiro.dev/docs/cli/skills/

上記を意訳すると、スキルの置き場所は2つあり、プロジェクト単位の .kiro/skills/ と、全プロジェクト共通の ~/.kiro/skills/ です。同名のときはワークスペース側が優先されます。デフォルトエージェントは両方を自動ロードします。

そして、その置き場所に作るスキルの中身は「1スキル = 1フォルダ」が基本構成で、SKILL.md（必須）に加えて、任意で references/（参照ドキュメント）を同梱します。

SKILL.md が権限を付与する

playwright-cli スキルの SKILL.md は、先頭のフロントマターでエージェントに実行権限を付与します。

---
name: playwright-cli
description: Automate browser interactions, test web pages and work with Playwright tests.
allowed-tools: Bash(playwright-cli:*) Bash(npx:*) Bash(npm:*)
---

allowed-tools がエージェントに playwright-cli / npx / npm の bash 実行を許可する実体です。

認証の壁と考え方

QuickSight は認証で守られた SPA です。しかも「認証プロバイダ（AWS SSO / IAM Identity Center など）でサインイン → QuickSight 側が独自のセッションを発行」という二段構えになっています。スクリプトから真新しいブラウザで開くと、この独自セッションが無いためサインイン画面に飛ばされます。

考え方の要点は、認証処理を自動化で再現しようとせず、既にあるセッションを流用することです。ブラウザ自動化には主に2方式があります。

storageState 方式: ログイン済みのブラウザ状態（Cookie 等）をファイルに保存し、使い捨てブラウザに読み込ませる
attach 方式: 既にログイン済みの実ブラウザにそのまま接続する

今回の QuickSight のように独自セッション層を持つSPAでは、後者の attach 方式が有効でした（詳細は考察）。

制約

要素の ref はレンダリングのたびに変わるため、role + アクセシブル名で指定する
QuickSight は独自セッションを持つため、真新しいブラウザで直接開くとサインインに飛ぶ
goto に --wait-until オプションは無い（URL 引数のみ）

実践

環境は macOS、Node.js v24.9.0 / npm 11.6.0 です。QuickSight へは AWS SSO（IAM Identity Center）でログインする前提です。

何をする作業か

QuickSight のダッシュボードは、Chrome で開くと「ダッシュボード一覧 → 個別ダッシュボード（グラフや表が並ぶ画面）」という構成になっています。この画面に対して、playwright-cli から次のような操作を行います。

一覧ページを開き、目的のダッシュボードのリンクをクリックして開く
開いた画面の要素構造（snapshot）やテキスト（eval）を取得し、数字・カテゴリが表示されているかを確認する
画面全体や特定のビジュアルのスクリーンショットを保存する

つまり「人が Chrome でダッシュボードを見て目視確認する」操作を、コマンドで再現・自動化するイメージです。

進め方のアウトライン

大きく分けて「環境を整える → QuickSight に繋ぐ → 操作する → 仕組み化する」の順で進めます。

Step 1〜2: playwright-cli を kiro-cli に導入し、単体で動く状態にする（環境準備）
Step 3: ログイン済みの実ブラウザに attach して QuickSight にアクセスする（認証突破）
Step 4: 一覧から個別ダッシュボードを開き、中身を読み取る（操作）
Step 5: 数値表示チェックとキャプチャを行う最小UIテストを1本作る（テスト化）
Step 6: 一連の流れをスキルにして、kiro-cli から呼び出せるようにする（仕組み化）

※ 前提として、QuickSight は認証で守られているため、Step 3 の前に「Chrome で対象アカウントの QuickSight にログイン済みであること」が必要です。

Step 1: playwright-cli スキルを配置する

下記のワンライナーで、公式リポジトリから SKILL.md と references 一式を ~/.kiro/skills/playwright-cli/ に取得します。

mkdir -p ~/.kiro/skills/playwright-cli/references && \
B=https://raw.githubusercontent.com/microsoft/playwright-cli/main/skills/playwright-cli && \
curl -fsSL $B/SKILL.md -o ~/.kiro/skills/playwright-cli/SKILL.md && \
for f in element-attributes playwright-tests request-mocking running-code session-management spec-driven-testing storage-state test-generation tracing video-recording; do \
  curl -fsSL $B/references/$f.md -o ~/.kiro/skills/playwright-cli/references/$f.md; \
done && echo "done" && ls -R ~/.kiro/skills/playwright-cli

SKILL.md（約11,903バイト）＋ references 10ファイルが配置されたことを確認しました。

% ls -l ~/.kiro/skills/playwright-cli/
total 24
drwxr-xr-x@ 12 XXXXXXXX  XXXXXXXX    384 Jul  4 22:53 references
-rw-r--r--@  1 XXXXXXXX  XXXXXXXX  11903 Jul  4 22:53 SKILL.md
% ls -l ~/.kiro/skills/playwright-cli/references/
total 136
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX    665 Jul  4 22:53 element-attributes.md
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX   1690 Jul  4 22:53 playwright-tests.md
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX   2182 Jul  4 22:53 request-mocking.md
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX   5642 Jul  4 22:53 running-code.md
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX   5671 Jul  4 22:53 session-management.md
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX  11578 Jul  4 22:53 spec-driven-testing.md
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX   5198 Jul  4 22:53 storage-state.md
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX   4585 Jul  4 22:53 test-generation.md
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX   3440 Jul  4 22:53 tracing.md
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX   5387 Jul  4 22:53 video-recording.md
%

kiro-cli セッションで /context show を実行すると、スキル一覧に playwright-cli が現れます。

% > /context show

Agent (kiro_default)
  - /XXXXXXXX/XXXXXXXX/.kiro/skills/*/SKILL.md
      /XXXXXXXX/XXXXXXXX/.kiro/skills/playwright-cli/SKILL.md

Step 2: playwright-cli 本体とブラウザを導入する

playwright-cli 本体をインストールします
```
npm install -g @playwright/cli@latest
```
バージョンを確認しました。0.1.15 が入っていました
```
playwright-cli --version
0.1.15
```

操作用のブラウザ本体（Chromium）を導入します

playwright-cli install-browser chromium

Downloading Chrome for Testing 150.0.7871.24 (playwright chromium v1229) ...
downloaded to .../.local-browsers/chromium-1229
Downloading Chrome Headless Shell 150.0.7871.24 ...
downloaded to .../.local-browsers/chromium_headless_shell-1229

公開サイトで疎通確認しました。"Example Domain" が返り、単体で正常動作することを確認しました

% playwright-cli open https://example.com
### Browser `default` opened with pid 76029.
### Ran Playwright code
```js
await page.goto('https://example.com');
```
### Page
- Page URL: https://example.com/
- Page Title: Example Domain
### Snapshot
- [Snapshot](.playwright-cli/page-2026-07-05T02-51-00-847Z.yml)
% playwright-cli --raw eval "document.title"
"Example Domain"
%

Step 3: attach 方式で認証突破する

attach 方式は「ログイン済みの実ブラウザ（Chrome）に playwright-cli を接続し、そのセッションをそのまま使う」方式です。QuickSight のような独自セッション層を持つ画面でも、既にログインしているブラウザを使うため認証を突破できます。準備から接続までを順に行います。

Chrome拡張「Playwright Extension」を導入します。下記の Chrome ウェブストアからインストールし、ツールバーにピン留めしておくと使いやすいです。この拡張が、playwright-cli と実ブラウザを橋渡しします

2.　Chrome で普段どおり QuickSight にログインしておきます。AWS SSO のアクセスポータルから QuickSight を開き、ダッシュボードが見える状態にします。attach 方式はこのログイン状態をそのまま流用するため、ここでログインできていることが前提になります

3.　承認ダイアログをバイパスするためのトークンを取得します。拡張の status 画面（chrome-extension://<拡張ID>/status.html）を開くと「Set this environment variable to bypass the connection dialog」としてトークンが表示されます。

4.　上記の3を環境変数に設定します（トークンはマスク）。設定しない場合、attach のたびに Chrome 側で承認ダイアログの操作が必要になり、コマンドが応答待ちで止まることがあります

export PLAYWRIGHT_MCP_EXTENSION_TOKEN=<TOKEN>

5.　ログイン済みの実ブラウザに attach します。"unknown" connected. が接続成功のサインです

$ playwright-cli -s=qs attach --extension=chrome

6.　QuickSight ダッシュボード一覧を開きます

playwright-cli -s=qs goto 'https://<region>.quicksight.aws.amazon.com/sn/account/<アカウントエイリアス>/start/dashboards'

% playwright-cli -s=qs goto 'https://ap-northeast-1.quicksight.aws.amazon.com/sn/account/XXXXXXXX/start/dashboards'
### Ran Playwright code
```js
await page.goto('https://ap-northeast-1.quicksight.aws.amazon.com/sn/account/XXXXXXXX/start/dashboards');
```
### Page
- Page URL: https://ap-northeast-1.quicksight.aws.amazon.com/sn/account/XXXXXXXX/start/dashboards
- Page Title: Quick
- Console: 1 errors, 1 warnings
### Snapshot
- [Snapshot](.playwright-cli/page-2026-07-05T03-13-00-555Z.yml)
### Events
- New console entries: .playwright-cli/console-2026-07-05T03-12-57-852Z.log#L1-L13
%

7.　Page URL がサインイン画面ではなくダッシュボードURLのままで、認証を突破できたことを確認しました。ログイン済みの実 Chrome セッションをそのまま流用できたためです。

補足として、attach 直後は操作対象タブが拡張の接続ページ（connect.html）になっていることがあります。eval "location.href" がその接続ページのURLを返す場合は、tab-list で確認するか、上記のように一覧URLへ goto すれば操作対象が切り替わります。

Step 4: ダッシュボードを開いて中身を読む

スナップショットでダッシュボード一覧の要素構造を取得します

playwright-cli -s=qs snapshot

### Page
- Page URL: https://ap-northeast-1.quicksight.aws.amazon.com/sn/account/XXXXXXXX/start/dashboards
- Page Title: Quick
- Console: 1 errors, 1 warnings
### Snapshot
```yaml
- generic [ref=f2e1]:
  - generic:
    - document
  - generic [ref=f2e3]:
    - banner [ref=f2e4]:
      - generic [ref=f2e5]:
        - generic [ref=f2e6]:
          - generic [ref=f2e7]:
            - generic [ref=f2e8]:
・・・
・・・
・・・

一覧から link として各ダッシュボードが読めました。要素は ref ではなく role + アクセシブル名で指定します。同名が複数あるため exact: true で一意化します

% playwright-cli -s=qs click "getByRole('link', { name: 'Monthly Sales Dashboard', exact: true })"
### Ran Playwright code
```js
await page.getByRole('link', { name: 'Monthly Sales Dashboard', exact: true }).click();
```
### Page
- Page URL: https://ap-northeast-1.quicksight.aws.amazon.com/sn/account/XXXXXXXX/dashboards/monthly-sales-dashboard
- Page Title: Quick - Monthly Sales Dashboard
- Console: 1 errors, 3 warnings
### Snapshot
- [Snapshot](.playwright-cli/page-2026-07-05T03-24-04-471Z.yml)
### Events
- New console entries: .playwright-cli/console-2026-07-05T03-16-00-275Z.log#L14-L15
%

個別ダッシュボードに到達しました。再度 snapshot すると、ドーナツグラフ「Category による合計 of Revenue」とカテゴリ（Electronics / Clothing / Food）まで読み取れました。

playwright-cli -s=qs snapshot
### Page
- Page URL: https://ap-northeast-1.quicksight.aws.amazon.com/sn/account/XXXXXXXX/dashboards/monthly-sales-dashboard
- Page Title: Quick - Monthly Sales Dashboard
- Console: 1 errors, 8 warnings
### Snapshot
・・・
・・・

% playwright-cli -s=qs snapshot | grep -e Electronics -e Clothing -e Food
                        - listitem [ref=f2e868] [cursor=pointer]: Electronics
                        - listitem [ref=f2e870] [cursor=pointer]: Clothing
                        - listitem [ref=f2e872] [cursor=pointer]: Food
%

Step 5: 最小UIテスト（数値表示チェック＋キャプチャ）を作る

「ダッシュボードを開く → 数値・カテゴリの表示を確認 → キャプチャ保存」を行うシェルスクリプト（qs_smoke_test.sh）を作成しました

cat ~/.kiro/skills/quicksight-ui-test/scripts/qs_smoke_test.sh

#!/usr/bin/env bash
# =====================================================================
# QuickSight ダッシュボード スモークUIテスト（数値表示チェック + キャプチャ）
#
# 前提（人が事前に1回だけ実施する半自動方式）:
#   1) ChromeでQuickSightにログイン
#   2) Chrome拡張 Playwright Extension を導入
#   3) export PLAYWRIGHT_MCP_EXTENSION_TOKEN=<token>
#   4) playwright-cli -s=<session> attach --extension=chrome   # "unknown" connected. を確認
#
# 使い方:
#   bash qs_smoke_test.sh --session qs \
#     --list-url 'https://<region>.quicksight.aws.amazon.com/sn/account/<account>/start/dashboards' \
#     --dashboard 'Monthly Sales Dashboard' \
#     --expect 'Electronics,Clothing,Food' \
#     --out ./test-output
# =====================================================================
set -uo pipefail

# --- デフォルト値（環境変数でも上書き可）---
S="${QS_SESSION:-qs}"
LIST_URL="${QS_LIST_URL:-}"
DASHBOARD="${QS_DASHBOARD:-}"
EXPECT="${QS_EXPECT:-}"
OUTDIR="${QS_OUT:-./test-output}"

usage() {
  sed -n '2,20p' "$0"
  echo ""
  echo "Options:"
  echo "  --session <name>    playwright-cli session (default: qs)"
  echo "  --list-url <url>    dashboard list page URL (required)"
  echo "  --dashboard <name>  exact dashboard name to open (required)"
  echo "  --expect <a,b,c>    comma-separated strings expected on the page (optional)"
  echo "  --out <dir>         capture output dir (default: ./test-output)"
  echo "  -h|--help           show this help"
}

# --- 引数パース ---
while [ $# -gt 0 ]; do
  case "$1" in
    --session)   S="$2"; shift 2 ;;
    --list-url)  LIST_URL="$2"; shift 2 ;;
    --dashboard) DASHBOARD="$2"; shift 2 ;;
    --expect)    EXPECT="$2"; shift 2 ;;
    --out)       OUTDIR="$2"; shift 2 ;;
    -h|--help)   usage; exit 0 ;;
    *) echo "Unknown option: $1" >&2; usage; exit 2 ;;
  esac
done

# --- 必須チェック ---
if [ -z "$LIST_URL" ] || [ -z "$DASHBOARD" ]; then
  echo "ERROR: --list-url と --dashboard は必須です" >&2
  usage; exit 2
fi

STAMP=$(date +%Y%m%d-%H%M%S)
OUT="${OUTDIR}/${STAMP}"
mkdir -p "$OUT"

pass=0; fail=0
ok(){ echo "  PASS: $1"; pass=$((pass+1)); }
ng(){ echo "  FAIL: $1" >&2; fail=$((fail+1)); }

echo "=== QuickSight Smoke Test ($STAMP) ==="
echo "    session=$S dashboard=$DASHBOARD"

# --- Step 1: 一覧を開く（直URLでなく一覧→クリック遷移が確実）---
echo "[1] 一覧を開く"
playwright-cli -s="$S" goto "$LIST_URL" >/dev/null 2>&1
LTITLE=$(playwright-cli -s="$S" --raw eval "document.title" 2>/dev/null)
if echo "$LTITLE" | grep -qi "Sign-In"; then
  ng "一覧でサインイン画面（認証切れ。再ログイン＋attachが必要）"
  echo "認証が切れています。中断します。" >&2; exit 1
fi
ok "一覧ページに到達 (title=$LTITLE)"
sleep 3

# --- Step 2: 一覧から個別ダッシュボードへクリック遷移 ---
echo "[2] '$DASHBOARD' をクリックして開く"
playwright-cli -s="$S" click "getByRole('link', { name: '${DASHBOARD}', exact: true })" >/dev/null 2>&1
sleep 5
TITLE=$(playwright-cli -s="$S" --raw eval "document.title" 2>/dev/null)
echo "    title = $TITLE"
if echo "$TITLE" | grep -q "$DASHBOARD"; then
  ok "ダッシュボードに到達（title にダッシュボード名）"
elif echo "$TITLE" | grep -qi "Sign-In"; then
  ng "個別遷移でサインインに飛んだ（クリック遷移でも失敗）"
  echo "中断します。" >&2; exit 1
else
  ng "想定外のタイトル: $TITLE"
fi

# --- Step 3: 期待文字列の表示チェック ---
echo "[3] 表示チェック"
BODY=$(playwright-cli -s="$S" --raw eval "document.body.innerText" 2>/dev/null)
if [ -n "$EXPECT" ]; then
  IFS=',' read -ra ITEMS <<< "$EXPECT"
  for kw in "${ITEMS[@]}"; do
    kw_trimmed=$(echo "$kw" | sed 's/^ *//;s/ *$//')
    if echo "$BODY" | grep -q "$kw_trimmed"; then
      ok "期待文字列 '$kw_trimmed' が表示されている"
    else
      ng "期待文字列 '$kw_trimmed' が見つからない"
    fi
  done
fi
# 数値の存在チェック
NUMCOUNT=$(playwright-cli -s="$S" --raw eval "(document.body.innerText.match(/[0-9][0-9.,]+/g)||[]).length" 2>/dev/null)
echo "    検出した数値トークン数 = $NUMCOUNT"
if [ "${NUMCOUNT:-0}" -ge 1 ] 2>/dev/null; then
  ok "数値が表示されている（$NUMCOUNT 個）"
else
  ng "数値が検出できない（データ未表示の疑い）"
fi

# --- Step 4: キャプチャ保存 ---
echo "[4] キャプチャ保存 -> $OUT"
playwright-cli -s="$S" screenshot --filename="$OUT/full.png" --hires >/dev/null 2>&1 \
  && ok "全体キャプチャ: $OUT/full.png" || ng "全体キャプチャ失敗"

# --- 結果サマリ ---
echo ""
echo "=== 結果: PASS=$pass / FAIL=$fail ==="
[ "$fail" -eq 0 ] && echo "OK: すべて合格" || echo "NG: 失敗あり（$OUT のキャプチャで目視確認を推奨）"
exit $fail
%

上記のスクリプトを実行します。前提として、事前にログイン → attach を1回済ませておく半自動方式です

% bash ~/.kiro/skills/quicksight-ui-test/scripts/qs_smoke_test.sh \
  --session qs \
> --list-url 'https://ap-northeast-1.quicksight.aws.amazon.com/sn/account/XXXXXXXX/start/dashboards' \  
> --dashboard 'Monthly Sales Dashboard' \
> --expect 'Electronics,Clothing,Food'
=== QuickSight Smoke Test (20260705-124115) ===
    session=qs dashboard=Monthly Sales Dashboard
[1] 一覧を開く
  PASS: 一覧ページに到達 (title="Quick")
[2] 'Monthly Sales Dashboard' をクリックして開く
    title = "Quick - Monthly Sales Dashboard"
  PASS: ダッシュボードに到達（title にダッシュボード名）
[3] 表示チェック
  PASS: 期待文字列 'Electronics' が表示されている
  PASS: 期待文字列 'Clothing' が表示されている
  PASS: 期待文字列 'Food' が表示されている
    検出した数値トークン数 = 1
  PASS: 数値が表示されている（1 個）
[4] キャプチャ保存 -> ./test-output/20260705-124115
  PASS: 全体キャプチャ: ./test-output/20260705-124115/full.png

=== 結果: PASS=7 / FAIL=0 ===
OK: すべて合格
%

全7チェックが PASS し、キャプチャも1枚保存できました。「数値が表示されていること」と「キャプチャ取得」が再実行可能なテストとして確立できました

Step 6: スキル化して kiro-cli から呼び出す

一連のワークフロー（一覧を開く → クリック遷移 → 数値チェック → キャプチャ）を quicksight-ui-test スキルとして ~/.kiro/skills/ に配置します。構成は「1スキル = 1フォルダ」で、SKILL.md＋references/＋scripts/ です

% ls -lR ~/.kiro/skills/quicksight-ui-test/                        
total 8
drwxr-xr-x@ 3 XXXXXXXX  XXXXXXXX    96  7  5 00:17 references
drwxr-xr-x@ 3 XXXXXXXX  XXXXXXXX    96  7  5 00:17 scripts
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX  3248  7  5 00:17 SKILL.md

/XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/references:
total 8
-rw-r--r--@ 1 XXXXXXXX  XXXXXXXX  3090  7  5 00:17 troubleshooting.md

/XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/scripts:
total 16
-rwxr-xr-x@ 1 XXXXXXXX  XXXXXXXX  5055  7  5 00:17 qs_smoke_test.sh
%

/context show で認識を確認しました。playwright-cli と並んで quicksight-ui-test が表示され、SKILL.md のコンテキスト消費は 0.0%（薄く保てている）でした

8% λ > /context show

Agent (kiro_default)
・・・・
Session (temporary)
  <none>

5 matched files in use
- /XXXXXXXX/XXXXXXXX/.kiro/skills/playwright-cli/SKILL.md (0.0% of context window)
- /XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/SKILL.md (0.0% of context window)

Context files total: 0.2% of context window

スキルの起動方法について、公式ドキュメントでは「/ に続けてスキル名を入力するとスラッシュコマンドとして起動できる」と説明されています。

As slash commands: Type / followed by the skill name to invoke it directly. For example, a skill named pr-review becomes the /pr-review slash command.
https://kiro.dev/docs/cli/skills/

意訳すると、pr-review というスキルは /pr-review というスラッシュコマンドになる、という説明です。ただし今回の実測（kiro-cli 環境）では /quicksight-ui-test は unrecognized subcommand となりました（※バージョン差の可能性あり）。

```bash
8% λ > /quicksight-ui-test

error: unrecognized subcommand 'quicksight-ui-test'

  tip: a similar subcommand exists: 'quit'

Usage: /<COMMAND>
```

4.上記のスキルは「自然言語で依頼してエージェントに自動ロードさせる」方法を使いました。別環境の QuickSight ダッシュボードを対象に自然言語で依頼したところ、エージェントがスキルを読み込みスクリプトを実行して全PASSしました

    8% λ > quicksight-ui-test スキルを使って、Monthly Sales Dashboard のUIテストをして。
    session は qs、\
    一覧URLは、https://ap-northeast-1.quicksight.aws.amazon.com/sn/account/XXXXXXXX/start/dashboards \
    期待文字列は Electronics,Clothing,Food
    
    Reading file: /XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/SKILL.md, all lines (using tool: read)
    Allow this action? Use 't' to trust (always allow) the 'read' tool for the session. [y/n/t]:
    
    10% λ > t
    
    ✓ Trusted: /XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/SKILL.md
    
    
     ✓ Successfully read 3247 bytes from /XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/SKILL.md
     - Completed in 0.0s
    
    > スキルの内容を確認しました。スクリプトを実行します。
    Reading directory: /XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/scripts (using tool: read, max depth: 0, max entries: 1000, excluding: defaults)
    Allow this action? Use 't' to trust (always allow) the 'read' tool for the session. [y/n/t]:
    
    10% λ > t
    
    ✓ Trusted: /XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/scripts
    
    
     ✓ Successfully read directory /XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/scripts (1 entries)
     - Completed in 0.0s
    
    Reading file: /XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/scripts/qs_smoke_test.sh, all lines (using tool: read)
     ✓ Successfully read 5054 bytes from /XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/scripts/qs_smoke_test.sh
     - Completed in 0.1s
    
    > スクリプトの内容を確認しました。UIテストを実行します。
    I will run the following command: bash /XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/scripts/qs_smoke_test.sh \
      --session qs \
      --list-url 'https://ap-northeast-1.quicksight.aws.amazon.com/sn/account/XXXXXXXX/start/dashboards' \
      --dashboard 'Monthly Sales Dashboard' \
      --expect 'Electronics,Clothing,Food' \
      --out ./test-output (using tool: shell)
    Purpose: QuickSight Monthly Sales Dashboard のスモークUIテストを実行
    
    
    Allow this action? Use 't' to trust (always allow) the 'shell' tool for the session. [y/n/t]:
    
    10% λ > t
    
    ✓ Trusted: bash /XXXXXXXX/XXXXXXXX/.kiro/skills/quicksight-ui-test/scripts/qs_smoke_test.sh \
      --session qs \
      --list-url 'https://ap-northeast-1.quicksight.aws.amazon.com/sn/account/XXXXXXXX/start/dashboards' \
      --dashboard 'Monthly Sales Dashboard' \
      --expect 'Electronics,Clothing,Food' \
      --out ./test-output
    
    === QuickSight Smoke Test (20260705-125132) ===
        session=qs dashboard=Monthly Sales Dashboard
    [1] 一覧を開く
      PASS: 一覧ページに到達 (title="Quick")
    [2] 'Monthly Sales Dashboard' をクリックして開く
        title = "Quick - Monthly Sales Dashboard"
      PASS: ダッシュボードに到達（title にダッシュボード名）
    [3] 表示チェック
      PASS: 期待文字列 'Electronics' が表示されている
      PASS: 期待文字列 'Clothing' が表示されている
      PASS: 期待文字列 'Food' が表示されている
        検出した数値トークン数 = 1
      PASS: 数値が表示されている（1 個）
    [4] キャプチャ保存 -> ./test-output/20260705-125132
      PASS: 全体キャプチャ: ./test-output/20260705-125132/full.png
    
    === 結果: PASS=7 / FAIL=0 ===
    OK: すべて合格
     - Completed in 22.272s
    
    > 全テスト合格しました。
    
    結果サマリ: PASS=7 / FAIL=0
    
    | ステップ | チェック内容 | 結果 |
    |---------|------------|------|
    | 1. 一覧ページ | ダッシュボード一覧に到達（サインイン画面でない） | ✅ PASS |
    | 2. ダッシュボード遷移 | "Monthly Sales Dashboard" をクリックして開けた | ✅ PASS |
    | 3-a. 期待文字列 | Electronics が表示されている | ✅ PASS |
    | 3-b. 期待文字列 | Clothing が表示されている | ✅ PASS |
    | 3-c. 期待文字列 | Food が表示されている | ✅ PASS |
    | 3-d. 数値表示 | 数値トークンが1個以上ある | ✅ PASS |
    | 4. キャプチャ | スクリーンショット保存 | ✅ PASS |
    
    キャプチャは ./test-output/20260705-125132/full.png に保存されています。

考察

kiro-cli へのスキル導入は「SKILL.md をフォルダに置くだけ」で完結する。IDEのコマンドパレットは不要で、~/.kiro/skills/ に置けば全プロジェクトで使える
QuickSight のような独自セッション層を持つSPAは、真新しいブラウザで直接開くとサインインに飛ぶ。ログイン済みの実ブラウザに attach する方式が確実だった。「ログイン済みブラウザをそのまま使う」のがポイント
この手法は認証方式に依存しない。Playwright はブラウザに有効なセッションがあるかだけを見るため、AWS SSO（IAM Identity Center）でログイン済みなら、そのブラウザに attach するだけで QuickSight を操作できる。storageState 方式を使う場合も、一度ログインした状態を state-save で保存して読み込ませればよい
要素指定は ref ではなく role + アクセシブル名が鉄則。QuickSight はレンダリングのたびに ref が変わり、同名要素は exact: true か直URL（IDベース）で一意化する必要がある
テーブル型ビジュアルはセルの数値が全てDOMに出るため、期待値との照合がしやすい。一方チャート型（ドーナツ等）はSVG内の数値が取りにくいので、その場合は「データを表示」で数値テーブルを開くとよい
一連のワークフローはスキル化することで、kiro-cli のエージェントに「このダッシュボードをUIテストして」と自然言語で頼めるようになった。手順を暗黙知に留めず SKILL.md と references に落とすことで、再現性と横展開性が高まる
次回（後編）は、②画面崩れ・③フィルタ変化に踏み込み、「決定的なアサーション＋AIによる視覚検査」の二段構えでUI検証を作り込む

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up