~~NOCACHE~~
~~DISCUSSION~~

## セレクタの調べ方ガイド
## 概要
AutoGateにサイトを登録するとき、ID欄・PASS欄・送信ボタンの場所を指定するために「CSSセレクタ」が必要になります。
このガイドは、ブラウザの開発者ツールだけで、壊れにくいセレクタを素早く見つけるための手順をまとめたものです。

---

## 基本の調べ方

### 1. 開発者ツールを開く
対象のログインページで **F12** を押す。

### 2. 要素選択モードにする
DevTools左上の矢印アイコン、または **Ctrl+Shift+C** を押す。

### 3. 欲しい要素をクリックする
ID欄・PASS欄・送信ボタンなど、セレクタを知りたい部分をクリックすると、Elementsパネルで該当のHTMLがハイライトされる。

### 4. セレクタをコピーする
ハイライトされた行を **右クリック → Copy → Copy selector** を選ぶ。
これで `#email` のようなセレクタ文字列がクリップボードにコピーされる。

---

## Copy selectorが長すぎるとき

サイトに分かりやすい`id`や`name`が無いと、Copy selectorはDOM構造をたどった長くて壊れやすい経路を作ってしまうことがあります。
こういう場合は、**要素自身の属性だけ**を確認したほうが速くて確実です。

### Consoleで属性を確認する
1. 要素選択モードで対象をクリックする(Elementsパネルでハイライトされた状態にする)
2. **Console** タブに切り替える
3. `$0.outerHTML` と入力してEnter

`$0`は「Elementsパネルで直前に選択した要素」を指すDevToolsの機能で、親要素を含まないその要素自身のHTMLだけがコンパクトに表示されます。

## どの属性を優先するか

セレクタに使う属性は、以下の優先順位で選ぶと安定します。

| 優先度 | 属性 | セレクタの書き方 | 備考 |
|---|---|---|---|
| 1 | `id` | `#email` | 最優先。まず変わらず、一意に特定できる |
| 2 | `data-testid` | `[data-testid="continue"]` | テスト用に付与される属性。サイトが意図的に付けているので安定 |
| 3 | `name` | `input[name="mailaddress"]` | フォーム送信用に付くことが多く、比較的安定 |
| 4 | `type` / `placeholder` | `input[type="password"]` | 同じページに1つしか無い場合は十分実用的 |
| 最終手段 | `class` | `.cds-input` 等 | Tailwind等が自動生成する長いクラス名(`VfPpkd-xxx`等)は更新のたびに変わりうるので避ける |

`id`と`data-testid`が両方無い場合のみ、`name`→`type`/`placeholder`→`class`の順で検討してください。

---

## 装飾用の要素に注意

ボタンの中には、クリックした時の波紋アニメーション(リップル)などを描画するためだけの**空のdiv/span**が入っていることがあります。

## うまく登録できないときは

- 送信ボタンを押しても反応しない → サイトがSPA(React等)で、フォームの描画が遅れている可能性があります。AutoGateの「実行遅延(秒)」を増やしてみてください。
- ID入力→ボタン→画面遷移→PASS入力→ボタン、という**2段階に分かれるログイン**(Googleなど)は、現在のAutoGateでは1回の実行にまとめられません。
該当サイトは`manual型`で登録し、ブラウザの保存パスワード機能に任せるのがおすすめです。

{{tag>Chrome 拡張機能}}