SeleniumeBasicでドラッグ&ドロップの利用 usage_dragdrop

2023年2月12日2023年3月19日

　SeleniumBasicでドラッグ&ドロップする方法を説明します。
現在、Examplesで紹介されているSeleniumBasicのメソッドでは、動作不動となります。今回は、JavaScriptのスクリプト実行でドラッグ&ドロップする方法を紹介します。

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

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

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

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

ブラウザ上のWeb要素でドラッグ&ドロップ

　ブラウザ上で、ドラッグできる要素がある場合に、その要素をドラッグ&ドロップする方法です。ドラッグ&ドロップした要素は、ドロップ先に移すと消える様にホームページ上で設定されています。
要素を、リストの上から二番目（"ExpressVPN"）をドラッグする様に指定しています。

Private Sub JS_DragAndDrop()
    Dim Assert As New Selenium.Assert
    Dim Driver As New ChromeDriver
    Driver.Get "https://html5demos.com/drag"
    
    Dim ele_source As WebElement, ele_target As WebElement
    Set ele_source = Driver.FindElementById("two")
    Set ele_target = Driver.FindElementById("bin")
        
    Assert.True ele_source.IsPresent
    Driver.Wait 2000
    DragAndDropHTML5 ele_source, ele_target
    Driver.Wait 2000
    Assert.False ele_source.IsPresent
    Stop
    Driver.Quit
End Sub

Private Sub DragAndDropHTML5(source As WebElement, target As WebElement)
  Const JS_DnD As String = _
    "var s=this,t=arguments[0],d={dropEffect:'',types:[],setData:function(k,v){this[k]=" & _
    "v;types.append(k);},getData:function(k){return this[k]}},f=function(e,k){var u=doc" & _
    "ument.createEvent('Event');u.initEvent(k,1,1);u.dataTransfer=d;e.dispatchEvent(u);" & _
    "};f(s,'dragstart');f(t,'dragenter');f(t,'dragover');f(t,'drop');f(s,'dragend');"
  source.ExecuteScript JS_DnD, target
End Sub

　SeleniumBasicのメソッドにActions.DragAndDropメソッドがありますが、現在動作不動となります。　
12行目でDragAndDropHTML5関数（19行目）を呼び出し、ドラッグ&ドロップを実行しています。DragAndDropHTML5関数の引数は、以下の通りです。

source　⇒　ドラッグ&ドロップしたいWeb要素
target　⇒　ドロップ先のWeb要素

　参考までに、JavaScriptで指定しているコードも並べておきます。
（JavaScriptのコードは私は勉強していないので、勉強したら解説します。）

var 
s=this,
t=arguments[0],
d={
   dropEffect:'',
   types:[],
   setData:function(k,v){this[k]=v;types.append(k);},
   getData:function(k){return this[k]}
},
f=function(e,k){
   var u=document.createEvent('Event');
   u.initEvent(k,1,1);
   u.dataTransfer=d;e.dispatchEvent(u);
};

f(s,'dragstart');
f(t,'dragenter');
f(t,'dragover');
f(t,'drop');
f(s,'dragend');

テキストのドラッグ&ドロップ

　コード上で定義したテキストのドラッグ＆ドロップのコードを紹介します。

Private Sub JS_DropText()
    Dim Assert As New Selenium.Assert
    Dim Driver As New ChromeDriver
    Driver.Get "https://html5demos.com/drag-anything"
    
    Const DROP_TYPE = "text/message"
    Dim ele_drop As WebElement
    Set ele_drop = Driver.FindElementById("drop")
    Driver.Actions.MoveToElement(ele_drop).Perform
    Driver.Wait 2000
    DropDataHTML5 ele_drop, DROP_TYPE, "my text"
    Assert.Equals "my text", ele_drop.Text
    Stop
    Driver.Quit
End Sub

Private Sub DropDataHTML5(target As WebElement, dataType As String, data)
    Const JS_DropText As String = _
        "var t=this,m=arguments[0],v=arguments[1],d={dropEffect:'',types:[m],getData:funct" & _
        "ion(k){return v;}},f=function(e,k){var u=document.createEvent('Event');u.initEven" & _
        "t(k,1,1);u.dataTransfer=d;e.dispatchEvent(u);};f(t,'dragenter');f(t,'dragover');f" & _
        "(t,'drop');"
    target.ExecuteScript JS_DropText, Array(dataType, data)
End Sub

　11行目でDropDataHTML5関数（17行目）を呼び出し、ドラッグ&ドロップを実行しています。DropDataHTML5関数の引数は、以下の通りです。

target　⇒　ドロップ先のWeb要素
dataType 　⇒　データタイプの指定。テキスト形式は、”text/message”
data　⇒　定義したデータ。（”my text”）

　参考までに、JavaScriptで指定しているコードも並べておきます。
（JavaScriptのコードは私は勉強していないので、勉強したら解説します。）

var 
t=this,
m=arguments[0],
v=arguments[1],
d={dropEffect:'',types:[m],getData:function(k){return v;}},
f=function(e,k){
   var u=document.createEvent('Event');
   u.initEvent(k,1,1);
   u.dataTransfer=d;e.dispatchEvent(u);
};

f(t,'dragenter');
f(t,'dragover');
f(t,'drop');

画像ファイルのドラッグ&ドロップ

　画像ファイルをドラッグ&ドロップするために、適当な画像ファイルを保存するためのフォルダを作成しておきます。今回は、"C:\サンプル画像\sample.jpg"というパスで実行します。
以下、コードの紹介です。

Private Sub JS_DropFile()
  Dim Driver As New ChromeDriver
  Driver.Get "https://html5demos.com/file-api"
  Dim ele_drop As WebElement
  Set ele_drop = Driver.FindElementById("holder")
  
  DropFileHTML5 ele_drop, "C:/サンプル画像/sample.jpg"
  Stop
  Driver.Quit
End Sub

Private Sub DropFileHTML5(target As WebElement, filePath As String)
    Const JS_NewInput = _
        "var e=document.createElement('input');e.type='file';" & _
        "document.body.appendChild(e);return e;"
    Const JS_DropFile = _
        "var s=this,t=arguments[0],d={dropEffect:'',files:s.files},f=function(e,k){u=docum" & _
        "ent.createEvent('Event');u.initEvent(k,1,1);u.dataTransfer=d;e.dispatchEvent(u);}" & _
        ";f(t,'dragenter');f(t,'dragover');f(t,'drop');"    
      
    Dim source As WebElement
    Set source = target.ExecuteScript(JS_NewInput)
    source.SendKeys filePath
    source.ExecuteScript JS_DropFile, target
End Sub

　7行目でDropFileHTML5関数（12行目）を呼び出し、ドラッグ&ドロップを実行しています。DropFileHTML5関数の引数は、以下の通りです。

target　⇒　ドロップ先のWeb要素
filePath　⇒　指定画像ファイルのフルパス

　参考までに、JavaScriptで指定しているコードも並べておきます。
（JavaScriptのコードは私は勉強していないので、勉強したら解説します。）

var 
e=document.createElement('input');
e.type='file';document.body.appendChild(e);return e;

var 
s=this,
t=arguments[0],
d={dropEffect:'',files:s.files},
f=function(e,k){
   u=document.createEvent('Event');
   u.initEvent(k,1,1);
   u.dataTransfer=d;
   e.dispatchEvent(u);
};

f(t,'dragenter');
f(t,'dragover');
f(t,'drop');

SeleniumBasic Exmaples リファレンス

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