【要約】入力欄に文字は入ったのに、送信ボタンが押せない — contenteditableとCDPの話 [Zenn_Python] | Summary by TechDistill
> Source: Zenn_Python
Execute Primary Source
// Problem
自動化エンジニアが、Slack等のリッチな入力欄を操作する際に直面する問題だ。DOMに文字を代入しても、フレームワークの内部モデルが更新されない。そのため、送信ボタンが活性化しない。
- ・contenteditable要素は、DOMの見た目と内部状態が分離している。
- ・dispatchEventで作ったイベントはisTrusted: falseとなる。
- ・フレームワークがこれを本物の入力として扱わない。
// Approach
偽のイベントではなく、ブラウザ自身に「本物の入力」を行わせる手法を採用する。CDPのコマンドを利用し、ユーザー操作と同等のイベントを発生させる。
1.対象のcontenteditable要素にfocus()を適用する。
2.CDPのInput.insertTextコマンドで文字を挿入する。
3.aria-disabled属性等を読み取り、ボタンの有効化を検証する。
// Result
CDPのInput.insertTextを使用することで、フレームワークの内部モデルを正しく更新できる。
- ・textContent代入ではaria-disabled='true'のままだった。
- ・Input.insertText実行後はfalseへ遷移した。
- ・isTrusted: trueのイベントが発行されるため、Slate.js等でも確実に動作する。
Senior Engineer Insight
> 現代のWebフロントエンドにおいて、DOMは単なる表示層に過ぎない。状態管理がDOMから切り離されている以上、DOM操作のみの自動化は限界がある。isTrustedフラグによる整合性担保は、自動化エンジニアが避けて通れない壁だ。CDPのような低レイヤーな手段を用い、ブラウザの挙動を「再現」する視点が重要だ。それが堅牢な自動化基盤の構築には不可欠である。