Seleniumで自動ログインしてみよう
このチュートリアルの学習内容
このチュートリアルでは、クラウドソーシングサイトに実際に存在するデータ収集案件にかなり類似した案件を、営業~要件定義、制作、納品までのプロセスを学習します。
実際に、クラウドソーシングサイト(クラウドワークス、ココナラなど)には、スクレイピングを発注する企業様が多数あり、比較的未経験でもスクレイピング案件はやりやすいです。単価も、5000円~10万円の案件があり、趣味でプログラミングをまなんでから、じっさいに簡単な仕事をやってみたい方には、非常におすすめです。
今回の案件イメージは、こちらです。
【急募・経験者歓迎】大手ポータルサイトのデータクローリング業務
固定報酬制:25,000円
仕事の詳細
単発のデータリストとして、大手ポータルサイト(メディア系)のデータクローリングを実行して頂ける方を募集しております。
以下、詳細を記載いたしますので、ご確認ください。
【依頼詳細】
大手ポータルサイト(メディア系)のデータクローリング業務
【欲しいデータ】
こちらのアフィリエイト検索ナビから、データを収集します。
ここから
・案件名
・成果報酬
・取り扱いASP
を取得してください。
毎日更新されますので、日時でCSVをダウンロードできる形がよいです。
このチュートリアルでは、ログインが必要なサイトのデータ収集をやっていきたいと思います。
事前に学習しておくこと
このチュートリアルでは、
- HTML / CSSの基礎知識
- スクレイピングの基礎が理解できていること
- AWS Cloud9を利用して、Seleniumの環境構築が完了していること
が条件となります。まだ学習をしていない方は、以下のチュートリアルを進めてください。
HTML & CSS | プログラミングの入門なら基礎から学べるProgate
Pythonによるスクレイピング①入門編|スクレイピング を用いて、データを自動抽出してみよう | DAINOTE オリジナルアプリを作ろう
PythonでSeleniumの環境構築をしてみよう | DAINOTE オリジナルアプリを作ろう
前回までの学習の確認
まず、Seleniumの環境構築編で、AWS Cloud9上で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()
手順
以下の手順で学習を進めます。
- ログインの自動化
- 案件の全件取得
ログインの自動化
まずは、ログインの自動化を行いましょう。 ログインページはこちらになります。
ページを確認すると、
- メールアドレス入力欄
- パスワード入力欄
- ログインボタン
がありますね。 これを、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を確認します。
<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で利用する関数を用意してみたので、見てみてください。
◆メソッド
・find_element_by_css_selector(css_selector)
◆使用形態
・driver.find_element_by_css_selector(".foo")
◆備考
・引数に取得したい要素のCSSセレクタを指定することで、要素を取得できる
◆関連項目
・name属性から要素を取得する
・linkTextから要素を取得する
◆メソッド
・send_keys(string)
◆使用形態
・element.send_keys("foo")
◆備考
・テキストボックスやテキストエリアなどのHTML要素で文字入力する為のメソッド
◆関連項目
・セレクトタグのオプションをテキストを指定して選択する
・セレクトタグのオプションを全て未選択にする
◆メソッド
・click()
◆使用形態
・element.click()
◆備考
・特になし
◆関連項目
・セレクトタグのオプションをインデックス番号から選択する
・セレクトタグのオプションをテキストを指定して選択する
◆メソッド
・get_screenshot_as_file(filename)
◆使用形態
・driver.get_screenshot_as_file(filename)
◆備考
・カレントウィンドウに対して全体のキャプチャーを取得
◆関連項目
・タイトルを取得する
・ソースコードを取得する
TODO
- EMAIL, PASSWORDを定義して、変数に入れてください(email・passはsample@sample.com / sample1234)
- それぞれの要素を、find_element_by_css_selectorメソッドで取得して、send_keysメソッドで値を入力してみましょう
- ログインボタンをクリックしてみましょう
- ログイン後の画面を、キャプチャしてみましょう
動画解説
答え
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")
実行結果を確認すると、画像が確認できるはずです。
お疲れさまでした!今回のチュートリアルは以上となります。