AngularアプリとHTMLでDragEventをプログラム的に作成するには？Protractor APIの使い方

AngularアプリケーションやHTMLページでDragEvent（ドラッグイベント）をプログラム的に作成したい場合は、ProtractorのAPIを利用するのが最も簡単な方法です。この記事では、公式ドキュメントに基づいた実装方法を解説します。

Protractorの仕様：browser.getメソッドについて

Protractorの公式ドキュメントには、次のように記載されています。

The browser.get method loads a page. Protractor expects Angular to be present on a page,
so it will throw an error if the page it is attempting to load does not contain the
Angular library. (If you need to interact with a non-Angular page, you may access the
wrapped web driver instance directly with browser.driver).

つまり、browser.getメソッドはページをロードしますが、Protractorはページ上にAngularが存在することを前提としているため、ロード対象のページにAngularライブラリが含まれていない場合にはエラーがスローされます。

非Angularのページを操作する必要がある場合は、browser.driverを使用して、ラップされたWebドライバインスタンスに直接アクセスしましょう。

dragAndDropメソッドによるドラッグ＆ドロップのシミュレート

実際にDragEventを作成し、ドラッグ＆ドロップ操作をシミュレートするには、以下のパターンを使用します。

browser
.actions()
.dragAndDrop(myEle, {x:100,y:100})
.perform();

このコードでは、myEleで指定した要素を、X座標100・Y座標100の位置へドラッグ＆ドロップします。処理の流れは以下のとおりです。

• browser.actions()：アクションシーケンスを開始する
• dragAndDrop()：ドラッグ対象の要素と移動先の座標を指定する
• perform()：定義した一連の操作を実際に実行する

この方法を活用すれば、E2Eテストの中でドラッグ＆ドロップ操作を自動化でき、DragEventに依存するUIの動作検証も効率的に行えるようになります。

補足：Protractorのサポート終了について

なお、ProtractorはGoogleによって開発が終了（非推奨化）されており、現在はメンテナンスモードとなっています。新規プロジェクトでは、CypressやPlaywrightなど、ドラッグ＆ドロップ操作をネイティブにサポートするモダンなE2Eテストツールの採用もあわせて検討することをおすすめします。