seleniumでデータの送受信（連携）をする方法【Python】

Pythonのseleniumを利用して、フロントエンドとバックエンドでデータの送受信（連携）を行う方法を紹介します。

フロントエンドの実装

Reactのインストール

Reactを使用するため、下記を参照して予めインストールしてください。

初期設定、エラーの対処方法【React】

Reactの初期設定、エラーの対処方法を紹介しています。

pg.akihiro-takeda.com

2025.04.02

コード

下記の場合、ボタンを押すとテキストに入力した値をJson形式でバックエンドに送信します。

バックエンドからのresponseを受け取ったら、alert形式でメッセージを表示して終了です。

import React, { useState } from "react";

function App() {
  const [txtVal, setTxtVal] = useState("");

  const submit = async () => {
    const response = await fetch("http://localhost:5000/run-script", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ txtVal }),
    });
    const data = await response.json();
    alert(data.message);
  };

  return (
    <div>
      <h1>Sample</h1>
      <label>
        テキスト:
        <input
          type="text"
          value={txtVal}
          onChange={(e) => setTxt(e.target.value)}
        />
      </label>
      <br />
      <button onClick={submit}>実行</button>
    </div>
  );
}

export default App;

バックエンドの実装

Flaskのインストール

FlaskはWEBアプリケーションを作成するためのフレームワークです。

コマンドプロンプトを開いて、下記コマンドを実行するとインストールできます。

pip install flask flask-cors

コード

from flask import Flask, request, jsonify
from flask_cors import CORS
from selenium import webdriver
from selenium.webdriver.common.by import By

app = Flask(__name__)
CORS(app)

@app.route('/run-script', methods=['POST'])
def run_script():
    try:
        # フロントからデータを受け取る
        data = request.get_json()
        txtVal = data.get('txtVal')

        # ブラウザを設定
        driver = webdriver.Chrome()
        driver.get('https://****')

        # 要素を取得
        txt = driver.find_element(By.ID, 'txtID')

        # 値を書き換える
        driver.execute_script("arguments[0].value = '" + txtVal+ "'", txt)

        # 値を取得して表示
        print(txt.get_attribute('value'))

        # ブラウザを閉じる
        driver.quit()
        return jsonify({"message": "success"})
    except Exception as e:
        driver.quit()
        return jsonify({"message": f"error: {e}"}), 500

if __name__ == '__main__':
    app.run(debug=True)

実行、動作確認

フロントエンドとバックエンドをそれぞれ実行します。それぞれ、当該ディレクトリに移動して、下記コマンドを実行します。

フロントエンド

npm start

バックエンド

python app.py

バックエンドが起動している状態で、フロントエンドの操作を行い動作確認をして終了です。