スキル

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

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

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

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

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

デベロッパーツール起動

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

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

ユーザ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))
1

一つしか見つからないので、「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　　　　

まとめ

chromeのデベロッパーツールの使い方の基礎を解説しました。

動作確認は、seleniumの関数を使いながら確認する必要があり、一意に特定する方法を探すには非常に時間がかかるページがあるかもしれません。

また、スクレイピング対策などを行っているサイトだと、動的に変わる属性値もあったりと、時間が経つと属性値も変わりタグを特定できないというエラーになることもあります。

でも、自動化せずにいつまでも手動で操作するよりはずっと効率的なので、ぜひ覚えてみてはいかがでしょうか。

つぎは、seleniumを使って実際にTwitterにログインしてツイートする方法を解説します。

-スキル
-, , , ,