SeleniumeBasicでテキストの入力 usage_input

2023年2月18日2023年8月6日

　今回はSeleniumBasicを利用して、検索ボックスや入力ボックスにテキストを入力、挿入する構文を紹介します。

利用目的は業務効率化です。（テスト自動化ではありません）
ブラウザはGoogleChromeが対象です。（EdgeやFirefoxは対象外）
原文のVBAでは現在エラー発生する場合が多いため、修正を加えてます。

Examples.xlsmの保存場所（ここをクリック）

　Examples.xlsmが保存されている場所は、SeleniumBasicがインストールされているサブフォルダ内になります。SeleniumBasicのインストール完了時に保存フォルダを確認することができます。ただ、大体以下フォルダのどちらかにファイル保存されています。

C:\Program Files\Seleniumbasic\Examples\Excel
shell:Local AppData\SeleniumBasic\Examples\Excel

検索ボックスに入力

　ウィキペディアホームページ内にある検索ボックスに「abc」と入力し、検索実行する構文を説明します。

Private Sub Handle_Input()
    Dim Assert As New Selenium.Assert
    Dim Driver As New ChromeDriver
    Driver.Get "https://ja.wikipedia.org/wiki/Main_Page"
    Dim ele As WebElement
    Set ele = Driver.FindElementById("searchInput")
    ele.SendKeys "abc"
    Dim txt As String: txt = ele.Value
    Assert.Equals "abc", txt
    'Driver.Wait 1000　←Submitより前にWaitすると、Submitがエラーになる。
    'Stop ←Submitより前にストップすると、Submitがエラーになる。
    ele.Submit
    Stop
    Driver.Quit
End Sub

５，６行目：ウィキペディアの検索ボックスをIdタグ名でキャッチ
７行目：キャッチした検索ボックスに文字列（"abc"）を入力
８，９行目：Assertで入力チェック
１２行目：フォームの送信

　１０，１１行目でStopやWait処理をコメントアウトしています。構文内にも書いているとおり、Submitメソッドより前にこれらの処理を挿入すると、Submitでエラーが発生します。
　代わりに、文字列（"abc"）を検索ボックスに入力した後、Enterキーを入力し、検索実行させることもできますが、ウィキペディアの検索は、文字列を挿入した時点で検索候補が出てくるのでこの様な検索ボックスの場合、注意が必要です。
　どーゆーことか、説明します。まず、Enterキーを入力する手段を、構文紹介されている例も見ながら3種類ご案内します。

'SeleniumのKeysクラスを利用
Dim Keys As New Selenium.Keys
Driver.SendKeys Keys.Enter

'Autoitでエンター入力
Private Function Handle_Input_With_Autoit()
    Set autoit = CreateObject("AutoItX3.Control")
    autoit.Send "{ENTER}"
End Sub

'WScriptでエンター入力
Private Function Handle_Input_With_WScript()
    Set wsh = CreateObject("WScript.Shell")
    wsh.SendKeys "{ENTER}"
End Sub

　AutoitやWScriptを利用する場合は、Call等で呼出し実行します。
これらの構文をele.Submitの代わりに挿入し、思う様に動作しない事例をスクショ取りながらご案内します。

　文字列入力時に、検索候補が出てきます。検索候補が出てきた時にマウスポインタがちょうど「ABCフレッシュアップベースボール」の箇所に置かれています。この状態でエンターキーを入力すると、「ABCフレッシュアップベースボール」の検索結果が反映されてしまします。

JavaScrioptで検索ボックスに入力

　JavaScriptの構文を利用し、検索ボックスに文字列を挿入する方法を紹介します。

Private Sub Handle_Input_With_Script()
    Dim Driver As New ChromeDriver
    Driver.Get "https://ja.wikipedia.org"
    Dim ele As WebElement
    Set ele = Driver.FindElementById("searchInput")
    ele.ExecuteScript "this.value=arguments[0];", "abc"
    ele.Submit
    Stop
    Driver.Quit
End Sub

４，５行目：ウィキペディアの検索ボックスをIdタグ名でキャッチ
６行目：JavaScriptでキャッチした検索ボックスに文字列（"abc"）を入力
７行目：フォームの送信

JavaScriptでTinyMCE_APIを利用

　TinyMCEという、リッチテキストを扱えるエディターをホームページで設定し、APIを利用した文字列挿入の方法を紹介します。TinyMCEは、開発用で利用するエディターの様で、SeleniumBasicが業務効率化を目的とした私の様なユーザでは馴染みがありませんが、面白そうなので紹介します。そもそもTinyMCEが埋め込まれているホームページがある事が前提ですので、ほぼ目的は開発用と思って良いかと思います。まず、TinyMCEのホームーページを以下ご案内します。

TinyMCE

The Most Trusted & Feature-rich WYSIWYG Rich Text Editor | TinyMCE The Most Trusted and Feature-rich WYSIWYG Rich Text Editor

構文は、テキスト入力ボックスにHTMLタグを利用しながら、リッチテキストを挿入します。
①"12345"をemタグ付き（斜体文字）のリッチテキストで挿入し、pタグで改行
②"abcdefg"をemタグ付き（斜体文字）のリッチテキストで挿入し、pタグで改行

Private Sub Handle_TinyMCE_API()
    Dim Assert As New Selenium.Assert
    Dim Driver As New ChromeDriver
    Driver.Get "https://the-internet.herokuapp.com/tinymce"
    data_set = "<p><em>12345</em></p>"
    Driver.ExecuteScript "tinyMCE.activeEditor.setContent(arguments[0])", data_set
    Stop
    data_instert = "<p><em>abcdefg</em></p>"
    Driver.ExecuteScript "tinyMCE.activeEditor.insertContent(arguments[0])", data_instert
    Stop
    data_read = Driver.ExecuteScript("return tinyMCE.activeEditor.getContent()")
    Assert.Equals data_instert & vbLf & data_set, data_read
    Debug.Print data_read
    Driver.Quit
End Sub

５行目：リッチテキストをHTML形式で設定。テキストは、"12345"
６行目：JavaScriptでTinyMCE_APIを呼出し、前行で設定したリッチテキストを入力。activeEditorの説明は、こちらにありました。setContentメソッドは、入力モードでテキスト入力します。テキストボックスには、事前に"Your content goes here."という文字列が入力されていますが、入力モードで一からテキストを入力しますので、"Your content goes here."はクリアされ、"12345"が入力されます。
５行目：リッチテキストをHTML形式で設定。テキストは、"abcdefg"
６行目：JavaScriptでTinyMCE_APIを呼出し、前行で設定したリッチテキストを挿入。insertContentメソッドは、追加モードでテキスト入力します。この行でsetContentメソッドを利用すれば、"12345"はクリアされ、"abcdefg"のみが入力されます。
１１行目：テキストボックスに入力された文字列をgetContentメソッドで取得します。
１２行目：Assertで取得した文字列と設定した文字列が合致しているかチェック
１３行目：イミディエイトウィンドウに出力

TinyMCEエディター内で書式変更

　TinyMCEエディター内で書式変更ボタンのWeb要素を取得し、入力文字の書式変更を設定します。SeleniumBasicとしては特別な処理を行っておらず、単純にWeb要素を取得して、ボタンクリックで書式設定し、テキスト入力する動作になります。

Private Sub Handle_TinyMCE_Simulate()
    Dim Assert As New Selenium.Assert
    Dim Driver As New ChromeDriver
    Driver.Get "https://the-internet.herokuapp.com/tinymce"
    Dim btBold As WebElement, btItalic As WebElement, body As WebElement
    Set btBold = Driver.FindElementByCss("#content > div > div > div.tox-editor-container > div.tox-editor-header > div.tox-toolbar-overlord > div > div:nth-child(3) > button:nth-child(1)")
    Set btItalic = Driver.FindElementByCss("#content > div > div > div.tox-editor-container > div.tox-editor-header > div.tox-toolbar-overlord > div > div:nth-child(3) > button:nth-child(2)")
    Driver.SwitchToFrame 0 '= Default
    Set body = Driver.FindElementByTag("body")
    body.Clear
    Driver.SwitchToDefaultContent
    btBold.Click
    btItalic.Click
    Driver.SwitchToFrame 0
    body.SendKeys "abcde12345"
    Assert.Equals "abcde12345", body.Text
    Driver.Wait 2000
    Driver.Quit
End Sub

５～６行目：太文字設定ボタン、斜体文字設定ボタンのWeb要素を設定
８行目：フレーム（テキスト入力ボックス）にドライバーを移動
９行目：Bodyタグの取得
１０行目：Bodyタグ内のテキストをクリア
１１行目：フレームから一度ドライバーを本体に戻す
１２行目：太文字設定ボタンをクリック
１３行目：斜体文字設定ボタンをクリック
１４行目：再度、フレーム（テキスト入力ボックス）にドライバーを移動
１５行目："abcde12345"を入力。事前に書式設定されているため、太文字設定、斜体文字設定で入力。
１６行目：入力内容のチェック

SeleniumBasic Exmaples リファレンス

よかったらシェアしてね！