Chromeデベロッパーツールで操作タグを探す

ツイッターのログインを自動で行う際のユーザ入力ーパスワード入力、ログインボタンクリックの操作をするにあたって、pythonがログイン画面の操作箇所に正確にアプローチする必要があります。

Chromeデベロッパーツールを使って、操作箇所を特定する方法について解説します。

デベロッパーツールが使えるのは、Chromeです。Twitterのログイン画面で解説するので、まずはTwitterのログイン画面にアクセスします。

ログイン画面はこちらから→Twitterにログイン

デベロッパーツール起動

Chromeの右上のメニューから[その他のツール]-[デベロッパーツール]をクリックします。

画面が縦で分割されて、右側にデベロッパーツールの画面が表示されます。見えているのは、Web画面のソース情報です。このコードの中から、操作するタグ要素を見つけ出すことになります。

デベロッパーツール起動

ユーザID入力要素の特定
パスワード入力要素の特定
まとめ

ユーザID入力要素の特定

まずはこっちの、ログイン画面のユーザ入力画面の要素の特定です。

ユーザID入力の要素検索

デベロッパーツールの左上のマウスクリックのアイコンを押して、Web画面のパーツをマウスで指定すると、そのパーツを構成するHTMLソースがハイライトされます。

ユーザID入力するボックスを指定すると、デベロッパーツールのソースの該当箇所がハイライトされるので、そこのタグを指定してユーザIDを入力すれば良いということがわかります。

今回は、下記のようなinputタグを見つけます。

pythonコードイメージ

タグを探す関数は「find_element」を使います。「find_element」は、一つのページに1つのタグしかない場合や、最初に登場するタグを探すときに使います。

が、複数ある場合は、find_elementsを使います。

ユーザID入力ではinputタグは1つしかないので、「find_element」を使います。※使い分けが面倒ならどちらも「find_elements」を使うでも構いませんが、処理が遅くなるかもしれません。

InputTags=driver.find_element(By.TAG_NAME, "input")

タグの数を確認する方法

ちなみに探しているタグがそのページに何個あるのかは一つずつ目で見て確認するのは大変なので、次のようなコードで件数を確認します。

#ページ読み込み
driver.current_url

#inputタグを探す
TextBox = driver.find_elements(By.TAG_NAME, "input")

print(len(TextBox))

一つしか見つからないので、「find_element」で大丈夫そうです。

ユーザIDの入力

タグが見つかったら、そのタグに向けてテキストを入力します。テキストの入力は、send_keys()を使います。見つけたタグ情報をTextBoxに格納しているので、そこに、「send_keys(USER_ID)」とユーザIDを入力します。

TextBox.send_keys(USER_NAME)

「次へ」ボタンクリック操作

ユーザID入力の後は、「次へ」ボタンをクリックして、パスワードの入力に進みます。「次へ」ボタンもユーザIDの時と同じように要素を探す方法があります。

ただ、要素探さなくても、Enterキーを押せばパスワード入力画面に遷移するので、Enterキーをこの画面に送ることでクリックの代用にします。

以下のコードで、inputタグに対して、Enterを送れます。

TextBox.send_keys(Keys.ENTER)

keys.ENTER以外にもSPACEやTABなどもあるので、別途紹介していきますね。

実行するとパスワード入力画面に遷移します。

パスワード入力要素の特定

続いてはこっちのパスワード入力画面の要素の特定です。

パスワード入力の要素検索

同様にinputタグを探します。属性を見ると、パスワードであることを示している属性があるので、どちらか、もしくは両方を判断条件にしてパスワード入力タブを特定します。

nameかtypeがpasswordとなっているinputタグで良さそうです。

inputタグの数の確認

パスワード入力も、ユーザIDと同様にinputタグは1つしか無いように見えます。が、念のため確認すると、inputタグは2つありました。

したがって、どっちのinputタグにパスワードを入力すべきか特定する必要があります。そこで、それぞれのinputタグのname属性の値を確認してみます。(find_elementsではなく、find_elementsを使って確認しています。)

#password
driver.current_url

#パスワード入力のボックスを探す
TextBoxs = driver.find_elements(By.TAG_NAME, "input")

for TextBox in TextBoxs:
    BoxName=TextBox.get_attribute("name")
    print(BoxName)

username
password

デベロッパーツールで確認した、name=passwordの属性でタグの特定ができそうです。

パスワード入力のpythonコードイメージ

先頭の「driver.current_url」は現在開いている画面の情報を再度読み直しをしています。クリックして画面が別の画面に遷移したときは、この処理を入れると、現在の画面のソースを読み取って作業を進められます。

nameがpasswordであるタグを特定しています。パスワードの入力とログインボタンのクリックは、ユーザIDの次へと同様、send_keysを使っています。

#password
driver.current_url

#パスワード入力のボックスを探す
TextBoxs = driver.find_elements(By.TAG_NAME, "input")

#inputタグ全てを一つずつ調べる
for TextBox in range(len(TextBoxs)):


　　　　＃inputタグのname属性値を取得
    InputName=TextBox.get_attribute("name")

　　　　#name属性がpasswordならパスワード入力
    if InputName == "password":
        #パスワード入力
        TextBox.send_keys(PASS_WORD)　 
        #ログインボタンクリックの代用、Enterキー
        TextBox.send_keys(Keys.ENTER)　     
　　　　　　　# パスワード入力の目的は果たしたので、
        # 以降のinputタグの確認はせずにfor文を抜ける
        break