tatsuya-midorikawa/F# x WebDriver で Edge を操作してみる.md Secret

## F# x WebDriver で Edge を操作してみる.md

      
    Raw
  

              F# x WebDriver で Edge を操作してみる.md
            
          
    F# x WebDriver で Edge を操作してみる

はじめに

本記事は Microsoft Azure Tech Advent Calendar 2021 の 25 日目の記事となります。

内容は Azure 関係なくて OK とのことだったので、Microsoft Edge に関連したものを書いていきます。
事前準備

Microsoft Edge ドライバー より現在利用中の Microsoft Edge のバージョンと一致するドライバーを入手しておきます。

ダウンロードしたら任意のディレクトリに解凍します。

本記事では C:\dirver\msedgedriver.exe となるように解凍しています。
WebDriver を試してみる

まずは、簡単に各 API を使ってみて、使用感を確認します。

VSCode を起動し, main.fsx ファイルを作成します。
以下のようなコードで動作を検証してみます。

#r "nuget: Selenium.WebDriver, 4.1.0"

open System
open System.IO
open OpenQA.Selenium.Edge

// ■ Stable チャネルの msedge.exe へのパスを作成.
let combine l r = Path.Combine(l, r)
let programFilesX86 = Environment.GetFolderPath Environment.SpecialFolder.ProgramFilesX86
let msedge = @"Microsoft\Edge\Application\msedge.exe"
let stable = combine programFilesX86 msedge

// ■ Donwload した Microsoft Edge WebDriver (msedgedriver.exe) があるディレクトリへのパス.
let msedgedriver = @"C:\dirver"

// ■ WebDriver で利用する起動 Option を作成.
let options = EdgeOptions(BinaryLocation = stable)
options.AddArgument $"app=https://www.microsoft.com"

// ■ WebDriver を生成.
//   EdgeDriver コンストラクタの第一引数に msedgedriver.exe があるディレクトリへのパスを指定すれば, 
//   環境変数への登録は不要
let driver = new EdgeDriver(msedgedriver, options)

// とりあえず, タイトルを取得 -> 表示させてみる.
driver.Title |> printfn "%s"

// // ■ Edge プロセスの後始末.
// //   headless 起動した場合や, WebDriver で起動した Edge を開いておく必要がない場合は呼び出さないとプロセスが残る.
// driver.Dispose()
上記を dotnet fsi ./main.fsx などで実行すると, app-mode の Edge が起動してきて, コンソールにそのタイトルが出力されると思います。
▼ app-mode で起動した Edge


▼ タイトル バーの出力


これだけではつまらないので, HTML 要素を操作してみます。

上記のサンプルの一部を以下のように修正します。

let driver = new EdgeDriver(msedgedriver, options)

// bing に遷移.
driver.Navigate().GoToUrl("https://www.bing.com/")
// 検索フォームの input 要素を拾ってみる.
let elem = driver.FindElement (By.Id "sb_form_q")
// 検索キーワードを入力してみる.
elem.SendKeys "F#"
// 検索の実行
elem.Submit()
実行してみると, https://www.microsoft.com から https://www.bing.com に遷移し, その後, "F#" で検索した結果の画面に遷移するのを確認できると思います。

簡単ですね！
Owl.Edge.WebDriver の紹介

ただ, 生の API なので使い心地はあまりよくないです。
なので, F# 向けの Wrapper Library である「Owl.Edge.WebDriver」を作成しました。

まだ全然 API を網羅していないですし, できることは限られていますが, これからどんどん機能を増やしてきます。


もし, インターフェースや使い方などにご意見などなどありましたら, discussions で気軽にコメントください！
Owl.Edge.WebDriver を使ってみる

bing で検索したサンプルは以下のように書けます。
#r "nuget: Owl.Edge.WebDriver"

open Edge.WebDriver

// ■ Donwload した Microsoft Edge WebDriver (msedgedriver.exe) があるディレクトリへのパス.
let msedgedriver = @"C:\driver"

// ■ WebDriver で利用する起動 Option を作成.
let options = 
  options {
    use_beta        // use_xxx で利用する msedge.exe のチャネルを指定できる. default: stable
    use_app_mode "https://www.microsoft.com"
    // use_headless // headless モードで起動させたい場合に指定する.
  }

// ■ WebDriver の操作.
//   JavaScript の API 名っぽく作っている.
edge'with options msedgedriver {
  navigate "https://www.bing.com/"
  get_element_by_id "sb_form_q" into e

  // element の操作.
  element e {
    input "F#"
    submit
  } |> ignore

  // 以下のようにも書ける.
  // e |> input "F#" |> submit
}
// |> quit // Edge プロセスの後始末.
おわりに

所感としては Edge のバージョンと WebDriver のバージョンを完全一致させないといけないのが面倒だなと感じました。

Enterprise 利用で Edge のバージョンが固定されている環境であれば, そこまで気になりませんが, 個人利用だとちょっと手間ですね。

あと, ライブラリ作成者目線でいうと, Microsoft Edge Driver 自体の再頒布が禁止されているので, ライブラリに同梱できないのがアレだなと感じました.


ただ, まんま Selenium なので, Selenium を利用したことがある人にとっては抵抗感なく利用を開始できるのではないでしょうか。

Edge の自動化と言えば, WebDriver の他に Playwright と Puppeteer がありますので, そのうちそれらに関してもライブラリを作成していこうと思います。
No results found