【python】Chrome自動化！seleniumの基本的な知識からコードまでを紹介！

pythonを使用してブラウザを自動で動かすことができるのはご存知でしょうか？

実は、seleniumというフレームワークを用いることで実現することができます。

こちらの動画でなんとなくどんなものかイメージできるのではないでしょうか。

これは楽天市場にログインする流れを自動化したものです。（※水色の長方形は、メールアドレスを隠すためのものです。動画編集技術はこの程度の人間です。）

流れさえ掴んでしまえば、簡単にプログラムを組むことができます！

本記事では、selenium初学者向けに基礎的な知識などを紹介していきます。

なにができる？

普段PCや携帯で行っているweb上での作業は基本的になんでも自動化することができます。

例えば、、、

• ログイン、ログアウト
• クリック
• ページのスクリーンショット
• 文字の入力

などなどです。

これらを組み合わせればある程度はなんでもできると思いませんか？？

なので一度プログラムを組んでしまえば、複数のプロセスを自動で行うことができます！

ただし、サイト構造が変わってしまった場合はプログラムを組み直さなければなりません。
詳しくは後述いたします。

「自動車のタイルを全て選択してください」などの認証画面の突破も困難です、、、。

準備

seleniumを使用するまでに必要な作業がいくつかあります。

もしご自身のPCにchromeがインストールされていない場合は、事前にchromeブラウザをインストールしておきましょう！

では詳しい内容を解説していきます。

STEP

chromeのバージョンを調べる

まずchromeを起動し、右上の「・」が3つ縦に並んでいるメニュー（語彙力）を選択し、

ヘルプ > Google Chromeについて

を選択しましょう。

するとこのような画面が表示されるかと思います。

※自分はchromeを更新しておりませんので、「再起動」と表示されております。

このページの赤枠部分にて、ご自身のPCで使用しているchromeのバージョンを調べることができます！

次のステップでchromedriverをダウンロードする際に、ここで調べたバージョン情報が必要になりますのでこのまま開いておきましょう。

STEP

chromedriverをインストールする

続いてchromedriverをインストールしましょう。

chromedriverとは、ブラウザとはまた別に、pythonでseleniumを使用する際に必要なものですので必ずダウンロードするようにしてください。

まずはこちらにアクセスします。

Chrome for Developers

Downloads  |  ChromeDriver  |  Chrome for Developers

するとこのようなページに飛ぶはずです。

様々なchromeのバージョンに合わせたchromedriverのリンク先がずらりと並んでいます。

先ほど調べたご自身のchromeのバージョンに合ったものをクリックしましょう。

※私の場合は「ChromeDriver 106.0.5249.21」をクリックします。

するとこのような画面が表示されます。

ご自身のOSに対応したchromedriverを選択し、ダウンロードしましょう！

※私は mac m1 を使用しておりますので「chromedriver_mac64_m1.zip」を選択します。

自分のchome、OSに合ったchromedriverをインストールしましょう！

ダウンロードしたchromedriverをどこに保存すべきかは特に決まっておりませんので、お好きなディレクトリにぶち込んでおきましょう。

STEP

seleniumのインストール

最後に、ターミナルにてseleniumをインストールしましょう。

% pip install selenium

酔っててもできますね。

これで環境構築は終了です、お疲れ様でした！

seleniumで実際に動かしてみる

python（selenium）でchromeを動かす準備が整いましたので、実際にコードを書いて動かしてみましょう！

ここから解説していくにあたって、次のようなディレクトリ構成である前提で進めていきます。

「driver_106」は先ほどダウンロードしたchromedriverのことです。

ディレクトリ構成は適宜変更していただいて構いませんが、パスを指定する部分などはそれに合わせて変更してください。

chromedriverの起動

まずは必要最低限のコードでchromediriverを起動してみます。

from selenium import webdriver

# chromedriverを格納しているパス
path = 'driver/driver_106'

# driver起動
driver = webdriver.Chrome(path)

このようなまっさらなブラウザが表示されれば成功です！

起動した後に何か処理を書いている訳ではないので、待てど暮せど現時点では何も起こりません。

ちなみにプログラム内でchromeを終了する場合はこのように記述します。

# driver終了
driver.quit()

ページ移動してみる

続いて、実際にあなたがweb上で何かを調べる時みたいに、pythonを用いてページの遷移を行ってみましょう。

driver.get()メソッドでページ遷移を行うことができます。

# 遷移先のurl
url = 'https://www.rakuten.co.jp/'

# ページ遷移
driver.get(url)

するとこのようにページを移動することができます。

このように移動したいURLが分かっている場合は簡単にアクセスすることができます。

要素をクリック

今度はプログラムで要素をクリックするまでの流れを解説します。

例えば皆さんがサイト上で何かをクリックするまでの流れを噛み砕いてみましょう。

「目」でクリックしたい要素を視認し、位置を確認してからクリックするはずです。

プログラムで要素のクリックを行いたい場合も同様に、何かしらの方法で要素の位置を特定してあげる必要があります。

ではどのように要素を特定してあげればよいでしょうか？？

プログラムの場合は、そのページを構成しているHTML構造を辿って要素を特定してあげます。

HTMLやCSSに知見がある方ならすぐに理解できるかと思いますが、要素に振られているclassやidを使用して抽出するイメージです。

本記事ではこの要素の特定に関しては詳しく言及しませんが、簡単な例だけご紹介いたします。

例えばこのようなページがあったとしましょう。

ボタンを押すと「clicked!」とアラートが表示されるだけのページです（ボタンがちゃんと押されたか確認するため）。

このページのHTML構造はこのようになっております。

<div>
  <button class="login-btn">PUSH!!!!</button>
</div>

<button>タグにclass名が振られています。

これを使用して要素を特定してあげます。

from selenium import webdriver
from selenium.webdriver.common.by import By    # 新たにインポート

# driver起動 ~ ページ遷移まで割愛

# class名を使用して要素を取得
login_btn = driver.find_element(By.CLASS_NAME, 'login-btn')

# 取得した要素をクリック
login_btn.click()

7行目のように、find_element()メソッドを使用することで要素を取得することができます！

さらにclick()メソッドを使用することで、取得した要素をクリックすることができます。

ちゃんとクリックできています。

ではこのようなHTML構造の場合はどのように要素を取得したらよいでしょうか？？

<div>
  <button id="login-btn">PUSH!!!!</button>
</div>

<button>タグにclass名ではなくidが振られています。

このような場合は次のように取得を行います。

# idを使用して要素を取得
login_btn = driver.find_element(By.ID, 'login-btn')

# 取得した要素をクリック
login_btn.click()

流れは全く同じで、find_element()内の第一引数が変わっただけですね。

このように、取得したい要素に合わせて適宜条件を変えていきます。

当てはまる条件が複数あったりすると少し面倒だったりするので、その辺は別記事でまとめたいと思います。

BeautifulSoupを使用して、ちゃんと欲しい要素のみを絞れているか確認するのもおすすめです。

※BeautifulSoupに関する基本的な使用方法については是非こちらをご覧ください。

あわせて読みたい

【python】スクレイピングのいろは。注意事項から具体的なコードまで初心者向けに解説！ 本記事では、「pythonを用いてスクレイピングを行ってみたい！」といった方向けに、基本的な知識や注意事項、実際にスクレイピングのプログラムを作成するまでご紹介し…

ただこの部分がどんなに複雑になろうが、やっていることは結局「要素の特定」ですので、落ち着いて対処していきましょう。

フォームに文字を入力する

続いてよくある場面として「フォームにテキストを入力」するシーンがあるかと思います。

ログインする時のIDやパスワード入力などですね。

この動作を行う方法を解説していきます。

このようなページがあるとしましょう。

フォーム入力する箇所が１つだけあるシンプルページです。

このようなHTML構造となっております。

<div>
  <input id="form"></input>
</div>

このフォームに文字を入力するまでの流れは、先ほどの要素をクリックするまでの流れと同様「要素の取得→文字を入力」でございます。

from selenium import webdriver
from selenium.webdriver.common.by import By

# driver起動 ~ ページ遷移まで割愛

# idを使用してフォーム要素を取得
input_form = driver.find_element(By.ID, 'form')

# 取得したフォームに文字を入力
input_form.send_keys('hoge')

10行目のようにsend_keys()メソッドを使用することで、フォーム入力を行うことができます。

正常に文字が入力できていることを確認できます。

ここまでで

• ページ遷移
• クリック
• フォーム入力

の方法をご紹介してきました。

これらさえ出来てしまえば大体の事はできると思いませんか？

次からは実際に楽天市場にて自動でログインするまでの流れをご紹介していきます。

【実装編】seleniumで自動ログイン

ここからは使用頻度も多いであろうログイン処理を実際に組んでいきたいと思います。

題材とさせていただくサイトは楽天市場さんです。

実装する前に、全体の流れを把握しておきましょう。

ページ遷移以外は、「要素の取得→処理」の繰り返しですね。

必要なモジュールなどをインポート

まずはログイン処理に必要な材料をインポートします。

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep    # 待機処理用

3行目の sleep についてここで解説したいと思います。

「3Gや速度制限中にwebサイトにアクセス」するシーンを想像してみてください。

何かを検索しても、全然次のページが表示されませんよね？？

なぜ表示されないかというと、サーバーからページを表示するための材料（HTMLデータなど）を全て貰えてないからです。

このようにまだ材料が揃っていない状態で次の処理に進んでしまわないよう、seleniumでは待機処理も考えなければなりません。

要素を取得していないのに find_element() を実行しても見つかりません…。

サーバーとの通信時間を担保するために今回は sleep()メソッドを使用します。

例えばsleep(10)とした場合、プログラムの処理を10秒間待機することができます。

今回はsleep()を使用しますが、seleniumを使用する上でこの方法は全くスマートではありません！
本記事の内容とは逸れるので簡易的にsleep()を使用しますが、待機処理についてはまた別記事で詳しく解説します。

あわせて読みたい

【python】time.sleep()はダメ？seleniumでの待機処理テクニック seleniumを用いたブラウザの自動操作プログラム（スクレイピングなど）を安定的に稼働させるための待機処理についてきちんと理解していますか？ 本記事では、そんなsele…

driverの起動、ログイン画面にアクセス

おさらいになってしまいますが、まずはdriverを準備します。

# chromedriverを格納しているパス
path = 'driver/driver_106'

# driver起動
driver = webdriver.Chrome(path)

# ログイン画面にアクセス
url = 'https://grp01.id.rakuten.co.jp/rms/nid/vc?__event=login&service_id=top'
driver.get(url)

# 待機
sleep(5)

path部分はご自身のchromedriverの格納場所に合わせて適宜修正してください。

driver準備後、ログイン画面のURLを使用してページ遷移を行っております。

このページですね。

フォーム要素の取得、入力

続いてidやパスワードを入力するためのフォーム要素を取得し、実際にそれらの情報を入力します。

そのために、開発者ツールを用いてフォーム部分のHTML構造を確認してみましょう！

こんな感じですね。

調べたい要素上にカーソルがある状態で「右クリック→検証」で表示できます！

HTML部分を拡大してみます。

対象のinputタグにname属性がありますね。これを見つけたらにやけてやりましょう（※フォーム内のinputタグには基本的にname属性が振られています）。

このname属性を使用して要素の取得ができそうですね。

# ログインフォームを取得
form_id = driver.find_element(By.NAME, 'u')
form_pwd = driver.find_element(By.NAME, 'p')

# フォームにログイン情報を入力する
form_id.send_keys('[ご自身のID]')
form_pwd.send_keys('[ご自身のパスワード]')

あとは「ログイン」ボタンを押すだけです。

「ログイン」ボタン要素の取得、クリック

フォーム要素と同じように「ログイン」ボタンを取得し、クリックします。

HTML構造を除いてみます。

このname属性を使用していきます！

# 「ログイン」ボタン要素の取得
login_btn = driver.find_element(By.NAME, 'submit')

# 「ログイン」ボタンのクリック
login_btn.click()

ログイン処理はここまでです。お疲れ様でした！

プログラム全体

念の為プログラム全体を記述したものを記載しておきます。

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep    # 待機処理用

# chromedriverを格納しているパス
path = 'driver/driver_106'

# driver起動
driver = webdriver.Chrome(path)

# ログイン画面にアクセス
url = 'https://grp01.id.rakuten.co.jp/rms/nid/vc?__event=login&service_id=top'
driver.get(url)

# 待機
sleep(5)

# ログインフォームを取得
form_id = driver.find_element(By.NAME, 'u')
form_pwd = driver.find_element(By.NAME, 'p')

# フォームにログイン情報を入力する
form_id.send_keys('[ご自身のID]')
form_pwd.send_keys('[ご自身のパスワード]')

# 「ログイン」ボタン要素の取得
login_btn = driver.find_element(By.NAME, 'submit')

# 「ログイン」ボタンのクリック
login_btn.click()

# 待機
sleep(5)

# chromeを閉じる
driver.quit()

まとめ

本記事では、seleniumの使用するための準備から、簡単な使用方法までをご紹介させていただきました！

今回の記事で紹介した知識はほんの基本的な部分に過ぎず、他にも様々なテクニックや知識がありますので追々ご紹介させていただきたいと思います！

長くなってしまいましたが、ご覧いただきありがとうございました。