diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js index 6798cbc75..20bb3bce8 100644 --- a/lib/helper/Playwright.js +++ b/lib/helper/Playwright.js @@ -36,6 +36,7 @@ import RemoteBrowserConnectionRefused from './errors/RemoteBrowserConnectionRefu import Popup from './extras/Popup.js' import Console from './extras/Console.js' import { findReact, findVue, findByPlaywrightLocator } from './extras/PlaywrightReactVueLocator.js' +import { dropFile } from './scripts/dropFile.js' import WebElement from '../element/WebElement.js' let playwright @@ -2347,20 +2348,12 @@ class Playwright extends Helper { const targetEls = els.length ? els : await this._locate(locator) assertElementExists(targetEls, locator, 'Element') - const base64Content = base64EncodeFile(file) - const fileName = path.basename(file) - const mimeType = getMimeType(fileName) - await targetEls[0].evaluate((el, { base64Content, fileName, mimeType }) => { - const binaryStr = atob(base64Content) - const bytes = new Uint8Array(binaryStr.length) - for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i) - const fileObj = new File([bytes], fileName, { type: mimeType }) - const dataTransfer = new DataTransfer() - dataTransfer.items.add(fileObj) - el.dispatchEvent(new DragEvent('dragenter', { dataTransfer, bubbles: true })) - el.dispatchEvent(new DragEvent('dragover', { dataTransfer, bubbles: true })) - el.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true })) - }, { base64Content, fileName, mimeType }) + const fileData = { + base64Content: base64EncodeFile(file), + fileName: path.basename(file), + mimeType: getMimeType(path.basename(file)), + } + await targetEls[0].evaluate(dropFile, fileData) return this._waitForAction() } diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js index 12f07f13f..7049ace82 100644 --- a/lib/helper/Puppeteer.js +++ b/lib/helper/Puppeteer.js @@ -38,6 +38,7 @@ import Popup from './extras/Popup.js' import Console from './extras/Console.js' import { highlightElement } from './scripts/highlightElement.js' import { blurElement } from './scripts/blurElement.js' +import { dropFile } from './scripts/dropFile.js' import { dontSeeElementError, seeElementError, dontSeeElementInDOMError, seeElementInDOMError } from './errors/ElementAssertion.js' import { dontSeeTraffic, seeTraffic, grabRecordedNetworkTraffics, stopRecordingTraffic, flushNetworkTraffics } from './network/actions.js' import WebElement from '../element/WebElement.js' @@ -1639,20 +1640,12 @@ class Puppeteer extends Helper { const targetEls = els.length ? els : await this._locate(locator) assertElementExists(targetEls, locator, 'Element') - const base64Content = base64EncodeFile(file) - const fileName = path.basename(file) - const mimeType = getMimeType(fileName) - await targetEls[0].evaluate((el, { base64Content, fileName, mimeType }) => { - const binaryStr = atob(base64Content) - const bytes = new Uint8Array(binaryStr.length) - for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i) - const fileObj = new File([bytes], fileName, { type: mimeType }) - const dataTransfer = new DataTransfer() - dataTransfer.items.add(fileObj) - el.dispatchEvent(new DragEvent('dragenter', { dataTransfer, bubbles: true })) - el.dispatchEvent(new DragEvent('dragover', { dataTransfer, bubbles: true })) - el.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true })) - }, { base64Content, fileName, mimeType }) + const fileData = { + base64Content: base64EncodeFile(file), + fileName: path.basename(file), + mimeType: getMimeType(path.basename(file)), + } + await targetEls[0].evaluate(dropFile, fileData) return this._waitForAction() } diff --git a/lib/helper/WebDriver.js b/lib/helper/WebDriver.js index c16121157..e5adb8102 100644 --- a/lib/helper/WebDriver.js +++ b/lib/helper/WebDriver.js @@ -36,6 +36,7 @@ import { highlightElement } from './scripts/highlightElement.js' import { focusElement } from './scripts/focusElement.js' import { blurElement } from './scripts/blurElement.js' import { dontSeeElementError, seeElementError, seeElementInDOMError, dontSeeElementInDOMError } from './errors/ElementAssertion.js' +import { dropFile } from './scripts/dropFile.js' import { dontSeeTraffic, seeTraffic, grabRecordedNetworkTraffics, stopRecordingTraffic, flushNetworkTraffics } from './network/actions.js' import WebElement from '../element/WebElement.js' @@ -1376,20 +1377,12 @@ class WebDriver extends Helper { const targetRes = res.length ? res : await this._locate(locator) assertElementExists(targetRes, locator, 'Element') const targetEl = usingFirstElement(targetRes) - const base64Content = base64EncodeFile(file) - const fileName = path.basename(file) - const mimeType = getMimeType(fileName) - return this.browser.execute(function (el, data) { - var binaryStr = atob(data.base64Content) - var bytes = new Uint8Array(binaryStr.length) - for (var i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i) - var fileObj = new File([bytes], data.fileName, { type: data.mimeType }) - var dataTransfer = new DataTransfer() - dataTransfer.items.add(fileObj) - el.dispatchEvent(new DragEvent('dragenter', { dataTransfer: dataTransfer, bubbles: true })) - el.dispatchEvent(new DragEvent('dragover', { dataTransfer: dataTransfer, bubbles: true })) - el.dispatchEvent(new DragEvent('drop', { dataTransfer: dataTransfer, bubbles: true })) - }, targetEl, { base64Content, fileName, mimeType }) + const fileData = { + base64Content: base64EncodeFile(file), + fileName: path.basename(file), + mimeType: getMimeType(path.basename(file)), + } + return this.browser.execute(dropFile, targetEl, fileData) } /** diff --git a/lib/helper/scripts/dropFile.js b/lib/helper/scripts/dropFile.js new file mode 100644 index 000000000..4547f9500 --- /dev/null +++ b/lib/helper/scripts/dropFile.js @@ -0,0 +1,11 @@ +export const dropFile = (el, { base64Content, fileName, mimeType }) => { + const binaryStr = atob(base64Content) + const bytes = new Uint8Array(binaryStr.length) + for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i) + const fileObj = new File([bytes], fileName, { type: mimeType }) + const dataTransfer = new DataTransfer() + dataTransfer.items.add(fileObj) + el.dispatchEvent(new DragEvent('dragenter', { dataTransfer, bubbles: true })) + el.dispatchEvent(new DragEvent('dragover', { dataTransfer, bubbles: true })) + el.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true })) +}