AutoGateにサイトを登録するとき、ID欄・PASS欄・送信ボタンの場所を指定するために「CSSセレクタ」が必要になります。
このガイドは、ブラウザの開発者ツールだけで、壊れにくいセレクタを素早く見つけるための手順をまとめたものです。
対象のログインページで F12 を押す。
DevTools左上の矢印アイコン、または Ctrl+Shift+C を押す。
ID欄・PASS欄・送信ボタンなど、セレクタを知りたい部分をクリックすると、Elementsパネルで該当のHTMLがハイライトされる。
ハイライトされた行を 右クリック → Copy → Copy selector を選ぶ。
これで #email のようなセレクタ文字列がクリップボードにコピーされる。
サイトに分かりやすいidやnameが無いと、Copy selectorはDOM構造をたどった長くて壊れやすい経路を作ってしまうことがあります。
こういう場合は、要素自身の属性だけを確認したほうが速くて確実です。
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が入っていることがあります。
manual型で登録し、ブラウザの保存パスワード機能に任せるのがおすすめです。