diff --git a/docs/api.md b/docs/api.md index 3168c5d17f887..852dbce73fa51 100644 --- a/docs/api.md +++ b/docs/api.md @@ -157,7 +157,7 @@ * [page.goto(url[, options])](#pagegotourl-options) * [page.hover(selector)](#pagehoverselector) * [page.isClosed()](#pageisclosed) - * [page.isDragInterceptionEnabled](#pageisdraginterceptionenabled) + * [page.isDragInterceptionEnabled()](#pageisdraginterceptionenabled) * [page.isJavaScriptEnabled()](#pageisjavascriptenabled) * [page.keyboard](#pagekeyboard) * [page.mainFrame()](#pagemainframe) @@ -2008,7 +2008,7 @@ Shortcut for [page.mainFrame().hover(selector)](#framehoverselector). Indicates that the page has been closed. -#### page.isDragInterceptionEnabled +#### page.isDragInterceptionEnabled() - returns: <[boolean]> diff --git a/src/common/JSHandle.ts b/src/common/JSHandle.ts index cd70f67f26d25..03e9102ce70df 100644 --- a/src/common/JSHandle.ts +++ b/src/common/JSHandle.ts @@ -504,7 +504,7 @@ export class ElementHandle< */ async drag(target: Point): Promise { assert( - this._page.isDragInterceptionEnabled, + this._page.isDragInterceptionEnabled(), 'Drag Interception is not enabled!' ); await this._scrollIntoViewIfNeeded(); diff --git a/src/common/Page.ts b/src/common/Page.ts index 5343e2de90deb..3be8564b9ebd6 100644 --- a/src/common/Page.ts +++ b/src/common/Page.ts @@ -600,6 +600,13 @@ export class Page extends EventEmitter { for (const interceptor of interceptors) interceptor.call(null, fileChooser); } + /** + * @returns `true` if drag events are being intercepted, `false` otherwise. + */ + isDragInterceptionEnabled(): boolean { + return this._userDragInterceptionEnabled; + } + /** * @returns `true` if the page has JavaScript enabled, `false` otherwise. */ @@ -777,10 +784,6 @@ export class Page extends EventEmitter { return this._accessibility; } - get isDragInterceptionEnabled(): boolean { - return this._userDragInterceptionEnabled; - } - /** * @returns An array of all frames attached to the page. */ diff --git a/test/assets/input/drag-and-drop.html b/test/assets/input/drag-and-drop.html index 8d4cecf1b604f..bc376a50451e0 100644 --- a/test/assets/input/drag-and-drop.html +++ b/test/assets/input/drag-and-drop.html @@ -18,26 +18,26 @@ 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); + const drag = document.getElementById('drag'); + const drop = document.getElementById('drop'); + drag.addEventListener('dragstart', function(event) { + event.dataTransfer.setData('id', event.target.id); window.didDragStart = true; }); - drop.addEventListener('dragenter', function(e) { - e.preventDefault(); + drop.addEventListener('dragenter', function(event) { + event.preventDefault(); window.didDragEnter = true; }); - drop.addEventListener('dragover', function(e) { - e.preventDefault(); + drop.addEventListener('dragover', function(event) { + event.preventDefault(); window.didDragOver = true; }); - drop.addEventListener('drop', function(e) { - e.preventDefault(); - var id = e.dataTransfer.getData('id'); - var el = document.getElementById(id); + drop.addEventListener('drop', function(event) { + event.preventDefault(); + const id = event.dataTransfer.getData('id'); + const el = document.getElementById(id); if (el) { - e.target.appendChild(el); + event.target.appendChild(el); window.didDrop = true; } }); diff --git a/test/drag-and-drop.spec.ts b/test/drag-and-drop.spec.ts index 2631f5389c2e9..01f2257f43c33 100644 --- a/test/drag-and-drop.spec.ts +++ b/test/drag-and-drop.spec.ts @@ -41,7 +41,9 @@ describeChromeOnly('Input.drag', function () { const { page, server } = getTestState(); await page.goto(server.PREFIX + '/input/drag-and-drop.html'); + expect(page.isDragInterceptionEnabled()).toBe(false); await page.setDragInterception(true); + expect(page.isDragInterceptionEnabled()).toBe(true); const draggable = await page.$('#drag'); const data = await draggable.drag({ x: 1, y: 1 }); @@ -52,7 +54,9 @@ describeChromeOnly('Input.drag', function () { const { page, server } = getTestState(); await page.goto(server.PREFIX + '/input/drag-and-drop.html'); + expect(page.isDragInterceptionEnabled()).toBe(false); await page.setDragInterception(true); + expect(page.isDragInterceptionEnabled()).toBe(true); const draggable = await page.$('#drag'); const data = await draggable.drag({ x: 1, y: 1 }); const dropzone = await page.$('#drop'); @@ -65,7 +69,9 @@ describeChromeOnly('Input.drag', function () { const { page, server } = getTestState(); await page.goto(server.PREFIX + '/input/drag-and-drop.html'); + expect(page.isDragInterceptionEnabled()).toBe(false); await page.setDragInterception(true); + expect(page.isDragInterceptionEnabled()).toBe(true); const draggable = await page.$('#drag'); const data = await draggable.drag({ x: 1, y: 1 }); const dropzone = await page.$('#drop'); @@ -80,7 +86,9 @@ describeChromeOnly('Input.drag', function () { const { page, server } = getTestState(); await page.goto(server.PREFIX + '/input/drag-and-drop.html'); + expect(page.isDragInterceptionEnabled()).toBe(false); await page.setDragInterception(true); + expect(page.isDragInterceptionEnabled()).toBe(true); const draggable = await page.$('#drag'); const dropzone = await page.$('#drop'); const data = await draggable.drag({ x: 1, y: 1 }); @@ -97,7 +105,9 @@ describeChromeOnly('Input.drag', function () { const { page, server } = getTestState(); await page.goto(server.PREFIX + '/input/drag-and-drop.html'); + expect(page.isDragInterceptionEnabled()).toBe(false); await page.setDragInterception(true); + expect(page.isDragInterceptionEnabled()).toBe(true); const draggable = await page.$('#drag'); const dropzone = await page.$('#drop'); await draggable.dragAndDrop(dropzone); @@ -111,7 +121,9 @@ describeChromeOnly('Input.drag', function () { const { page, server } = getTestState(); await page.goto(server.PREFIX + '/input/drag-and-drop.html'); + expect(page.isDragInterceptionEnabled()).toBe(false); await page.setDragInterception(true); + expect(page.isDragInterceptionEnabled()).toBe(true); const draggable = await page.$('#drag'); await draggable.drag({ x: 1, y: 1 }); await page.setDragInterception(false);