Playwright MCP および Selenium integration tests で使用する data-testid 属性の完全な一覧です。
クラス管理の data-testid はこの一覧だけに書く。 画面ごとの見た目・文言・操作は ui-ux.md にあり、そちらには testid を書かない（
.claude/rules/scratch-gui/e2e-test.mdもここを参照する）。testid を追加・変更したら、この一覧だけを更新する。
各フェーズのルート要素に付与されます。現在表示中のフェーズを判定するのに使います。
| data-testid | フェーズ |
|---|---|
classroom-modal |
モーダル全体 |
classroom-phase-teacher-login |
先生: ログイン (Google / Microsoft) |
classroom-phase-teacher-class-list |
先生: クラス一覧（ログイン後の入口。v2 landing） |
classroom-phase-teacher-dashboard |
先生: 課題ダッシュボード（クラス選択後） |
classroom-phase-teacher-create |
先生: 課題作成 |
classroom-phase-teacher-detail |
先生: 課題詳細 |
classroom-phase-teacher-google-courses |
先生: GC コース一覧 |
classroom-phase-teacher-post-assignment |
先生: 課題配信 |
classroom-phase-student-join |
生徒: 参加コード入力 |
classroom-phase-student-seat |
生徒: 席番号選択 |
classroom-phase-student-joined |
生徒: 参加完了 |
classroom-phase-student-status |
生徒: ステータス |
classroom-phase-submit-confirm |
生徒: 提出確認 |
| data-testid | 要素 | 説明 |
|---|---|---|
settings-menu |
div | 設定メニュー（⚙ アイコン） |
settings-classroom-management |
MenuItem | 設定 → クラス管理 |
classroom-menu-button |
div | メニューバーのクラスボタン |
classroom-google-login |
button | Google ログイン |
google-signin-slot |
div | GIS が描画するサインインボタンのホスト（不具合報告モーダルにも同 testid で存在） |
google-signin-button |
div | 上記スロット内に GIS 用に生成されるノード |
classroom-microsoft-login |
button | Microsoft ログイン |
classroom-back |
button | 戻る |
classroom-refresh |
button | 更新 (↻) |
classroom-google-import |
button | Google Classroom からインポート |
classroom-google-import-confirm |
button | GC コース一覧の「インポート」（未選択時は disabled） |
classroom-avatar-button |
button | アカウントメニュー（タイトルバー右上・メール頭文字 + ▼） |
classroom-teacher-logout |
button | ログアウト（アカウントメニュー内） |
| data-testid | 要素 | 説明 |
|---|
サイドバーはクラス管理モーダル左側に常時表示される（teacher-login 以外）。「クラス一覧 (ダッシュボード)」ではなく サイドバー に登録済みの課題がクラス（学級）ごとにリスト表示される。
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-sidebar-group-{className} |
div | クラス（学級）名でグルーピングされたヘッダ（例: 「6年A組」） |
classroom-sidebar-item-{classroomId} |
li | サイドバーの個別の課題項目。data-classroom-id 属性も持つ。クリックで selectedClassroom が更新され teacher-class-detail フェーズへ遷移。表示テキストは assignmentName · 人数 · 参加コード(小文字) |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-detail-name |
div | 課題が属するクラス（学級）名 |
classroom-detail-assignment-name |
input | 課題名（blur で保存） |
classroom-tab-members |
button | 「メンバー」タブ（凡例 + 人数 + 更新 + 座席グリッド） |
classroom-view-assignment |
a | 「課題を確認」（配信済みのとき・新しいタブ。生徒のステータス画面にもある） |
classroom-detail-join-code |
div | 参加コード |
classroom-detail-expand-code |
button | コード拡大表示 |
classroom-members-grid |
div | 座席グリッド |
classroom-status-legend |
div | 状態アイコンの凡例（各項目 classroom-status-legend-{status}） |
classroom-status-icons |
span | 1 セル内の着席系 + 提出系アイコンのまとまり |
classroom-status-icon-{status} |
span[role=img] | 状態アイコン（data-status と aria-label を持つ。status は seated / notSeated / notJoined / submitted / notSubmitted / returned / kickRequested / occupied） |
classroom-members-count |
span | メンバー数 |
classroom-delete-classroom |
button | 課題をアーカイブ（歴史的経緯で testid は delete のまま。soft-delete・復元可能） |
classroom-delete-confirm |
button | アーカイブ確認 |
classroom-delete-cancel |
button | アーカイブキャンセル |
classroom-download-all |
button | 全提出ダウンロード |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-member-detail |
div | 詳細パネル |
classroom-member-detail-name |
span | ニックネーム |
classroom-member-detail-seat |
span | 出席番号 |
classroom-member-detail-seated |
span | 着席状態（着席中 / 未着席アイコン付き） |
classroom-member-detail-not-submitted |
span | 未提出表示（提出が無いときのみ） |
classroom-member-detail-submitted |
span | 提出状態 |
classroom-member-detail-thumbnail |
img | サムネイル |
classroom-member-detail-image-index |
span | 画像インデックス |
classroom-member-detail-prev |
button | 前の画像 |
classroom-member-detail-next |
button | 次の画像 |
classroom-member-detail-open |
button | Smalruby で開く |
classroom-member-detail-return |
button | 返却 |
classroom-member-detail-comment |
textarea | コメント入力 |
classroom-member-detail-hide-from-peers |
input (checkbox) | 他の生徒に見せない（提出があるときだけ・切り替えで即保存・Issue #1208） |
classroom-member-remove |
button | メンバー削除 |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-code-display-copy-link |
button | 招待リンクをコピー |
classroom-code-display-expand |
button | 全画面表示 |
classroom-code-display-shrink |
button | 全画面解除 |
classroom-code-display-close |
button | コード表示を閉じる |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-join-code-input |
input | 参加コード入力 |
classroom-join-submit |
button | 参加コード送信 |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-seat-grid |
div | 席番号グリッド |
classroom-seat-{n} |
button | 席番号 n のボタン（使用中は classroom-status-icon-occupied を含む） |
classroom-selected-seat |
div (hidden) | 選択中の席番号 |
classroom-seat-number-form |
form | 出席番号の数値入力フォーム（グリッドの上） |
classroom-seat-number-input |
input | 出席番号の入力欄（1〜定員。全角数字も可）。入力した番号のセルは data-typed で強調 |
classroom-seat-number-submit |
button | 「この番号にする」。空席なら選択→確認、使用中なら退室依頼ダイアログ |
classroom-seat-number-error |
div | 範囲外・数字以外の入力エラー |
classroom-seat-guide |
div | 常時の案内文。表示から 30 秒席が選ばれないと data-idle="1" で強調（prefers-reduced-motion ではアニメなし） |
classroom-seat-confirm-message |
div | 参加確定前の大きな確認「出席番号 NN で参加します」 |
classroom-confirm-seat |
button | 席番号確定・参加 |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-joined-details |
div | 参加詳細（クラス（学級）名 + 出席番号） |
classroom-joined-class-name |
span | クラス（学級）名 |
classroom-joined-seat-number |
span | 出席番号（0埋め2桁） |
classroom-joined-assignment |
div | 課題名（課題名がある場合のみ） |
classroom-joined-close |
button | はじめる（「どこから始めますか？」の選択肢を出しているときは描画しない） |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-status-class-name |
span | クラス（学級）名 |
classroom-status-seat-number |
span | 出席番号（0埋め2桁） |
classroom-status-assignment |
span | 課題名 |
classroom-status-joined-at |
span | 参加日時（秒なし） |
classroom-submit-status |
span | 提出状況 |
classroom-status-teacher-comment |
div | 先生からのコメント |
classroom-student-refresh |
button | 更新 (↻) |
classroom-submit-button |
button | 課題を提出する / 課題を再提出する |
classroom-leave |
button | 退出する |
classroom-peer-view-button |
button | みんなの作品を見る（他者参照が有効なとき。押すとモーダルを閉じてパネルを開く・#1210） |
classroom-peer-view-locked |
span | 「提出すると見られます」（自分が提出したら で未提出のとき。ボタンの代わり） |
classroom-error-action |
button | セッション切れ時のアクションリンク |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-submit-preview |
img | サムネイルプレビュー |
classroom-submit-cancel |
button | キャンセル |
classroom-submit-confirm |
button | 提出する |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-post-assignment |
button | 課題配信ボタン (詳細画面) |
classroom-post-assignment-blocked |
div | 共有できない理由 (連携した先生以外) |
classroom-post-assignment-verify |
button | 「自分もこの Google Classroom のクラスの先生です（確認する）」 |
classroom-post-assignment-title |
input | タイトル |
classroom-post-assignment-description |
textarea | 説明 |
classroom-post-assignment-submit |
button | 配信実行 |
classroom-post-assignment-success |
div | 配信成功メッセージ |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-phase-teacher-assignment-edit |
div | 課題エディタフェーズのルート |
classroom-assignment-page-{n} |
div | ページ n（0-indexed）のカード |
classroom-assignment-page-text-{n} |
textarea | ページ n の本文（最大500文字） |
classroom-assignment-page-up-{n} / classroom-assignment-page-down-{n} |
button | ページの並べ替え |
classroom-assignment-page-remove-{n} |
button | ページ削除 |
classroom-assignment-page-image-attach-{n} |
button | 画像を追加（png/jpeg） |
classroom-assignment-page-image-{n} |
img | 画像プレビュー |
classroom-assignment-page-image-remove-{n} |
button | 画像を削除 |
classroom-assignment-add-page |
button | ページを追加（最大10） |
classroom-assignment-starter-status |
div | スターターの状態表示 |
classroom-assignment-starter-current |
button | 今開いているプロジェクトをスターターに設定 |
classroom-assignment-starter-file |
button | .sb3 ファイルをスターターに設定 |
classroom-assignment-starter-remove |
button | スターターを削除 |
classroom-assignment-start-from-previous |
input (checkbox) | 「前回の提出物から始めさせる」（既定 OFF・保存で反映・Issue #1202） |
classroom-assignment-peer-view |
select | 「他者参照」（none = しない（既定） / always = いつでも見られる / afterSubmit = 自分が提出したら見られる・保存で反映・Issue #1208） |
classroom-assignment-mesh-group-limit |
select | 「メッシュのグループの人数」（6 = 6人まで / 0 = 制限なし（この設定より前の課題の表示）・保存で反映・Issue #1257） |
classroom-assignment-save |
button | 課題を保存 |
classroom-assignment-cancel |
button | キャンセル（詳細画面へ戻る） |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-phase-student-assignment |
div | 課題パネルフェーズのルート（join 直後に自動表示） |
classroom-assignment-joined-notice |
div | 「参加しました！」通知（join 直後のみ） |
classroom-assignment-view-page |
div | 現在の課題ページ |
classroom-assignment-view-text |
div | ページ本文 |
classroom-assignment-view-image |
img | ページ画像 |
classroom-assignment-prev-page / classroom-assignment-next-page |
button | ページ送り |
classroom-assignment-page-indicator |
span | ページ位置（1 / 3） |
classroom-assignment-reload-starter |
button | スタータープロジェクトを開く（編集中は confirm）。「課題を見る」から開き直したときだけ（参加直後はスターターも選択肢の 1 つ） |
classroom-assignment-close |
button | はじめる！（モーダルを閉じる。選択肢を出しているときは描画しない） |
classroom-view-assignment-button |
button | ステータス画面の「課題を見る」（hasAssignment 時のみ） |
参加完了（student-joined）・課題パネル（student-assignment）は、スターターか続きに使える提出物があるときに表示（参加しただけでは何も読み込まない）。ステータス（student-status）は続きに使える提出物があるときだけ。
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-continue-choice |
div | 選択肢のまとまり（スターターも続きに使える提出物も無いときは描画しない） |
classroom-continue-starter |
button | スターターから始める（スターターがあるとき。設定「前回の提出物から始めさせる」で前回の提出物があるときは出さない。ステータス画面には出さない） |
classroom-continue-starter-recommended / classroom-continue-previous-recommended |
span | 先生の設定でおすすめにした選択肢の「おすすめ」バッジ（Issue #1202） |
classroom-continue-previous |
button | 前回の提出物から続ける（同じクラスの前の課題・同じ席の提出物があるとき） |
classroom-continue-current |
button | この課題で提出した作品を読み込む（この課題で提出済みのとき） |
classroom-continue-keep |
button | いまの作品のまま始める（何も読み込まずにモーダルを閉じる。参加完了画面・課題パネルのみ。ステータス画面には出さない） |
| classroom-continue-notice | span | 先生の設定「前回の提出物から始めさせる」のお知らせ（Issue #1202。前回の提出物がおすすめ / 無かったのでスターターから / 無かった）。選択肢が無いときも単独で出す |
開いたボタンは aria-pressed="true"。1300×600 の収まりは tools/playwright-verify/verify-classroom-viewport.mjs が「参加完了 / 課題パネル / ステータス」の選択肢つきの状態で測る。
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-class-create |
button | クラス一覧の「クラスを作る」（同時作成フォームを開く） |
classroom-class-create-name |
input | 同時作成: クラス名 |
classroom-class-create-year |
input | 同時作成: 年度 |
classroom-class-create-count |
input | 同時作成: 人数 |
classroom-class-create-assignment |
input | 同時作成: 最初の課題名 |
classroom-class-create-submit |
button | 同時作成: クラスと課題を作成 |
classroom-class-list |
ul | クラス一覧（カード） |
classroom-class-list-empty |
p | クラス一覧の空メッセージ |
classroom-class-card-{groupId} |
li | クラスカード |
classroom-class-open-{groupId} |
button | クラスカード本体（クリックでクラスをひらく） |
classroom-class-evaluate-{groupId} |
button | クラスカードの「評価」 |
classroom-class-import-gc |
button | クラス一覧の「Google Classroom からインポート」（Google ログイン時のみ） |
classroom-avatar-button / classroom-avatar-initials / classroom-avatar-email |
button/span | アカウントメニュー（右上・メール頭文字 + ▼。クリックでメール表示 + ログアウト） |
classroom-teacher-logout |
button | ログアウト（アカウントメニュー内。#1111 レビューでタイトルバー常時表示から移動） |
classroom-class-create-section |
input | 同時作成: セクション（オプション） |
classroom-class-settings-open-{groupId} |
button | クラスカードの「設定」（インライン編集を開く） |
classroom-class-settings-{groupId} |
form | クラス設定のインライン編集フォーム |
classroom-class-settings-name/year/section/count |
input | クラス設定の各フィールド |
classroom-class-settings-co-teacher-input |
input | 共同管理者メール入力（クラス単位） |
classroom-class-settings-add-co-teacher |
button | 共同管理者を追加 |
classroom-class-settings-remove-co-teacher-{email} |
button | 共同管理者を削除 |
classroom-class-settings-archive |
button | アーカイブ/もどす（アーカイブは 2 段階確認: 1 回目で確認表示、2 回目で実行） |
classroom-class-settings-archive-confirm-message |
p | アーカイブ確認メッセージ |
classroom-class-settings-archive-cancel |
button | アーカイブ確認のキャンセル |
classroom-class-settings-save / classroom-class-settings-cancel |
button | 保存 / キャンセル |
classroom-show-archived |
button | 「アーカイブ済みのクラス（{count}）」トグル（アーカイブ済みが 1 件以上のとき表示） |
classroom-archived-class-list |
ul | アーカイブ済みクラスのカード一覧 |
classroom-class-restore-{groupId} |
button | アーカイブ済みクラスカードの「元に戻す」 |
classroom-board |
div | 課題管理ボード（クラス内のメイン領域） |
classroom-board-create |
button | ボードの「課題を作る」 |
classroom-board-empty |
p | ボードの空メッセージ |
classroom-board-section-{topic} |
div | トピックセクション（未設定は -none） |
classroom-board-row-{classroomId} |
li | 課題行 |
classroom-board-open-{classroomId} |
button | 課題行本体（クリックで課題詳細へ） |
classroom-board-topic-{classroomId} |
select | 課題行のトピック選択（その場編集） |
classroom-board-date-{classroomId} |
input | 課題行の日付（並び順キー・その場編集） |
classroom-topic-add-input |
input | 新しいトピック入力 |
classroom-topic-add |
button | トピックを追加 |
classroom-topic-chip-{topic} |
span | トピックチップ |
classroom-topic-rename-{topic} |
button | チップ名（クリックでリネーム開始） |
classroom-topic-rename-input-{topic} |
input | リネーム入力（Enter/blur で確定） |
classroom-topic-remove-{topic} |
button | トピック削除（課題側はトピックなしへ） |
classroom-board-archived-section |
div | アーカイブ済み課題セクション（1 件以上のとき表示） |
classroom-board-archived-toggle |
button | 「アーカイブ済みの課題（{count}）」トグル |
classroom-board-archived-list |
ul | アーカイブ済み課題の行一覧 |
classroom-board-archived-row-{classroomId} |
li | アーカイブ済み課題行（保存期限を表示） |
classroom-board-restore-{classroomId} |
button | アーカイブ済み課題の「元に戻す」 |
classroom-board-expiry-{classroomId} |
span | 課題行の残り日数バッジ（保存期限 30 日以下で表示、7 日以下は警告色） |
classroom-board-download-class |
button | ボードの「全課題の提出物をダウンロード」（active + アーカイブ済みを 1 つの zip に） |
classroom-retention-banner |
div | 課題詳細の保存期限アラートバナー（30 日以下で表示） |
classroom-retention-banner-download |
button | バナー内の「全作品ダウンロード」 |
classroom-share-assignment |
button | 課題詳細の「この課題を共有」（みんなの課題フォームを開く） |
shared-form |
form | みんなの課題の共有フォーム |
shared-form-title / shared-form-summary |
input | タイトル / 短い説明 |
shared-form-level |
select | 学校種 |
shared-form-subject |
select | 教科（制御語彙。学校種=その他のときは shared-form-subject-free input） |
shared-form-grade-{n} |
checkbox | 対象学年 |
shared-form-tags |
input | タグ（カンマ区切り・最大5） |
shared-form-lesson-count |
input | 想定コマ数 |
shared-form-url |
input | 補足資料 URL（https のみ。ガイダンス=shared-form-url-hint、エラー=shared-form-url-error） |
shared-form-author-name / shared-form-author-affiliation |
input | 表示名 / 所属表記（localStorage 記憶） |
shared-form-consent |
checkbox | CC BY 4.0 同意（未チェックだと送信不可） |
shared-form-submit / shared-form-cancel |
button | 共有する / キャンセル |
shared-form-success |
p | 公開完了メッセージ（© 表示名 / CC BY 4.0） |
classroom-board-shared-catalog |
button | ボードの「みんなの課題からさがす」 |
shared-catalog |
div | みんなの課題カタログ（ボード内に展開） |
shared-catalog-close |
button | カタログを閉じる |
shared-catalog-tab-all / shared-catalog-tab-mine |
button | すべて / 自分の投稿 タブ |
shared-catalog-filter-level/subject/grade/tag |
select/input | 絞り込み（学校種・教科・学年・タグ） |
shared-catalog-filter-apply |
button | 絞り込み実行 |
shared-catalog-list / shared-catalog-item-{id} / shared-catalog-open-{id} |
ul/li/button | カード一覧（属性バッジ・投稿者・取り込み回数） |
shared-catalog-load-more |
button | 次ページ読み込み（cursor があるときのみ） |
shared-catalog-empty |
p | 空メッセージ |
shared-catalog-detail |
div | 詳細プレビュー |
shared-detail-close |
button | 一覧に戻る |
shared-detail-credit |
p | 「© 表示名（所属） / CC BY 4.0」クレジット行 |
shared-detail-starter |
p | スターター付きの説明 |
shared-detail-url |
button | 補足資料リンク（クリックで確認表示） |
shared-detail-url-confirm / shared-detail-url-open / shared-detail-url-cancel |
span/a/button | 外部ドメイン名付き確認 →「開く」（rel=noopener・新規タブ） |
shared-detail-import |
button | このクラスに取り込む（published のみ表示） |
shared-detail-report |
button | 通報フォームを開く（他人の投稿のみ） |
shared-report-form / shared-report-reason / shared-report-submit |
div/textarea/button | 通報理由（必須）と送信 |
shared-report-sent |
p | 通報完了メッセージ |
shared-detail-unlist / shared-detail-republish |
button | 自分の投稿の取り下げ / 再公開 |
shared-card-limited-badge / shared-card-recommended-badge |
span | カードの 限定公開 / 推薦 バッジ（#1110） |
shared-detail-recommended-note |
p | 自分の限定公開が推薦を受けたときの注記（#1110） |
shared-detail-broaden |
button | 「みんなの課題に公開する」（自分の限定公開のみ・#1110） |
shared-broaden-done |
p | 全体公開の完了メッセージ（#1110） |
shared-import-success |
p | 取り込み完了メッセージ（ボード上） |
classroom-share-suggestion-banner / classroom-share-suggestion-open |
div/button | 共有推奨バナーと「共有フォームを開く」CTA（#1106） |
classroom-board-share-suggested-{classroomId} |
span | ボード行の「共有おすすめ」マーク（#1106） |
classroom-breadcrumbs |
nav | パンくず（クラス一覧 > 課題一覧 > 課題詳細） |
classroom-breadcrumb-class-list / classroom-breadcrumb-assignments |
button | パンくずリンク |
classroom-board-create-name / classroom-board-create-submit |
input / button | インライン課題作成（課題名） |
classroom-board-create-mesh-group-limit |
select | インライン課題作成の「メッシュのグループの人数」（既定 6 = 6人まで / 0 = 制限なし・Issue #1257） |
classroom-board-reuse |
button | 「課題を再利用」（作る の右隣） |
classroom-board-reuse-view |
div | 再利用ビュー（全課題を日付降順） |
classroom-board-reuse-filter |
select | 再利用ビューのクラスフィルタ |
classroom-board-reuse-copy-{classroomId} |
button | このクラスに複製 |
classroom-tab-description |
button | 課題詳細の「説明」タブ（新しく作った課題の初回のみアクティブ。それ以外は classroom-tab-members が既定） |
classroom-description-editor |
div | 説明タブの課題編集フォーム（埋め込み） |
classroom-description-preview |
div | 右ペインの生徒視点プレビュー |
classroom-description-preview-body |
div | プレビュー本文（テキスト+画像） |
classroom-description-preview-prev / -next |
button | プレビューのページ送り |
classroom-description-preview-start |
div | プレビュー下の「参加したとき: …」（設定「前回の提出物から始めさせる」とスターターの有無で文言が変わる・Issue #1202） |
classroom-avatar-email |
span | アカウントメニュー内のユーザーメール（OIDC トークンに email がある場合のみ。旧 classroom-teacher-email は廃止） |
classroom-board-create-cancel / classroom-board-reuse-cancel |
button | インラインフォームのキャンセル |
classroom-google-course-imported-{courseId} |
span | GC コースの「インポート済み」バッジ |
classroom-breadcrumb-assignments |
button | パンくず「課題一覧」リンク |
classroom-ungrouped-list |
div | クラス未所属の課題のフォールバック一覧（develop 互換） |
classroom-ungrouped-open-{classroomId} |
button | 未所属課題をひらく |
classroom-phase-teacher-group-manage |
div | 組管理フェーズのルート |
classroom-sidebar-teachergroup-{groupId} |
li | サイドバーの組ヘッダー |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-phase-teacher-evaluation |
div | 評価フェーズのルート |
classroom-eval-lesson-{classroomId} |
input | 授業の選択チェックボックス |
classroom-eval-load |
button | 提出を読み込む（sb3 をブラウザ内で静的解析） |
classroom-eval-axis-name-{i} / classroom-eval-axis-desc-{i} |
input | 評価軸の名前 / 説明 |
classroom-eval-strictness |
select | 厳しさ（やや甘め/標準/やや厳しめ） |
classroom-eval-progress |
div | 進捗表示 |
classroom-eval-matrix |
table | 席 × 授業マトリクス |
classroom-eval-cell-{seat}-{classroomId} |
td | セル（未提出は ×、要確認はオレンジ） |
classroom-eval-grade-{seat}-{classroomId} |
select | 評価（S/A/B/C。手動変更は較正サンプルになる） |
classroom-eval-reason-{seat}-{classroomId} |
input | 根拠 |
classroom-eval-comment-{seat}-{classroomId} |
textarea | 生徒向けコメント |
classroom-eval-overall-{seat} |
td | 総合評価 |
classroom-eval-run-grade |
button | AI評価を実行 |
classroom-eval-run-comment |
button | コメント下書きを生成 |
classroom-eval-export / classroom-eval-export-audit |
button | 評価CSV / 検証用CSV |
classroom-eval-return-comments |
button | コメントを返却 |
classroom-eval-back |
button | もどる |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-menu-button |
div | クラスボタン（コンテナ） |
classroom-menu-label |
span | メニューバーのクラス表示テキスト全体（参加中は「クラス:出席番号NN」、未参加時は「クラス」） |
classroom-menu-seat-number |
span | 出席番号（0埋め2桁、参加中のみレンダリングされる） |
classroom-menu-submission-status |
span | 自分の提出状態アイコン（未提出 / 提出済み / 返却済み。参加中のみ） |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-teacher-menu-button |
div | 「クラス管理」メニューボタン（先生ログイン中のみ。生徒としても参加中なら classroom-menu-button と併存） |
classroom-teacher-menu-label |
span | ボタンのラベル（「クラス管理」） |
classroom-teacher-menu-badge |
span | 未読お知らせがあるときの「!」バッジ |
classroom-teacher-menu-current-assignment |
span | 「いまの課題を開く」（最後に開いた課題があるときのみ） |
classroom-teacher-menu-class-list |
span | 「クラス一覧を開く」 |
classroom-teacher-menu-notifications |
span | 「お知らせ」 |
classroom-teacher-menu-notifications-badge |
span | 「お知らせ」項目の未読バッジ |
classroom-teacher-menu-logout |
span | 「ログアウト」 |
classroom-teacher-menu-kick-requests |
span | 「退室依頼（N件）」（未処理の退室依頼があるときのみ。#1200） |
classroom-teacher-menu-kick-requests-badge |
span | 「退室依頼」項目のバッジ |
classroom-teacher-menu-status-panel |
span | 「いまの課題の状況」（フローティングパネルを開く。#1203） |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-teacher-kick-toast |
div | 画面下部のトースト / 一覧（新しい依頼で 30 秒表示。メニューから開くと一覧） |
classroom-teacher-kick-toast-request |
div | 依頼 1 件（data-request-id に requestId） |
classroom-teacher-kick-toast-reason |
div | 依頼のひと言 |
classroom-teacher-kick-toast-approve |
button | 承認 |
classroom-teacher-kick-toast-reject |
button | 却下 |
classroom-teacher-kick-toast-open |
button | 課題を開く |
classroom-teacher-kick-toast-show-all |
button | 「ほかN件」（全件の一覧に切り替え） |
classroom-teacher-kick-toast-later |
button | あとで（閉じる） |
classroom-teacher-kick-toast-error |
div | 承認・却下の失敗表示 |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-teacher-panel |
div | パネル全体（ドラッグ可能） |
classroom-teacher-panel-header |
div | ヘッダー（ドラッグハンドル） |
classroom-teacher-panel-header-counts |
span | 最小化中の 着席/定員 · 提出/参加 |
classroom-teacher-panel-refresh |
button | 手動更新 |
classroom-teacher-panel-minimize |
button | 最小化 / 元に戻す |
classroom-teacher-panel-close |
button | 閉じる |
classroom-teacher-panel-body |
div | 本文（最小化中は無い） |
classroom-teacher-panel-assignment |
select | 課題の切り替え |
classroom-teacher-panel-seated |
span | 着席（目安） N / 定員 |
classroom-teacher-panel-submitted |
span | 提出 N / 参加数 |
classroom-teacher-panel-grid |
div | 座席ミニグリッド |
classroom-teacher-panel-seat-<N> |
button | 座席 N（data-member-id。押すとメンバー詳細へ） |
classroom-teacher-panel-kick-list |
div | この課題の未処理の退室依頼 |
classroom-teacher-panel-kick-request |
div | 依頼 1 件（data-request-id） |
classroom-teacher-panel-kick-approve / -kick-reject |
button | 承認 / 却下 |
classroom-teacher-panel-empty |
div | 課題が未選択 |
classroom-teacher-panel-error |
div | 取得・承認の失敗表示（ログインの有効期限切れの文言もここ） |
classroom-teacher-panel-reauth |
button | 有効期限切れのときの「再認証する」リンク（再認証中は disabled。#1250） |
自動確認: tools/playwright-verify/verify-teacher-status-panel.mjs（classroom API をスタブ。1300×600 で 40 席・退室依頼 3 件が画面内に収まる / パネル表示中にブロックをドラッグできる / 位置の記憶 / 最小化 / 承認）。
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-peer-panel |
div | パネル全体（ドラッグ可能・非モーダル） |
classroom-peer-panel-refresh |
button | 手動更新（一覧と画像 URL を取り直す） |
classroom-peer-panel-minimize |
button | 最小化 / 元に戻す |
classroom-peer-panel-close |
button | 閉じる |
classroom-peer-panel-body |
div | 本文（最小化中は無い） |
classroom-peer-panel-hint |
p | 「まねするのではなく、よいところを見つけて…」 |
classroom-peer-panel-count |
div | 提出: N 人（自分を除く） |
classroom-peer-panel-grid |
div | 座席ミニグリッド |
classroom-peer-panel-seat-<N> |
button | 座席 N。提出済みのクラスメイトだけ押せる（未提出・自分の席は disabled） |
classroom-peer-panel-empty |
div | まだだれも提出していない |
classroom-peer-panel-error |
div | 見られない理由（data-error = off / notSubmitted / ended / failed） |
classroom-peer-viewer |
div | 画像ビューアのウィンドウ（ドラッグ・リサイズ可能・非モーダル） |
classroom-peer-viewer-close |
button | ビューアを閉じる |
ビューアの中は共通の画像ビューア（#1209）の data-testid を使う。
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-kicked-banner |
div | 生徒の seat 画面に表示する「先生によって退室させられました」バナー |
classroom-kicked-banner-dismiss |
button | バナーの × |
kick-request-confirm-dialog |
div | 「使用中の席」をタップしたとき表示される退室依頼ダイアログ |
kick-request-reason-input |
textarea | 任意のひと言入力欄（200 字制限） |
kick-request-submit |
button | 依頼を送信 |
kick-request-cancel |
button | ダイアログを閉じる |
kick-request-error |
div | 依頼送信エラー表示 |
kick-request-pending-banner |
div | 「先生に依頼中です…」バナー（依頼が生きている間・タブ表示中だけ 5 秒ごとに lookupClassroom を polling。承認で席が空いたらその席で自動参加） |
kick-request-pending-note |
div | 依頼中バナー内の補足「先生に届いています。先生が確認しに来ます。待つ間スモウルビーを使っていてもかまいません…」 |
kick-request-rejected-banner |
div | 「依頼は受理されませんでした」バナー (却下 / TTL 期限切れ検出時に pending と差し替え) |
kick-request-rejected-banner-dismiss |
button | × ボタン |
classroom-seat-kick-request-{seatNumber} |
span | 先生の課題詳細の座席グリッドに表示する退室依頼アイコン（classroom-status-icon-kickRequested）のバッジ |
classroom-member-kick-request-panel |
div | 先生メンバー詳細パネルに表示される依頼一覧 |
classroom-kick-request-row-{requestId} |
div | 1 リクエストの行 |
classroom-kick-request-approve-{requestId} |
button | 承認（kick + リクエスト削除） |
classroom-kick-request-reject-{requestId} |
button | 却下（リクエストのみ削除） |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-notifications-button |
button | ベル（クリックでパネル開閉） |
classroom-notifications-badge |
span | 未読数（10 以上は「9+」。未読 0 で非表示） |
classroom-notifications-panel |
div | 一覧パネル（先頭 5 件プレビュー） |
classroom-notifications-menu-button |
button | パネルヘッダー右の ⋯ |
classroom-notifications-menu |
div | ⋯ メニュー |
classroom-notifications-mark-all-read |
button | すべて既読にする（未読 0 で無効） |
classroom-notifications-open-all |
button | お知らせを開く（全件一覧ページへ） |
classroom-notification-item-{notificationId} |
button | パネル内のお知らせ 1 件（クリックでリンク先へ + パネルを閉じる） |
classroom-notification-unread-dot |
span | 未読ドット（未読アイテムのみ） |
classroom-notifications-empty |
div | お知らせ 0 件のとき |
classroom-notifications-page |
div | 全件一覧ページ（teacher-notifications フェーズ） |
classroom-breadcrumb-top |
button | パンくず先頭「クラス管理」（トップ = クラス一覧へ） |
classroom-notifications-back |
button | 左下の「戻る」（クラス一覧へ） |
classroom-notification-page-item-{notificationId} |
button | 一覧ページ内のお知らせ 1 件 |
classroom-notifications-pager / -prev / -next |
div / button | ページャ（10 件/ページ） |
| data-testid | 要素 | 説明 |
|---|---|---|
classroom-loading |
div | ローディング表示 |
classroom-error |
div | エラーメッセージ |
classroom-error-action |
button | エラーアクションリンク |
http://localhost:8601?no_beforeunload=1
http://localhost:8601?no_beforeunload=1&devlogin=<DEV_BYPASS_TOKEN>
devlogin=<DEV_BYPASS_TOKEN> を指定すると、Google ログインをバイパスして DEV_BYPASS_TOKEN で先生としてログインできます（stg/ローカル環境のみ）。先生ダッシュボードへは「⚙ 設定 → クラス管理」からアクセスしてください。
クラス管理を絡めた end-to-end の動作確認は tools/playwright-verify/ にあるスクリプトで自動化されています（CI には組み込まれていません。手動で node ... で実行）。
代表例: tools/playwright-verify/mesh-v2-classroom-binding.mjs は教師タブで devlogin → クラスと課題の同時作成 → 課題管理ボードの行をクリックして課題を選択、生徒タブで ?classcode= 経由参加 という 2 タブのフローを自動で回し、Mesh v2 ドメインが課題の参加コードに揃うことを確認します。
スクリプトを書く際の落とし穴と対処は tools/playwright-verify/README.md を参照してください（ログインバイパスの方法、Redux store の取り出し方、サイドバー testid、tutorial overlay の dismiss 等）。
// フェーズの確認
await page.getByTestId('classroom-phase-student-join').waitFor();
// ボタンクリック
await page.getByTestId('classroom-join-submit').click();
// テキスト入力
await page.getByTestId('classroom-join-code-input').fill('ABC123');
// テキスト取得
const className = await page.getByTestId('classroom-status-class-name').textContent();
// data-testid 経由の JavaScript クリック
await page.evaluate(() => {
document.querySelector('[data-testid="classroom-menu-button"]').click();
});# 認証なしテスト（バリデーション、CORS等）
docker compose run --rm -w /app/infra/smalruby-classroom infra npm run test:integration
# 教師フロー含む全テスト（DEV_BYPASS_TOKEN を使用）
docker compose run --rm -w /app/infra/smalruby-classroom -e GOOGLE_ID_TOKEN=<DEV_BYPASS_TOKEN> infra npm run test:integrationDEV_BYPASS_TOKEN は infra/smalruby-classroom/.env.stg に記載されています。