Docker Selenium GridサーバとPythonでスクレイピングやブラウザ自動操作環境を構築

本来、ExcelよりGoogleスプレッドシート派なんですが、会社によってはExcelメインなところも多いので、以前はAutoITを使ったりしていました。

Docker Selenium GridサーバとDocker Pythonで構築すれば気軽にブラウザ操作できるようになります。データベースコンテナ作ってそこにデータ蓄積、別途googleドライブにアップするかエクセルファイル作るなどすればいい感じになりますね。ただ、印刷やメーラー起動とかになるとAutoItなどの出番になりますが。

Docker Desktopの準備は過去の投稿を参照

こちらの記事を参照。昔はデータ置き場をWindows のマイドキュメント下だったので激遅（ファイルアクセス遅すぎ）だったんですが、alpine(Ubuntuでも勿論可）下に置いたので普通に使えるようになりました。

今回の構成はSelenium Grid ServerとPythonは別で

多くの人は１つのdocker-compose.ymlにSeleniumとPyhton一緒にしていますが、PythonはSelenium以外でも使おうと思っているので、別にします。ソース置き場もprojディレクトリ下に置きます。

[selenium]
 |- docker-compose.yml
 |-[node]
 |   |-[chrome]
 |   |   |- Dockerfile (node chrome用)
 |   |-[edge] (chromeと同じようにDockerfile用意)

[py]
 |- docker-compose.yml
 |- Dockerfile
 |- requirements.txt 

[proj]（プロジェクトフォルダ）
 |- [py]（Python用)
 |   |- test.py

pythonコンテナがSeleniumコンテナにアクセスできるよう、共通のネットワークを追記する形になります。

docker network create selenium_network

とかでselenium_networkというネットワークを作りました。
これを次のselenium,pythonのdocker-composeに追加しておきます。

Selenium Grid Server docker-compose.ymlを取得し編集

下記から取得します。docker-compose-v3.ymlを使うのが現状簡単です。

GitHub - SeleniumHQ/docker-selenium: Docker images for Selenium Grid

Docker images for Selenium Grid. Contribute to SeleniumHQ/docker-selenium development by creating an account on GitHub.

上記docker-compose-v3.ymlをVSCodeなどのテキストエディタで開き編集します。
編集する箇所は

編集箇所

ネットワーク追記

VNC接続ポート追記

イメージをそのまま使うのではなく、VNCも立ち上げるので別途Dockerfileを指定

version: '3'
services:
  chrome:
#    image: selenium/node-chrome:4.7.2-20221219
    build: ./node/chrome #node/chrome/Dockerfileに記述（下参照）
    shm_size: 2gb
    ports:
      - 5901:5900 # edgeは5902:5900、firefoxは5903:5900と書く
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
    networks:
      - selenium_network
...
  selenium-hub:
    image: selenium/hub:4.7.2-20221219
    container_name: selenium-hub
    ports:
      - "4442:4442"
      - "4443:4443"
      - "4444:4444"
    networks:
      - selenium_network
networks:
  selenium_network:
    external: true

node/chrome/Dockerfile

VNCで画面確認できるようにします。
単純にdocker-compose.ymlからイメージ部分をコピペ、vnc起動するようにします。
VNCはlocalhost:5901で接続、パスワードはpassでという設定です。

FROM selenium/node-chrome:4.7.2-20221219

RUN x11vnc -storepasswd pass /home/seluser/.vnc/passwd

Docker pythonを作る

pythonのdocker-compose.ymlは下記のように作りました。

docker-compose.yml


version: '3'
services:
  python:
    container_name: py3
    build: .
    ports:
      - 8888:8888
    volumes:
      - ../proj/py:/app
    tty: true
    networks:
      - selenium_network
networks:
  selenium_neetwork:
    external: true

Python Dockerfile

FROM python:3.11

ENV PYTHONIOENCODING utf-8
ENV TZ="Asia/Tokyo"
ENV LANG=C.UTF-8
ENV LANGUAGE=en_US:en_US

WORKDIR /app

COPY ./requirements.txt /tmp/requirements.txt

RUN pip install -r /tmp/requirements.txt

Python requirements.txt　には入れたいものを。

selenium
requests
BeautifulSoup4
mysqlclient

立ち上げる。Selenium Grid、Pythonをbuild,up

powershellでwsl alpineに入り

wsl -d alpine

selenium grid server立ち上げ

cd /home/selenium

docker-compose build,upする

docker-compose build
docker-compose up -d

python　立ち上げ

cd ../py

docker-compose build, upする

docker-compose build
docker-compose up -d

Docker Desktopで確認

Docker Desktopでは下記のようになっています。(seleniumのstatusが3つなのはfirefoxをコメントアウトしているので、selenium-hub,chrome,edgeの３つが立ち上がっているので）

普段はdocker-compose psで確認しています。

Selenium Gridサーバにはブラウザでlocalhost:4444

PCに入っているブラウザでlocalhost:4444と入力すると下記のような画面が表示されます(Firefoxも入っていれば３つ）

UltraVNCを入れてnode-chrome(edge,firefox)の画面を見る

自分の環境windows11 proで。 Ultra VNCをインストール(サーバは入れませんでした）

窓の杜

「UltraVNC」PCリモート操作ソフト

UltraVNCを立ち上げ接続

立ち上げると接続先を聞かれるのでlocalhost:5901と入力し「connect」ボタン

パスワードはDockerfileで設定したpassを入力し「Log on」ボタン

node-chromeの画面が出てきました。pythonなどでブラウザ起動したりすると、ここにブラウザが立ち上がり操作されていく様子を見ることができます。

selenium gridサーバ、UltraVNCでnode-chromeを確認

Pythonのtest.pyを作り、実行してみる

pythonからselenium webdriverを介してブラウザ操作してみます。

中年なのでyahooを表示し、検索し結果ページに遷移

なんでもいいですが、高齢層に人気のyahooを表示し検索結果ページに遷移までをやります。
こういう時のテストページ指定で年齢層がバレますね・・・
ちなみにpython初心者なので無駄なコードの指摘は勘弁してください

proj/py/test.py

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
#from selenium.webdriver.support.ui import WebDriverWait
#from selenium.webdriver.support.expected_conditions import presence_of_element_located
#from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
import os
from time import sleep

if __name__ == '__main__':
  # connect to selenium server
  driver = webdriver.Remote(
    command_executor="http://selenium-hub:4444/wd/hub", #docker-compose psで確認
    options=webdriver.ChromeOptions()
  )

  keyword = "スパイスカレー"

#  try:
  driver.implicitly_wait(10)

  driver.get("https://yahoo.co.jp")
  
  sleep(3)

  search_box = driver.find_element(By.NAME, "p")
  search_box.send_keys(keyword)
  search_box.send_keys(Keys.RETURN)

  driver.implicitly_wait(10)

  sleep(5)

 # finally:
  driver.quit()

yahooを表示し、検索ボックスに「スパイスカレー」を入力しEnter。結果表示するだけです。