Seleniumを利用したファイルのドラッグ&ドロップ

やりたいこと

JQuery#FileUpload等を利用している場合に、ドラッグ&ドロップのエリアにファイルをドロップするテストをSeleniumで行いたい。

SeleniumのWebElementの操作だけだと難しいので、JavascriptExecutorを利用して、JavaScriptで実現することを目指した。

動作環境

• Java 1.8
• Selenium 2.53.1

サンプル

final String dropAreaId = "#ドラッグドロップエリアのID";
// ダミーのinput-fileタグをスクリプトで生成する.
StringBuilder inputFileScript = new StringBuilder();
inputFileScript.append("seleniumUpload = window.$('<input/>').attr({id: 'seleniumUpload', type:'file', style:'display:none'}).appendTo('body');");
// スクリプトを実行する
((JavascriptExecutor) driver).executeScript(inputFileScript.toString());

// アップロードファイルパス(絶対パス)を設定する.
driver.findElement(By.id("seleniumUpload")).sendKeys(path);

// ダミーのinput-fileタグからドラッグドロップするスクリプト生成.
StringBuilder uploadScript = new StringBuilder();
uploadScript.append("e = $.Event('drop'); ")
            .append("e.originalEvent = {dataTransfer : { files : seleniumUpload.get(0).files } }; ")
            .append("$('" + dropAreaId + "').trigger(e); ");
// スクリプトを実行する
((JavascriptExecutor) driver).executeScript(uploadScript.toString());

一応これでうまくいきました。

参考

Using Selenium to imitate dragging a file onto an upload element
※リンク先はRubyのサンプル

Javaで絶対パスを取得するgetAbsolutePath()の罠と解決方法
※相対パスから絶対パスの取得時に参考にしました