Seleniumで自動ログインしてみよう

このチュートリアルの学習内容

このチュートリアルでは、クラウドソーシングサイトに実際に存在するデータ収集案件にかなり類似した案件を、営業~要件定義、制作、納品までのプロセスを学習します。

実際に、クラウドソーシングサイト(クラウドワークス、ココナラなど)には、スクレイピングを発注する企業様が多数あり、比較的未経験でもスクレイピング案件はやりやすいです。単価も、5000円~10万円の案件があり、趣味でプログラミングをまなんでから、じっさいに簡単な仕事をやってみたい方には、非常におすすめです。

今回の案件イメージは、こちらです。

【急募・経験者歓迎】大手ポータルサイトのデータクローリング業務
固定報酬制:25,000円
仕事の詳細
単発のデータリストとして、大手ポータルサイト(メディア系)のデータクローリングを実行して頂ける方を募集しております。
以下、詳細を記載いたしますので、ご確認ください。
【依頼詳細】
大手ポータルサイト(メディア系)のデータクローリング業務
【欲しいデータ】
こちらのアフィリエイト検索ナビから、データを収集します。
ここから
・案件名
・成果報酬
・取り扱いASP
を取得してください。
毎日更新されますので、日時でCSVをダウンロードできる形がよいです。

このチュートリアルでは、ログインが必要なサイトのデータ収集をやっていきたいと思います。

事前に学習しておくこと

このチュートリアルでは、

  • HTML / CSSの基礎知識
  • スクレイピングの基礎が理解できていること
  • AWS Cloud9を利用して、Seleniumの環境構築が完了していること

が条件となります。まだ学習をしていない方は、以下のチュートリアルを進めてください。

HTML & CSS | プログラミングの入門なら基礎から学べるProgate
Pythonによるスクレイピング①入門編|スクレイピング を用いて、データを自動抽出してみよう | DAINOTE オリジナルアプリを作ろう
PythonでSeleniumの環境構築をしてみよう | DAINOTE オリジナルアプリを作ろう

前回までの学習の確認

まず、Seleniumの環境構築編で、AWS Cloud9上でSeleniumを起動できるようになりました。

PythonでSeleniumの環境構築をしてみよう

今回は、Seleniumを利用して、自動ログインからスクレイピングを行っていきます。

すでにAWS Cloud9上には、tutorials.pyというファイルがあり、以下のコードが書かれています。

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
options = Options()
options.add_argument('--headless')
driver = webdriver.Chrome('./chromedriver', chrome_options=options)
driver.get("https://code.dividable.net")
driver.save_screenshot('screenshot.png')
driver.quit()

手順

以下の手順で学習を進めます。

  1. ログインの自動化
  2. 案件の全件取得

ログインの自動化

まずは、ログインの自動化を行いましょう。 ログインページはこちらになります。

アフィリエイト検索ナビ ログインページ

ページを確認すると、

  • メールアドレス入力欄
  • パスワード入力欄
  • ログインボタン

がありますね。 これを、Seleniumで自動化していく必要があります。

代替テキスト

要素の選択

では、それぞれの要素をどう選択したらいいでしょうか。 実は、Seleniumでは、

  • CSS Selector
  • XPath
  • Class
  • ID

などから、要素を指定することができます。

個人的には、CSS Selectorをメインで使っていて、CSS Selectorだと対応できない場合にXPathを利用することが多いです。、

それでは、まずこれら3つの要素を、CSS Selectorで取得してみましょう。 開発者ツールを開いて、それぞれの要素を確認します。

<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 registration__container text-center">
<h2>ログイン</h2>
<form class="new_user" id="new_user" action="/users/sign_in" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="izOIDHxzJiaKZc6bFGyXEpuTAx9hsPfaCN69g8KgVgH9b2+GEfCbMM+qJTr+Z7AKPwH7rTuRtYsZzcNArlgs8g==" />
<div class="field">
<label for="user_email">Email</label><br />
<input autofocus="autofocus" autocomplete="email" type="email" value="" name="user[email]" id="user_email" />
</div>
<div class="field">
<label for="user_password">Password</label><br />
<input autocomplete="current-password" type="password" name="user[password]" id="user_password" />
</div>
<div class="field">
<input name="user[remember_me]" type="hidden" value="0" /><input type="checkbox" value="1" name="user[remember_me]" id="user_remember_me" />
<label for="user_remember_me">Remember me</label>
</div>
<div class="actions">
<input type="submit" name="commit" value="Log in" data-disable-with="Log in" />
</div>
</form>
<a href="/users/sign_up">Sign up</a><br />
<a href="/users/password/new">Forgot your password?</a><br />
</div>
</div>
</div><!--container registration__container text-center -->

この中で取得したい要素のHTMLを確認します。

EMAIL

<input autofocus="autofocus" autocomplete="email" type="email" value="" name="user[email]" id="user_email" />

PASSWORD

<input autocomplete="current-password" type="password" name="user[password]" id="user_password" />

新規登録ボタン

<div class="actions">
<input type="submit" name="commit" value="Log in" data-disable-with="Log in" />
</div>

となります。 これらを、CSS Selectorで要素を取得していきます。

Seleniumで利用する関数を用意してみたので、見てみてください。

Selenium クイックリファレンス

find_element_by_css_selector

◆メソッド
  ・find_element_by_css_selector(css_selector)
◆使用形態
  ・driver.find_element_by_css_selector(".foo")
◆備考
  ・引数に取得したい要素のCSSセレクタを指定することで、要素を取得できる
◆関連項目
  ・name属性から要素を取得する
  ・linkTextから要素を取得する

send_keys

◆メソッド
  ・send_keys(string)
◆使用形態
  ・element.send_keys("foo")
◆備考
  ・テキストボックスやテキストエリアなどのHTML要素で文字入力する為のメソッド
◆関連項目
  ・セレクトタグのオプションをテキストを指定して選択する
  ・セレクトタグのオプションを全て未選択にする

click

◆メソッド
  ・click()
◆使用形態
  ・element.click()
◆備考
  ・特になし
◆関連項目
  ・セレクトタグのオプションをインデックス番号から選択する
  ・セレクトタグのオプションをテキストを指定して選択する

get_screenshot_as_file

◆メソッド
  ・get_screenshot_as_file(filename)
◆使用形態
  ・driver.get_screenshot_as_file(filename)
◆備考
  ・カレントウィンドウに対して全体のキャプチャーを取得
◆関連項目
  ・タイトルを取得する
  ・ソースコードを取得する

TODO

 

  1. EMAIL, PASSWORDを定義して、変数に入れてください(email・passはsample@sample.com / sample1234)
  2. それぞれの要素を、find_element_by_css_selectorメソッドで取得して、send_keysメソッドで値を入力してみましょう
  3. ログインボタンをクリックしてみましょう
  4. ログイン後の画面を、キャプチャしてみましょう

動画解説

答え

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
import time
options = Options()
options.add_argument('--headless')
browser = webdriver.Chrome(executable_path='./chromedriver',  chrome_options=options)
browser.get("http://affisearch.herokuapp.com/users/sign_in")

#TODO EMAIL, PASSWORDを定義して、変数に入れてください
EMAIL = "sample@sample.com"
PASSWORD = "sample1234"

#TODO それぞれの要素を、find_element_by_css_selectorメソッドで取得して、send_keysメソッドで値を入力してみましょう 
browser.find_element_by_css_selector("#user_email").send_keys(EMAIL)
browser.find_element_by_css_selector("#user_password").send_keys(PASSWORD)

#TODO ログインボタンをクリックしてみましょう
browser.find_element_by_css_selector("div.actions input").click()
browser.save_screenshot("tmp.png")

実行結果を確認すると、画像が確認できるはずです。

お疲れさまでした!今回のチュートリアルは以上となります。