From 9a7bcf70d447d4f1a50c97b73e73780a0611dc52 Mon Sep 17 00:00:00 2001
From: Dan Park <danpark@salesforce.com>
Date: Fri, 23 Apr 2021 19:01:49 -0700
Subject: [PATCH 01/10] Add drag-and-drop support.

This commit adds drag-and-drop support, leveraging new additions to the CDP
Input domain (Input.setInterceptDrags, Input.dispatchDragEvent, and
Input.dragIntercepted).
---
 src/common/Input.ts                  | 51 ++++++++++++++++++++++++++++
 src/common/JSHandle.ts               | 20 +++++++++++
 test/assets/input/drag-and-drop.html | 37 ++++++++++++++++++++
 test/drag-and-drop.spec.ts           | 47 +++++++++++++++++++++++++
 4 files changed, 155 insertions(+)
 create mode 100644 test/assets/input/drag-and-drop.html
 create mode 100644 test/drag-and-drop.spec.ts

diff --git a/src/common/Input.ts b/src/common/Input.ts
index c568856a7d647..9c94e0106600f 100644
--- a/src/common/Input.ts
+++ b/src/common/Input.ts
@@ -17,6 +17,7 @@
 import { assert } from './assert.js';
 import { CDPSession } from './Connection.js';
 import { keyDefinitions, KeyDefinition, KeyInput } from './USKeyboardLayout.js';
+import { Protocol } from 'devtools-protocol';
 
 type KeyDescription = Required<
   Pick<KeyDefinition, 'keyCode' | 'key' | 'text' | 'code' | 'location'>
@@ -296,6 +297,14 @@ export interface MouseWheelOptions {
   deltaY?: number;
 }
 
+/**
+ * @public
+ */
+export interface Point {
+  x: number;
+  y: number;
+}
+
 /**
  * The Mouse class operates in main-frame CSS pixels
  * relative to the top-left corner of the viewport.
@@ -485,6 +494,48 @@ export class Mouse {
       pointerType: 'mouse',
     });
   }
+
+  /**
+   * Dispatches a `drag` event.
+   * @param client - CDP session
+   * @param source - starting point for drag
+   * @param destination - point to drag to
+   * ```
+   */
+  async drag(client: CDPSession, source: Point, destination: Point): Promise<Protocol.Input.DragInterceptedEvent> {
+    await client.send('Input.setInterceptDrags', { enabled: true });
+    const promise = new Promise<Protocol.Input.DragInterceptedEvent>((resolve, reject) => {
+        client.once('Input.dragIntercepted', event => {
+          client.send('Input.setInterceptDrags', { enabled: false })
+            .then(() => client.detach())
+            .then(() => resolve(event))
+            .catch(error => reject(error));
+        });
+    });
+    await this.move(source.x, source.y);
+    await this.down();
+    await this.move(destination.x, destination.y);
+    return promise;
+  }
+
+  /**
+   * Perfoms a dragenter, dragover, and drop.
+   * @param destination - point to drop on
+   * @param data - drag data containing items and operations mask
+   * ```
+   */
+  async drop(destination: Point, data: Protocol.Input.DragData) {
+        const args = {
+            x: destination.x,
+            y: destination.y,
+            data
+        }
+        await this.move(destination.x, destination.y);
+        await this._client.send('Input.dispatchDragEvent', { ...args, type: 'dragEnter' });
+        await this._client.send('Input.dispatchDragEvent', { ...args, type: 'dragOver' });
+        await this._client.send('Input.dispatchDragEvent', { ...args, type: 'drop' });
+        await this.up();
+  }
 }
 
 /**
diff --git a/src/common/JSHandle.ts b/src/common/JSHandle.ts
index db83587be5aa9..3805f56f34e0c 100644
--- a/src/common/JSHandle.ts
+++ b/src/common/JSHandle.ts
@@ -32,6 +32,7 @@ import {
   UnwrapPromiseLike,
 } from './EvalTypes.js';
 import { isNode } from '../environment.js';
+import { Point } from './Input.js';
 /**
  * @public
  */
@@ -497,6 +498,25 @@ export class ElementHandle<
     await this._page.mouse.click(x, y, options);
   }
 
+  /**
+   * This method creates and captures a drag event from the element.
+   */
+  async drag(destination:Point): Promise<Protocol.Input.DragInterceptedEvent> {
+    await this._scrollIntoViewIfNeeded();
+    const source = await this._clickablePoint();
+    const client = await this._page.target().createCDPSession();
+    return await this._page.mouse.drag(client, source, destination);
+  }
+
+  /**
+   * This method triggers a dragenter, dragover, and drop on the element.
+   */
+  async drop(data:Protocol.Input.DragData = { items: [], dragOperationsMask: 1 }): Promise<void> {
+    await this._scrollIntoViewIfNeeded();
+    const destination = await this._clickablePoint();
+    await this._page.mouse.drop(destination, data);
+  }
+
   /**
    * Triggers a `change` and `input` event once all the provided options have been
    * selected. If there's no `<select>` element matching `selector`, the method
diff --git a/test/assets/input/drag-and-drop.html b/test/assets/input/drag-and-drop.html
new file mode 100644
index 0000000000000..01ebff7faaf3c
--- /dev/null
+++ b/test/assets/input/drag-and-drop.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Drag-and-drop test</title>
+    <style>
+      #drop {
+        width: 5em;
+        height: 5em;
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="drag" draggable="true">drag me</div>
+    <div id="drop"></div>
+    <script>
+      window.dropped = false;
+      var drag = document.getElementById('drag');
+      var drop = document.getElementById('drop');
+      drag.addEventListener('dragstart', function(e) {
+        e.dataTransfer.setData('id', e.target.id);
+      });
+      drop.addEventListener('dragover', function(e) {
+        e.preventDefault();
+      });
+      drop.addEventListener('drop', function(e) {
+        e.preventDefault();
+        var id = e.dataTransfer.getData('id');
+        var el = document.getElementById(id);
+        if (el) {
+          e.target.appendChild(el);
+          window.dropped = true;
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/test/drag-and-drop.spec.ts b/test/drag-and-drop.spec.ts
new file mode 100644
index 0000000000000..7669be712f487
--- /dev/null
+++ b/test/drag-and-drop.spec.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright 2018 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import expect from 'expect';
+import {
+  getTestState,
+  setupTestPageAndContextHooks,
+  setupTestBrowserHooks,
+  itFailsFirefox,
+} from './mocha-utils'; // eslint-disable-line import/extensions
+import utils from './utils.js';
+
+describe('Input.drag', function () {
+  setupTestBrowserHooks();
+  setupTestPageAndContextHooks();
+  it('should emit a dragIntercepted event when dragged', async () => {
+    const { page, server } = getTestState();
+
+    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    const draggable = await page.$('#drag');
+    const event = await draggable.drag({ x: 1, y: 1 });
+    expect(event.data.items.length).toBe(1);
+  });
+  it('can be dropped', async () => {
+    const { page, server } = getTestState();
+
+    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    const draggable = await page.$('#drag');
+    const dropzone = await page.$('#drop');
+    const { data } = await draggable.drag({ x: 1, y: 1 });
+    await dropzone.drop(data);
+    expect(await page.evaluate(() => globalThis.dropped)).toBe(true);
+  });
+});

From 3da04705fa9b5777a9ce5900213db3c2ff7147e8 Mon Sep 17 00:00:00 2001
From: Dan Park <danpark@salesforce.com>
Date: Mon, 26 Apr 2021 11:48:09 -0700
Subject: [PATCH 02/10] Address feedback.

* Update date in test
* Pass modifiers when dispatching drag events
* Return DragData directly instead of event
---
 src/common/Input.ts                  |  9 +++++----
 src/common/JSHandle.ts               |  2 +-
 test/assets/input/drag-and-drop.html | 13 +++++++++++--
 test/drag-and-drop.spec.ts           | 14 +++++++++-----
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/common/Input.ts b/src/common/Input.ts
index 9c94e0106600f..31bd589d83648 100644
--- a/src/common/Input.ts
+++ b/src/common/Input.ts
@@ -502,13 +502,13 @@ export class Mouse {
    * @param destination - point to drag to
    * ```
    */
-  async drag(client: CDPSession, source: Point, destination: Point): Promise<Protocol.Input.DragInterceptedEvent> {
+  async drag(client: CDPSession, source: Point, destination: Point): Promise<Protocol.Input.DragData> {
     await client.send('Input.setInterceptDrags', { enabled: true });
-    const promise = new Promise<Protocol.Input.DragInterceptedEvent>((resolve, reject) => {
+    const promise = new Promise<Protocol.Input.DragData>((resolve, reject) => {
         client.once('Input.dragIntercepted', event => {
           client.send('Input.setInterceptDrags', { enabled: false })
             .then(() => client.detach())
-            .then(() => resolve(event))
+            .then(() => resolve(event.data))
             .catch(error => reject(error));
         });
     });
@@ -519,7 +519,7 @@ export class Mouse {
   }
 
   /**
-   * Perfoms a dragenter, dragover, and drop.
+   * Performs a dragenter, dragover, and drop in sequence.
    * @param destination - point to drop on
    * @param data - drag data containing items and operations mask
    * ```
@@ -528,6 +528,7 @@ export class Mouse {
         const args = {
             x: destination.x,
             y: destination.y,
+            modifiers: this._keyboard._modifiers,
             data
         }
         await this.move(destination.x, destination.y);
diff --git a/src/common/JSHandle.ts b/src/common/JSHandle.ts
index 3805f56f34e0c..50eecec6a8124 100644
--- a/src/common/JSHandle.ts
+++ b/src/common/JSHandle.ts
@@ -501,7 +501,7 @@ export class ElementHandle<
   /**
    * This method creates and captures a drag event from the element.
    */
-  async drag(destination:Point): Promise<Protocol.Input.DragInterceptedEvent> {
+  async drag(destination:Point): Promise<Protocol.Input.DragData> {
     await this._scrollIntoViewIfNeeded();
     const source = await this._clickablePoint();
     const client = await this._page.target().createCDPSession();
diff --git a/test/assets/input/drag-and-drop.html b/test/assets/input/drag-and-drop.html
index 01ebff7faaf3c..8d4cecf1b604f 100644
--- a/test/assets/input/drag-and-drop.html
+++ b/test/assets/input/drag-and-drop.html
@@ -14,14 +14,23 @@
     <div id="drag" draggable="true">drag me</div>
     <div id="drop"></div>
     <script>
-      window.dropped = false;
+      window.didDragStart = false;
+      window.didDragEnter = false;
+      window.didDragOver = false;
+      window.didDrop = false;
       var drag = document.getElementById('drag');
       var drop = document.getElementById('drop');
       drag.addEventListener('dragstart', function(e) {
         e.dataTransfer.setData('id', e.target.id);
+        window.didDragStart = true;
+      });
+      drop.addEventListener('dragenter', function(e) {
+        e.preventDefault();
+        window.didDragEnter = true;
       });
       drop.addEventListener('dragover', function(e) {
         e.preventDefault();
+        window.didDragOver = true;
       });
       drop.addEventListener('drop', function(e) {
         e.preventDefault();
@@ -29,7 +38,7 @@
         var el = document.getElementById(id);
         if (el) {
           e.target.appendChild(el);
-          window.dropped = true;
+          window.didDrop = true;
         }
       });
     </script>
diff --git a/test/drag-and-drop.spec.ts b/test/drag-and-drop.spec.ts
index 7669be712f487..b23443ae65cea 100644
--- a/test/drag-and-drop.spec.ts
+++ b/test/drag-and-drop.spec.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright 2018 Google Inc. All rights reserved.
+ * Copyright 2021 Google Inc. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -31,8 +31,9 @@ describe('Input.drag', function () {
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
     const draggable = await page.$('#drag');
-    const event = await draggable.drag({ x: 1, y: 1 });
-    expect(event.data.items.length).toBe(1);
+    const data = await draggable.drag({ x: 1, y: 1 });
+    expect(data.items.length).toBe(1);
+    expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
   });
   it('can be dropped', async () => {
     const { page, server } = getTestState();
@@ -40,8 +41,11 @@ describe('Input.drag', function () {
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
     const draggable = await page.$('#drag');
     const dropzone = await page.$('#drop');
-    const { data } = await draggable.drag({ x: 1, y: 1 });
+    const data = await draggable.drag({ x: 1, y: 1 });
     await dropzone.drop(data);
-    expect(await page.evaluate(() => globalThis.dropped)).toBe(true);
+    expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
+    expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
+    expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
+    expect(await page.evaluate(() => globalThis.didDrop)).toBe(true);
   });
 });

From 167c4a54e7e4dfa33ef11cf6d62c0556b1c3eaa8 Mon Sep 17 00:00:00 2001
From: Dan Park <danpark@salesforce.com>
Date: Tue, 27 Apr 2021 17:36:53 -0700
Subject: [PATCH 03/10] Address feedback.

* Moved drag interception code to Page
* Added tests for drag interception enablement
---
 src/common/Input.ts        | 11 ++---------
 src/common/JSHandle.ts     |  4 ++--
 src/common/Page.ts         | 18 ++++++++++++++++++
 test/drag-and-drop.spec.ts | 31 +++++++++++++++++++++++++++++++
 4 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/src/common/Input.ts b/src/common/Input.ts
index 31bd589d83648..574a71c412b7b 100644
--- a/src/common/Input.ts
+++ b/src/common/Input.ts
@@ -497,20 +497,13 @@ export class Mouse {
 
   /**
    * Dispatches a `drag` event.
-   * @param client - CDP session
    * @param source - starting point for drag
    * @param destination - point to drag to
    * ```
    */
-  async drag(client: CDPSession, source: Point, destination: Point): Promise<Protocol.Input.DragData> {
-    await client.send('Input.setInterceptDrags', { enabled: true });
+  async drag(source: Point, destination: Point): Promise<Protocol.Input.DragData> {
     const promise = new Promise<Protocol.Input.DragData>((resolve, reject) => {
-        client.once('Input.dragIntercepted', event => {
-          client.send('Input.setInterceptDrags', { enabled: false })
-            .then(() => client.detach())
-            .then(() => resolve(event.data))
-            .catch(error => reject(error));
-        });
+      this._client.once('Input.dragIntercepted', event => resolve(event.data));
     });
     await this.move(source.x, source.y);
     await this.down();
diff --git a/src/common/JSHandle.ts b/src/common/JSHandle.ts
index 50eecec6a8124..802a39b51e197 100644
--- a/src/common/JSHandle.ts
+++ b/src/common/JSHandle.ts
@@ -502,10 +502,10 @@ export class ElementHandle<
    * This method creates and captures a drag event from the element.
    */
   async drag(destination:Point): Promise<Protocol.Input.DragData> {
+    assert(this._page.isDragInterceptionEnabled, 'Drag Interception is not enabled!');
     await this._scrollIntoViewIfNeeded();
     const source = await this._clickablePoint();
-    const client = await this._page.target().createCDPSession();
-    return await this._page.mouse.drag(client, source, destination);
+    return await this._page.mouse.drag(source, destination);
   }
 
   /**
diff --git a/src/common/Page.ts b/src/common/Page.ts
index 7119ce6759f42..1533de47efa23 100644
--- a/src/common/Page.ts
+++ b/src/common/Page.ts
@@ -463,6 +463,7 @@ export class Page extends EventEmitter {
   private _fileChooserInterceptors = new Set<Function>();
 
   private _disconnectPromise?: Promise<Error>;
+  private _userDragInterceptionEnabled = false;
 
   /**
    * @internal
@@ -748,6 +749,10 @@ export class Page extends EventEmitter {
     return this._accessibility;
   }
 
+  get isDragInterceptionEnabled(): boolean {
+    return this._userDragInterceptionEnabled;
+  }
+
   /**
    * @returns An array of all frames attached to the page.
    */
@@ -799,6 +804,19 @@ export class Page extends EventEmitter {
     return this._frameManager.networkManager().setRequestInterception(value);
   }
 
+  /**
+   * @param enabled - Whether to enable drag interception.
+   *
+   * @remarks
+   * Activating drag interception enables the {@link Input.drag},
+   * methods  This provides the capability to capture drag events emitted
+   * on the page, which can then be used to simulate drag-and-drop behaviors.
+   */
+  async setDragInterception(enabled: boolean): Promise<void> {
+    this._userDragInterceptionEnabled = enabled;
+    return this._client.send('Input.setInterceptDrags', { enabled });
+  }
+
   /**
    * @param enabled - When `true`, enables offline mode for the page.
    */
diff --git a/test/drag-and-drop.spec.ts b/test/drag-and-drop.spec.ts
index b23443ae65cea..af53ecf2be4f5 100644
--- a/test/drag-and-drop.spec.ts
+++ b/test/drag-and-drop.spec.ts
@@ -26,12 +26,26 @@ import utils from './utils.js';
 describe('Input.drag', function () {
   setupTestBrowserHooks();
   setupTestPageAndContextHooks();
+  it('should throw exception if not enabled before using', async() => {
+    const { page, server } = getTestState();
+
+    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    const draggable = await page.$('#drag');
+
+    try {
+      await draggable.drag({ x: 1, y: 1 });
+    } catch(error) {
+      expect(error.message).toContain('Drag Interception is not enabled!');
+    }
+  });
   it('should emit a dragIntercepted event when dragged', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    await page.setDragInterception(true);
     const draggable = await page.$('#drag');
     const data = await draggable.drag({ x: 1, y: 1 });
+
     expect(data.items.length).toBe(1);
     expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
   });
@@ -39,13 +53,30 @@ describe('Input.drag', function () {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    await page.setDragInterception(true);
     const draggable = await page.$('#drag');
     const dropzone = await page.$('#drop');
     const data = await draggable.drag({ x: 1, y: 1 });
     await dropzone.drop(data);
+
     expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDrop)).toBe(true);
   });
+  it('can be disabled', async () => {
+    const { page, server } = getTestState();
+
+    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    await page.setDragInterception(true);
+    const draggable = await page.$('#drag');
+    await draggable.drag({ x: 1, y: 1 });
+    await page.setDragInterception(false);
+
+    try {
+      await draggable.drag({ x: 1, y: 1 });
+    } catch(error) {
+      expect(error.message).toContain('Drag Interception is not enabled!');
+    }
+  });
 });

From 3d12132f68f43e053280bdf3d53c349acde36cc3 Mon Sep 17 00:00:00 2001
From: Dan Park <danpark@salesforce.com>
Date: Fri, 7 May 2021 16:32:07 -0700
Subject: [PATCH 04/10] Address feedback.

* Add separate methods for dragEnter and dragOver
* Fix lint errors
* Add some docs for ElementHandle.drag() and Mouse.drag()
---
 docs/api.md                             | 23 +++++++
 src/common/Input.ts                     | 85 +++++++++++++++++++------
 src/common/JSHandle.ts                  | 42 ++++++++++--
 test/drag-and-drop.spec.ts              | 55 ++++++++++++++--
 utils/doclint/check_public_api/index.js | 21 ++++++
 5 files changed, 194 insertions(+), 32 deletions(-)

diff --git a/docs/api.md b/docs/api.md
index cbc5a257eb5d0..01a11c3d73a1d 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -214,6 +214,7 @@
 - [class: Mouse](#class-mouse)
   * [mouse.click(x, y[, options])](#mouseclickx-y-options)
   * [mouse.down([options])](#mousedownoptions)
+  * [mouse.drag(start, target)](#mousedragstart-target)
   * [mouse.move(x, y[, options])](#mousemovex-y-options)
   * [mouse.up([options])](#mouseupoptions)
   * [mouse.wheel([options])](#mousewheeloptions)
@@ -296,6 +297,7 @@
   * [elementHandle.click([options])](#elementhandleclickoptions)
   * [elementHandle.contentFrame()](#elementhandlecontentframe)
   * [elementHandle.dispose()](#elementhandledispose)
+  * [elementHandle.drag(target)](#elementhandledragtarget)
   * [elementHandle.evaluate(pageFunction[, ...args])](#elementhandleevaluatepagefunction-args)
   * [elementHandle.evaluateHandle(pageFunction[, ...args])](#elementhandleevaluatehandlepagefunction-args)
   * [elementHandle.executionContext()](#elementhandleexecutioncontext)
@@ -2960,6 +2962,18 @@ Shortcut for [`mouse.move`](#mousemovex-y-options), [`mouse.down`](#mousedownopt
 
 Dispatches a `mousedown` event.
 
+#### mouse.drag(start, target)
+
+- `start` <[Object]>
+  - `x` <[number]> x coordinate
+  - `y` <[number]> y coordinate
+- `target` <[Object]>
+  - `x` <[number]> x coordinate
+  - `y` <[number]> y coordinate
+- returns: <[Promise<[DragData]>]>
+
+This method creates and captures a dragevent from a given point.
+
 #### mouse.move(x, y[, options])
 
 - `x` <[number]>
@@ -4045,6 +4059,15 @@ If the element is detached from DOM, the method throws an error.
 
 The `elementHandle.dispose` method stops referencing the element handle.
 
+#### elementHandle.drag(target)
+
+- `target` <[Object]>
+  - `x` <[number]> x coordinate
+  - `y` <[number]> y coordinate
+- returns: <[Promise<[DragData]>]>
+
+This method creates and captures a dragevent from the element.
+
 #### elementHandle.evaluate(pageFunction[, ...args])
 
 - `pageFunction` <[function]\([Object]\)> Function to be evaluated in browser context
diff --git a/src/common/Input.ts b/src/common/Input.ts
index 574a71c412b7b..96ced813e4397 100644
--- a/src/common/Input.ts
+++ b/src/common/Input.ts
@@ -497,38 +497,83 @@ export class Mouse {
 
   /**
    * Dispatches a `drag` event.
-   * @param source - starting point for drag
-   * @param destination - point to drag to
+   * @param start - starting point for drag
+   * @param target - point to drag to
    * ```
    */
-  async drag(source: Point, destination: Point): Promise<Protocol.Input.DragData> {
-    const promise = new Promise<Protocol.Input.DragData>((resolve, reject) => {
-      this._client.once('Input.dragIntercepted', event => resolve(event.data));
+  async drag(start: Point, target: Point): Promise<Protocol.Input.DragData> {
+    const promise = new Promise<Protocol.Input.DragData>((resolve) => {
+      this._client.once('Input.dragIntercepted', (event) =>
+        resolve(event.data)
+      );
     });
-    await this.move(source.x, source.y);
+    await this.move(start.x, start.y);
     await this.down();
-    await this.move(destination.x, destination.y);
+    await this.move(target.x, target.y);
     return promise;
   }
 
+  /**
+   * Dispatches a `dragenter` event.
+   * @param target - point for emitting `dragenter` event
+   * ```
+   */
+  async dragEnter(target: Point, data: Protocol.Input.DragData): Promise<void> {
+    await this.move(target.x, target.y);
+    await this._client.send('Input.dispatchDragEvent', {
+      type: 'dragEnter',
+      x: target.x,
+      y: target.y,
+      modifiers: this._keyboard._modifiers,
+      data,
+    });
+  }
+
+  /**
+   * Dispatches a `dragover` event.
+   * @param target - point for emitting `dragover` event
+   * ```
+   */
+  async dragOver(target: Point, data: Protocol.Input.DragData): Promise<void> {
+    await this.move(target.x, target.y);
+    await this._client.send('Input.dispatchDragEvent', {
+      type: 'dragOver',
+      x: target.x,
+      y: target.y,
+      modifiers: this._keyboard._modifiers,
+      data,
+    });
+  }
+
   /**
    * Performs a dragenter, dragover, and drop in sequence.
-   * @param destination - point to drop on
+   * @param target - point to drop on
    * @param data - drag data containing items and operations mask
+   * @param options - An object of options. Accepts delay which,
+   * if specified, is the time to wait between `dragover` and `drop` in milliseconds.
+   * Defaults to 0.
    * ```
    */
-  async drop(destination: Point, data: Protocol.Input.DragData) {
-        const args = {
-            x: destination.x,
-            y: destination.y,
-            modifiers: this._keyboard._modifiers,
-            data
-        }
-        await this.move(destination.x, destination.y);
-        await this._client.send('Input.dispatchDragEvent', { ...args, type: 'dragEnter' });
-        await this._client.send('Input.dispatchDragEvent', { ...args, type: 'dragOver' });
-        await this._client.send('Input.dispatchDragEvent', { ...args, type: 'drop' });
-        await this.up();
+  async drop(
+    target: Point,
+    data: Protocol.Input.DragData,
+    options: { delay?: number } = {}
+  ): Promise<void> {
+    const { delay = null } = options;
+    await this.move(target.x, target.y);
+    await this.dragEnter(target, data);
+    await this.dragOver(target, data);
+    if (delay) {
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+    await this._client.send('Input.dispatchDragEvent', {
+      type: 'drop',
+      x: target.x,
+      y: target.y,
+      modifiers: this._keyboard._modifiers,
+      data,
+    });
+    await this.up();
   }
 }
 
diff --git a/src/common/JSHandle.ts b/src/common/JSHandle.ts
index 802a39b51e197..7bbbdb732164a 100644
--- a/src/common/JSHandle.ts
+++ b/src/common/JSHandle.ts
@@ -499,22 +499,50 @@ export class ElementHandle<
   }
 
   /**
-   * This method creates and captures a drag event from the element.
+   * This method creates and captures a dragevent from the element.
    */
-  async drag(destination:Point): Promise<Protocol.Input.DragData> {
-    assert(this._page.isDragInterceptionEnabled, 'Drag Interception is not enabled!');
+  async drag(target: Point): Promise<Protocol.Input.DragData> {
+    assert(
+      this._page.isDragInterceptionEnabled,
+      'Drag Interception is not enabled!'
+    );
+    await this._scrollIntoViewIfNeeded();
+    const start = await this._clickablePoint();
+    return await this._page.mouse.drag(start, target);
+  }
+
+  /**
+   * This method creates a `dragenter` event on the element.
+   */
+  async dragEnter(
+    data: Protocol.Input.DragData = { items: [], dragOperationsMask: 1 }
+  ): Promise<void> {
+    await this._scrollIntoViewIfNeeded();
+    const target = await this._clickablePoint();
+    await this._page.mouse.dragEnter(target, data);
+  }
+
+  /**
+   * This method creates a `dragover` event on the element.
+   */
+  async dragOver(
+    data: Protocol.Input.DragData = { items: [], dragOperationsMask: 1 }
+  ): Promise<void> {
     await this._scrollIntoViewIfNeeded();
-    const source = await this._clickablePoint();
-    return await this._page.mouse.drag(source, destination);
+    const target = await this._clickablePoint();
+    await this._page.mouse.dragOver(target, data);
   }
 
   /**
    * This method triggers a dragenter, dragover, and drop on the element.
    */
-  async drop(data:Protocol.Input.DragData = { items: [], dragOperationsMask: 1 }): Promise<void> {
+  async drop(
+    data: Protocol.Input.DragData = { items: [], dragOperationsMask: 1 },
+    options?: { delay: number }
+  ): Promise<void> {
     await this._scrollIntoViewIfNeeded();
     const destination = await this._clickablePoint();
-    await this._page.mouse.drop(destination, data);
+    await this._page.mouse.drop(destination, data, options);
   }
 
   /**
diff --git a/test/drag-and-drop.spec.ts b/test/drag-and-drop.spec.ts
index af53ecf2be4f5..9f2d54d577653 100644
--- a/test/drag-and-drop.spec.ts
+++ b/test/drag-and-drop.spec.ts
@@ -19,14 +19,12 @@ import {
   getTestState,
   setupTestPageAndContextHooks,
   setupTestBrowserHooks,
-  itFailsFirefox,
 } from './mocha-utils'; // eslint-disable-line import/extensions
-import utils from './utils.js';
 
 describe('Input.drag', function () {
   setupTestBrowserHooks();
   setupTestPageAndContextHooks();
-  it('should throw exception if not enabled before using', async() => {
+  it('should throw an exception if not enabled before usage', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -34,7 +32,7 @@ describe('Input.drag', function () {
 
     try {
       await draggable.drag({ x: 1, y: 1 });
-    } catch(error) {
+    } catch (error) {
       expect(error.message).toContain('Drag Interception is not enabled!');
     }
   });
@@ -49,6 +47,34 @@ describe('Input.drag', function () {
     expect(data.items.length).toBe(1);
     expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
   });
+  it('should emit a dragEnter', async () => {
+    const { page, server } = getTestState();
+
+    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    await page.setDragInterception(true);
+    const draggable = await page.$('#drag');
+    const data = await draggable.drag({ x: 1, y: 1 });
+    const dropzone = await page.$('#drop');
+    await dropzone.dragEnter(data);
+
+    expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
+    expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
+  });
+  it('should emit a dragOver event', async () => {
+    const { page, server } = getTestState();
+
+    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    await page.setDragInterception(true);
+    const draggable = await page.$('#drag');
+    const data = await draggable.drag({ x: 1, y: 1 });
+    const dropzone = await page.$('#drop');
+    await dropzone.dragEnter(data);
+    await dropzone.dragOver(data);
+
+    expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
+    expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
+    expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
+  });
   it('can be dropped', async () => {
     const { page, server } = getTestState();
 
@@ -57,6 +83,25 @@ describe('Input.drag', function () {
     const draggable = await page.$('#drag');
     const dropzone = await page.$('#drop');
     const data = await draggable.drag({ x: 1, y: 1 });
+    await dropzone.dragEnter(data);
+    await dropzone.dragOver(data);
+    await dropzone.drop(data);
+
+    expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
+    expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
+    expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
+    expect(await page.evaluate(() => globalThis.didDrop)).toBe(true);
+  });
+  it('can be dragged and dropped with a single function', async () => {
+    const { page, server } = getTestState();
+
+    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    await page.setDragInterception(true);
+    const draggable = await page.$('#drag');
+    const dropzone = await page.$('#drop');
+    const data = await draggable.drag({ x: 1, y: 1 });
+    await dropzone.dragEnter(data);
+    await dropzone.dragOver(data);
     await dropzone.drop(data);
 
     expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
@@ -75,7 +120,7 @@ describe('Input.drag', function () {
 
     try {
       await draggable.drag({ x: 1, y: 1 });
-    } catch(error) {
+    } catch (error) {
       expect(error.message).toContain('Drag Interception is not enabled!');
     }
   });
diff --git a/utils/doclint/check_public_api/index.js b/utils/doclint/check_public_api/index.js
index 68e60bc96a87f..309beecb6832e 100644
--- a/utils/doclint/check_public_api/index.js
+++ b/utils/doclint/check_public_api/index.js
@@ -385,6 +385,13 @@ function compareDocumentations(actual, expected) {
           expectedName: 'KeyInput',
         },
       ],
+      [
+        'Method ElementHandle.drag() target',
+        {
+          actualName: 'Object',
+          expectedName: 'Point',
+        },
+      ],
       [
         'Method Keyboard.down() key',
         {
@@ -413,6 +420,20 @@ function compareDocumentations(actual, expected) {
           expectedName: 'MouseOptions',
         },
       ],
+      [
+        'Method Mouse.drag() start',
+        {
+          actualName: 'Object',
+          expectedName: 'Point',
+        },
+      ],
+      [
+        'Method Mouse.drag() target',
+        {
+          actualName: 'Object',
+          expectedName: 'Point',
+        },
+      ],
       [
         'Method Mouse.up() options',
         {

From 0dfc041626ab99bf41f424f7f06bd83ba288d4cb Mon Sep 17 00:00:00 2001
From: Dan Park <danpark@salesforce.com>
Date: Sun, 16 May 2021 16:15:19 -0700
Subject: [PATCH 05/10] Add dragAndDrop method.

Also update API docs.
---
 docs/api.md                             | 104 +++++++++++++++++++++++-
 src/common/Input.ts                     |  45 +++++-----
 src/common/JSHandle.ts                  |  44 +++++++---
 src/common/Page.ts                      |   2 +-
 test/drag-and-drop.spec.ts              |   5 +-
 utils/doclint/check_public_api/index.js |  91 +++++++++++++++++++++
 6 files changed, 254 insertions(+), 37 deletions(-)

diff --git a/docs/api.md b/docs/api.md
index 01a11c3d73a1d..2cb03406243ac 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -155,6 +155,7 @@
   * [page.goto(url[, options])](#pagegotourl-options)
   * [page.hover(selector)](#pagehoverselector)
   * [page.isClosed()](#pageisclosed)
+  * [page.isDragInterceptionEnabled](#pageisdraginterceptionenabled)
   * [page.isJavaScriptEnabled()](#pageisjavascriptenabled)
   * [page.keyboard](#pagekeyboard)
   * [page.mainFrame()](#pagemainframe)
@@ -171,6 +172,7 @@
   * [page.setCookie(...cookies)](#pagesetcookiecookies)
   * [page.setDefaultNavigationTimeout(timeout)](#pagesetdefaultnavigationtimeouttimeout)
   * [page.setDefaultTimeout(timeout)](#pagesetdefaulttimeouttimeout)
+  * [page.setDragInterception(enabled)](#pagesetdraginterceptionenabled)
   * [page.setExtraHTTPHeaders(headers)](#pagesetextrahttpheadersheaders)
   * [page.setGeolocation(options)](#pagesetgeolocationoptions)
   * [page.setJavaScriptEnabled(enabled)](#pagesetjavascriptenabledenabled)
@@ -215,6 +217,10 @@
   * [mouse.click(x, y[, options])](#mouseclickx-y-options)
   * [mouse.down([options])](#mousedownoptions)
   * [mouse.drag(start, target)](#mousedragstart-target)
+  * [mouse.dragAndDrop(start, target[, options])](#mousedraganddropstart-target-options)
+  * [mouse.dragEnter(target, data)](#mousedragentertarget-data)
+  * [mouse.dragOver(target, data)](#mousedragovertarget-data)
+  * [mouse.drop(target, data)](#mousedroptarget-data)
   * [mouse.move(x, y[, options])](#mousemovex-y-options)
   * [mouse.up([options])](#mouseupoptions)
   * [mouse.wheel([options])](#mousewheeloptions)
@@ -295,9 +301,14 @@
   * [elementHandle.boundingBox()](#elementhandleboundingbox)
   * [elementHandle.boxModel()](#elementhandleboxmodel)
   * [elementHandle.click([options])](#elementhandleclickoptions)
+  * [elementHandle.clickablePoint()](#elementhandleclickablepoint)
   * [elementHandle.contentFrame()](#elementhandlecontentframe)
   * [elementHandle.dispose()](#elementhandledispose)
   * [elementHandle.drag(target)](#elementhandledragtarget)
+  * [elementHandle.dragAndDrop(target[, options])](#elementhandledraganddroptarget-options)
+  * [elementHandle.dragEnter([data])](#elementhandledragenterdata)
+  * [elementHandle.dragOver([data])](#elementhandledragoverdata)
+  * [elementHandle.drop([data])](#elementhandledropdata)
   * [elementHandle.evaluate(pageFunction[, ...args])](#elementhandleevaluatepagefunction-args)
   * [elementHandle.evaluateHandle(pageFunction[, ...args])](#elementhandleevaluatehandlepagefunction-args)
   * [elementHandle.executionContext()](#elementhandleexecutioncontext)
@@ -1921,6 +1932,12 @@ Shortcut for [page.mainFrame().hover(selector)](#framehoverselector).
 
 Indicates that the page has been closed.
 
+#### page.isDragInterceptionEnabled
+
+- returns: <[boolean]>
+
+Indicates that drag events are being intercepted.
+
 #### page.isJavaScriptEnabled()
 
 - returns: <[boolean]>
@@ -2185,6 +2202,13 @@ This setting will change the default maximum time for the following methods and
 
 > **NOTE** [`page.setDefaultNavigationTimeout`](#pagesetdefaultnavigationtimeouttimeout) takes priority over [`page.setDefaultTimeout`](#pagesetdefaulttimeouttimeout)
 
+#### page.setDragInterception(enabled)
+
+- `enabled` <[boolean]>
+- returns: <[Promise]>
+
+Enables the Input.drag methods. This provides the capability to cpature drag events emitted on the page, which can then be used to simulate drag-and-drop.
+
 #### page.setExtraHTTPHeaders(headers)
 
 - `headers` <[Object]> An object containing additional HTTP headers to be sent with every request. All header values must be strings.
@@ -2974,6 +2998,50 @@ Dispatches a `mousedown` event.
 
 This method creates and captures a dragevent from a given point.
 
+#### mouse.dragAndDrop(start, target[, options])
+
+- `start` <[Object]>
+  - `x` <[number]> x coordinate
+  - `y` <[number]> y coordinate
+- `target` <[Object]>
+  - `x` <[number]> x coordinate
+  - `y` <[number]> y coordinate
+- `options` <[Object]>
+  - `delay` <[number]> how long to delay before dropping onto the target point
+- returns: <[Promise<[DragData]>]>
+
+This method drags from a given start point and drops onto a target point.
+
+#### mouse.dragEnter(target, data)
+
+- `target` <[Object]>
+  - `x` <[number]> x coordinate
+  - `y` <[number]> y coordinate
+- `data` <[Object]>
+- returns: <[Promise]]>
+
+This method triggers a dragenter event from the target point.
+
+#### mouse.dragOver(target, data)
+
+- `target` <[Object]>
+  - `x` <[number]> x coordinate
+  - `y` <[number]> y coordinate
+- `data` <[Object]>
+- returns: <[Promise]]>
+
+This method triggers a dragover event from the target point.
+
+#### mouse.drop(target, data)
+
+- `target` <[Object]>
+  - `x` <[number]> x coordinate
+  - `y` <[number]> y coordinate
+- `data` <[Object]>
+- returns: <[Promise]]>
+
+This method triggers a drop event from the target point.
+
 #### mouse.move(x, y[, options])
 
 - `x` <[number]>
@@ -4049,6 +4117,10 @@ This method returns boxes of the element, or `null` if the element is not visibl
 This method scrolls element into view if needed, and then uses [page.mouse](#pagemouse) to click in the center of the element.
 If the element is detached from DOM, the method throws an error.
 
+#### elementHandle.clickablePoint()
+
+- returns: <[Promise<[Point]>]> Resolves to the x, y point that describes the element's position.
+
 #### elementHandle.contentFrame()
 
 - returns: <[Promise]<?[Frame]>> Resolves to the content frame for element handles referencing iframe nodes, or null otherwise
@@ -4066,7 +4138,37 @@ The `elementHandle.dispose` method stops referencing the element handle.
   - `y` <[number]> y coordinate
 - returns: <[Promise<[DragData]>]>
 
-This method creates and captures a dragevent from the element.
+This method creates and captures a drag event from the element.
+
+#### elementHandle.dragAndDrop(target[, options])
+
+- `target` <[Object]>
+- `options` <[Object]>
+  - `delay` <[number]> how long to delay before dropping onto the target element
+- returns: <[Promise]>
+
+This method will drag a given element and drop it onto a target element.
+
+#### elementHandle.dragEnter([data])
+
+- `data` <[Object]> drag data created from `element.drag`
+- returns: <[Promise]>
+
+This method will trigger a dragenter event from the given element.
+
+#### elementHandle.dragOver([data])
+
+- `data` <[Object]> drag data created from `element.drag`
+- returns: <[Promise]>
+
+This method will trigger a dragover event from the given element.
+
+#### elementHandle.drop([data])
+
+- `data` <[Object]> drag data created from `element.drag`
+- returns: <[Promise]>
+
+This method will trigger a drop event from the given element.
 
 #### elementHandle.evaluate(pageFunction[, ...args])
 
diff --git a/src/common/Input.ts b/src/common/Input.ts
index 96ced813e4397..d2c71378bfb96 100644
--- a/src/common/Input.ts
+++ b/src/common/Input.ts
@@ -18,6 +18,7 @@ import { assert } from './assert.js';
 import { CDPSession } from './Connection.js';
 import { keyDefinitions, KeyDefinition, KeyInput } from './USKeyboardLayout.js';
 import { Protocol } from 'devtools-protocol';
+import { ElementHandle, Point } from './JSHandle.js';
 
 type KeyDescription = Required<
   Pick<KeyDefinition, 'keyCode' | 'key' | 'text' | 'code' | 'location'>
@@ -297,14 +298,6 @@ export interface MouseWheelOptions {
   deltaY?: number;
 }
 
-/**
- * @public
- */
-export interface Point {
-  x: number;
-  y: number;
-}
-
 /**
  * The Mouse class operates in main-frame CSS pixels
  * relative to the top-left corner of the viewport.
@@ -519,7 +512,6 @@ export class Mouse {
    * ```
    */
   async dragEnter(target: Point, data: Protocol.Input.DragData): Promise<void> {
-    await this.move(target.x, target.y);
     await this._client.send('Input.dispatchDragEvent', {
       type: 'dragEnter',
       x: target.x,
@@ -535,7 +527,6 @@ export class Mouse {
    * ```
    */
   async dragOver(target: Point, data: Protocol.Input.DragData): Promise<void> {
-    await this.move(target.x, target.y);
     await this._client.send('Input.dispatchDragEvent', {
       type: 'dragOver',
       x: target.x,
@@ -556,16 +547,8 @@ export class Mouse {
    */
   async drop(
     target: Point,
-    data: Protocol.Input.DragData,
-    options: { delay?: number } = {}
+    data: Protocol.Input.DragData
   ): Promise<void> {
-    const { delay = null } = options;
-    await this.move(target.x, target.y);
-    await this.dragEnter(target, data);
-    await this.dragOver(target, data);
-    if (delay) {
-      await new Promise((resolve) => setTimeout(resolve, delay));
-    }
     await this._client.send('Input.dispatchDragEvent', {
       type: 'drop',
       x: target.x,
@@ -573,6 +556,30 @@ export class Mouse {
       modifiers: this._keyboard._modifiers,
       data,
     });
+  }
+
+  /**
+   * Performs a drag, dragenter, dragover, and drop in sequence.
+   * @param target - point to drag from
+   * @param target - point to drop on
+   * @param options - An object of options. Accepts delay which,
+   * if specified, is the time to wait between `dragover` and `drop` in milliseconds.
+   * Defaults to 0.
+   * ```
+   */
+  async dragAndDrop(
+    start: Point,
+    target: Point,
+    options: { delay?: number } = {}
+  ): Promise<void> {
+    const { delay = null } = options;
+    const data = await this.drag(start, target);
+    await this.dragEnter(target, data);
+    await this.dragOver(target, data);
+    if (delay) {
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+    await this.drop(target, data);
     await this.up();
   }
 }
diff --git a/src/common/JSHandle.ts b/src/common/JSHandle.ts
index 7bbbdb732164a..f5ff3bbf24858 100644
--- a/src/common/JSHandle.ts
+++ b/src/common/JSHandle.ts
@@ -32,7 +32,6 @@ import {
   UnwrapPromiseLike,
 } from './EvalTypes.js';
 import { isNode } from '../environment.js';
-import { Point } from './Input.js';
 /**
  * @public
  */
@@ -412,7 +411,7 @@ export class ElementHandle<
     if (error) throw new Error(error);
   }
 
-  private async _clickablePoint(): Promise<{ x: number; y: number }> {
+  async clickablePoint(): Promise<Point> {
     const [result, layoutMetrics] = await Promise.all([
       this._client
         .send('DOM.getContentQuads', {
@@ -483,7 +482,7 @@ export class ElementHandle<
    */
   async hover(): Promise<void> {
     await this._scrollIntoViewIfNeeded();
-    const { x, y } = await this._clickablePoint();
+    const { x, y } = await this.clickablePoint();
     await this._page.mouse.move(x, y);
   }
 
@@ -494,7 +493,7 @@ export class ElementHandle<
    */
   async click(options: ClickOptions = {}): Promise<void> {
     await this._scrollIntoViewIfNeeded();
-    const { x, y } = await this._clickablePoint();
+    const { x, y } = await this.clickablePoint();
     await this._page.mouse.click(x, y, options);
   }
 
@@ -507,7 +506,7 @@ export class ElementHandle<
       'Drag Interception is not enabled!'
     );
     await this._scrollIntoViewIfNeeded();
-    const start = await this._clickablePoint();
+    const start = await this.clickablePoint();
     return await this._page.mouse.drag(start, target);
   }
 
@@ -518,7 +517,7 @@ export class ElementHandle<
     data: Protocol.Input.DragData = { items: [], dragOperationsMask: 1 }
   ): Promise<void> {
     await this._scrollIntoViewIfNeeded();
-    const target = await this._clickablePoint();
+    const target = await this.clickablePoint();
     await this._page.mouse.dragEnter(target, data);
   }
 
@@ -529,20 +528,33 @@ export class ElementHandle<
     data: Protocol.Input.DragData = { items: [], dragOperationsMask: 1 }
   ): Promise<void> {
     await this._scrollIntoViewIfNeeded();
-    const target = await this._clickablePoint();
+    const target = await this.clickablePoint();
     await this._page.mouse.dragOver(target, data);
   }
 
   /**
-   * This method triggers a dragenter, dragover, and drop on the element.
+   * This method triggers a drop on the element.
    */
   async drop(
-    data: Protocol.Input.DragData = { items: [], dragOperationsMask: 1 },
+    data: Protocol.Input.DragData = { items: [], dragOperationsMask: 1 }
+  ): Promise<void> {
+    await this._scrollIntoViewIfNeeded();
+    const destination = await this.clickablePoint();
+    await this._page.mouse.drop(destination, data);
+  }
+
+  /**
+   * This method triggers a dragenter, dragover, and drop on the element.
+   */
+  async dragAndDrop(
+    target: ElementHandle,
     options?: { delay: number }
   ): Promise<void> {
     await this._scrollIntoViewIfNeeded();
-    const destination = await this._clickablePoint();
-    await this._page.mouse.drop(destination, data, options);
+    const destination = await this.clickablePoint();
+    const startPoint = await this.clickablePoint();
+    const targetPoint = await target.clickablePoint();
+    await this._page.mouse.dragAndDrop(startPoint, targetPoint, options);
   }
 
   /**
@@ -669,7 +681,7 @@ export class ElementHandle<
    */
   async tap(): Promise<void> {
     await this._scrollIntoViewIfNeeded();
-    const { x, y } = await this._clickablePoint();
+    const { x, y } = await this.clickablePoint();
     await this._page.touchscreen.tap(x, y);
   }
 
@@ -1030,6 +1042,14 @@ export interface PressOptions {
   text?: string;
 }
 
+/**
+ * @public
+ */
+export interface Point {
+  x: number;
+  y: number;
+}
+
 function computeQuadArea(quad: Array<{ x: number; y: number }>): number {
   /* Compute sum of all directed areas of adjacent triangles
     https://en.wikipedia.org/wiki/Polygon#Simple_polygons
diff --git a/src/common/Page.ts b/src/common/Page.ts
index 1533de47efa23..2028ca18c8e1c 100644
--- a/src/common/Page.ts
+++ b/src/common/Page.ts
@@ -810,7 +810,7 @@ export class Page extends EventEmitter {
    * @remarks
    * Activating drag interception enables the {@link Input.drag},
    * methods  This provides the capability to capture drag events emitted
-   * on the page, which can then be used to simulate drag-and-drop behaviors.
+   * on the page, which can then be used to simulate drag-and-drop.
    */
   async setDragInterception(enabled: boolean): Promise<void> {
     this._userDragInterceptionEnabled = enabled;
diff --git a/test/drag-and-drop.spec.ts b/test/drag-and-drop.spec.ts
index 9f2d54d577653..d74b7c9bf165d 100644
--- a/test/drag-and-drop.spec.ts
+++ b/test/drag-and-drop.spec.ts
@@ -99,10 +99,7 @@ describe('Input.drag', function () {
     await page.setDragInterception(true);
     const draggable = await page.$('#drag');
     const dropzone = await page.$('#drop');
-    const data = await draggable.drag({ x: 1, y: 1 });
-    await dropzone.dragEnter(data);
-    await dropzone.dragOver(data);
-    await dropzone.drop(data);
+    await draggable.dragAndDrop(dropzone);
 
     expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
diff --git a/utils/doclint/check_public_api/index.js b/utils/doclint/check_public_api/index.js
index 309beecb6832e..664c8f11260b5 100644
--- a/utils/doclint/check_public_api/index.js
+++ b/utils/doclint/check_public_api/index.js
@@ -392,6 +392,34 @@ function compareDocumentations(actual, expected) {
           expectedName: 'Point',
         },
       ],
+      [
+        'Method ElementHandle.dragAndDrop() target',
+        {
+          actualName: 'Object',
+          expectedName: 'ElementHandle<Element>',
+        },
+      ],
+      [
+        'Method ElementHandle.dragEnter() data',
+        {
+          actualName: 'Object',
+          expectedName: 'DragData',
+        },
+      ],
+      [
+        'Method ElementHandle.dragOver() data',
+        {
+          actualName: 'Object',
+          expectedName: 'DragData',
+        },
+      ],
+      [
+        'Method ElementHandle.drop() data',
+        {
+          actualName: 'Object',
+          expectedName: 'DragData',
+        },
+      ],
       [
         'Method Keyboard.down() key',
         {
@@ -434,6 +462,69 @@ function compareDocumentations(actual, expected) {
           expectedName: 'Point',
         },
       ],
+      [
+        'Method Mouse.dragAndDrop() start',
+        {
+          actualName: 'Object',
+          expectedName: 'Point',
+        },
+      ],
+      [
+        'Method Mouse.dragAndDrop() target',
+        {
+          actualName: 'Object',
+          expectedName: 'Point',
+        },
+      ],
+      [
+        'Method Mouse.dragAndDrop() target',
+        {
+          actualName: 'Object',
+          expectedName: 'Point',
+        },
+      ],
+      [
+        'Method Mouse.dragEnter() target',
+        {
+          actualName: 'Object',
+          expectedName: 'Point',
+        },
+      ],
+      [
+        'Method Mouse.dragEnter() data',
+        {
+          actualName: 'Object',
+          expectedName: 'DragData',
+        },
+      ],
+      [
+        'Method Mouse.dragOver() target',
+        {
+          actualName: 'Object',
+          expectedName: 'Point',
+        },
+      ],
+      [
+        'Method Mouse.dragOver() data',
+        {
+          actualName: 'Object',
+          expectedName: 'DragData',
+        },
+      ],
+      [
+        'Method Mouse.drop() target',
+        {
+          actualName: 'Object',
+          expectedName: 'Point',
+        },
+      ],
+      [
+        'Method Mouse.drop() data',
+        {
+          actualName: 'Object',
+          expectedName: 'DragData',
+        },
+      ],
       [
         'Method Mouse.up() options',
         {

From 76d33c466969234070932e44cfdde230063c58d8 Mon Sep 17 00:00:00 2001
From: Dan Park <danpark@salesforce.com>
Date: Wed, 19 May 2021 08:43:56 -0700
Subject: [PATCH 06/10] Fix lint errors.

---
 src/common/Input.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/common/Input.ts b/src/common/Input.ts
index d2c71378bfb96..293c9ab461826 100644
--- a/src/common/Input.ts
+++ b/src/common/Input.ts
@@ -18,7 +18,7 @@ import { assert } from './assert.js';
 import { CDPSession } from './Connection.js';
 import { keyDefinitions, KeyDefinition, KeyInput } from './USKeyboardLayout.js';
 import { Protocol } from 'devtools-protocol';
-import { ElementHandle, Point } from './JSHandle.js';
+import { Point } from './JSHandle.js';
 
 type KeyDescription = Required<
   Pick<KeyDefinition, 'keyCode' | 'key' | 'text' | 'code' | 'location'>
@@ -545,10 +545,7 @@ export class Mouse {
    * Defaults to 0.
    * ```
    */
-  async drop(
-    target: Point,
-    data: Protocol.Input.DragData
-  ): Promise<void> {
+  async drop(target: Point, data: Protocol.Input.DragData): Promise<void> {
     await this._client.send('Input.dispatchDragEvent', {
       type: 'drop',
       x: target.x,

From c9b0fbfe5fff55ca399e6cc991460c3229a48d2f Mon Sep 17 00:00:00 2001
From: Dan Park <danpark@salesforce.com>
Date: Thu, 20 May 2021 18:00:39 -0700
Subject: [PATCH 07/10] fix: lint error

---
 src/common/JSHandle.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/common/JSHandle.ts b/src/common/JSHandle.ts
index f5ff3bbf24858..8ec0ef52e7461 100644
--- a/src/common/JSHandle.ts
+++ b/src/common/JSHandle.ts
@@ -551,7 +551,6 @@ export class ElementHandle<
     options?: { delay: number }
   ): Promise<void> {
     await this._scrollIntoViewIfNeeded();
-    const destination = await this.clickablePoint();
     const startPoint = await this.clickablePoint();
     const targetPoint = await target.clickablePoint();
     await this._page.mouse.dragAndDrop(startPoint, targetPoint, options);

From a11a9ecadec48e58c873bcb4dc6d03f17e5dab6d Mon Sep 17 00:00:00 2001
From: Dan Park <danpark@salesforce.com>
Date: Tue, 1 Jun 2021 09:16:57 -0700
Subject: [PATCH 08/10] updated docs

---
 docs/api.md                             | 6 +++---
 utils/doclint/check_public_api/index.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/api.md b/docs/api.md
index 2cb03406243ac..94db3560faccf 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -2988,10 +2988,10 @@ Dispatches a `mousedown` event.
 
 #### mouse.drag(start, target)
 
-- `start` <[Object]>
+- `start` <[Object]> the position to start dragging from
   - `x` <[number]> x coordinate
   - `y` <[number]> y coordinate
-- `target` <[Object]>
+- `target` <[Object]> the position to drag to
   - `x` <[number]> x coordinate
   - `y` <[number]> y coordinate
 - returns: <[Promise<[DragData]>]>
@@ -4142,7 +4142,7 @@ This method creates and captures a drag event from the element.
 
 #### elementHandle.dragAndDrop(target[, options])
 
-- `target` <[Object]>
+- `target` <[ElementHandle]>
 - `options` <[Object]>
   - `delay` <[number]> how long to delay before dropping onto the target element
 - returns: <[Promise]>
diff --git a/utils/doclint/check_public_api/index.js b/utils/doclint/check_public_api/index.js
index 664c8f11260b5..5b4328ca76d88 100644
--- a/utils/doclint/check_public_api/index.js
+++ b/utils/doclint/check_public_api/index.js
@@ -395,7 +395,7 @@ function compareDocumentations(actual, expected) {
       [
         'Method ElementHandle.dragAndDrop() target',
         {
-          actualName: 'Object',
+          actualName: 'ElementHandle',
           expectedName: 'ElementHandle<Element>',
         },
       ],

From 6931234198db94e227d056d397bd7a4b6561bd3e Mon Sep 17 00:00:00 2001
From: Dan Park <danpark@salesforce.com>
Date: Tue, 1 Jun 2021 09:23:00 -0700
Subject: [PATCH 09/10] run drag-and-drop tests for chrome only

---
 test/drag-and-drop.spec.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/test/drag-and-drop.spec.ts b/test/drag-and-drop.spec.ts
index d74b7c9bf165d..b6ca102570d16 100644
--- a/test/drag-and-drop.spec.ts
+++ b/test/drag-and-drop.spec.ts
@@ -19,12 +19,13 @@ import {
   getTestState,
   setupTestPageAndContextHooks,
   setupTestBrowserHooks,
+  itChromeOnly,
 } from './mocha-utils'; // eslint-disable-line import/extensions
 
 describe('Input.drag', function () {
   setupTestBrowserHooks();
   setupTestPageAndContextHooks();
-  it('should throw an exception if not enabled before usage', async () => {
+  itChromeOnly('should throw an exception if not enabled before usage', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -36,7 +37,7 @@ describe('Input.drag', function () {
       expect(error.message).toContain('Drag Interception is not enabled!');
     }
   });
-  it('should emit a dragIntercepted event when dragged', async () => {
+  itChromeOnly('should emit a dragIntercepted event when dragged', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -47,7 +48,7 @@ describe('Input.drag', function () {
     expect(data.items.length).toBe(1);
     expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
   });
-  it('should emit a dragEnter', async () => {
+  itChromeOnly('should emit a dragEnter', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -60,7 +61,7 @@ describe('Input.drag', function () {
     expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
   });
-  it('should emit a dragOver event', async () => {
+  itChromeOnly('should emit a dragOver event', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -75,7 +76,7 @@ describe('Input.drag', function () {
     expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
   });
-  it('can be dropped', async () => {
+  itChromeOnly('can be dropped', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -92,7 +93,7 @@ describe('Input.drag', function () {
     expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDrop)).toBe(true);
   });
-  it('can be dragged and dropped with a single function', async () => {
+  itChromeOnly('can be dragged and dropped with a single function', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -106,7 +107,7 @@ describe('Input.drag', function () {
     expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDrop)).toBe(true);
   });
-  it('can be disabled', async () => {
+  itChromeOnly('can be disabled', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');

From 96576e545bc4d325100bd7dceb82fcca1040a9e8 Mon Sep 17 00:00:00 2001
From: Jan Scheffler <janscheffler@chromium.org>
Date: Wed, 2 Jun 2021 10:39:12 +0200
Subject: [PATCH 10/10] chore: run eslint

---
 test/drag-and-drop.spec.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/test/drag-and-drop.spec.ts b/test/drag-and-drop.spec.ts
index b6ca102570d16..2631f5389c2e9 100644
--- a/test/drag-and-drop.spec.ts
+++ b/test/drag-and-drop.spec.ts
@@ -19,13 +19,13 @@ import {
   getTestState,
   setupTestPageAndContextHooks,
   setupTestBrowserHooks,
-  itChromeOnly,
+  describeChromeOnly,
 } from './mocha-utils'; // eslint-disable-line import/extensions
 
-describe('Input.drag', function () {
+describeChromeOnly('Input.drag', function () {
   setupTestBrowserHooks();
   setupTestPageAndContextHooks();
-  itChromeOnly('should throw an exception if not enabled before usage', async () => {
+  it('should throw an exception if not enabled before usage', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -37,7 +37,7 @@ describe('Input.drag', function () {
       expect(error.message).toContain('Drag Interception is not enabled!');
     }
   });
-  itChromeOnly('should emit a dragIntercepted event when dragged', async () => {
+  it('should emit a dragIntercepted event when dragged', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -48,7 +48,7 @@ describe('Input.drag', function () {
     expect(data.items.length).toBe(1);
     expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
   });
-  itChromeOnly('should emit a dragEnter', async () => {
+  it('should emit a dragEnter', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -61,7 +61,7 @@ describe('Input.drag', function () {
     expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
   });
-  itChromeOnly('should emit a dragOver event', async () => {
+  it('should emit a dragOver event', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -76,7 +76,7 @@ describe('Input.drag', function () {
     expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
   });
-  itChromeOnly('can be dropped', async () => {
+  it('can be dropped', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -93,7 +93,7 @@ describe('Input.drag', function () {
     expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDrop)).toBe(true);
   });
-  itChromeOnly('can be dragged and dropped with a single function', async () => {
+  it('can be dragged and dropped with a single function', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
@@ -107,7 +107,7 @@ describe('Input.drag', function () {
     expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
     expect(await page.evaluate(() => globalThis.didDrop)).toBe(true);
   });
-  itChromeOnly('can be disabled', async () => {
+  it('can be disabled', async () => {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');