ReactJS dropzone 通过 webdriver 上传文件答案

【问题标题】：ReactJS dropzone upload file via webdriverReactJS dropzone 通过 webdriver 上传文件
【发布时间】：2018-03-06 11:18:09
【问题描述】：

尝试使用 selenium webDriver 将图像上传到 dropzone。已经为站点 dropzonejsdotcom 实现了它，但如果我尝试使用 reactJS dropzone (http://reactdropzone.azurewebsites.net/example/) 的脚本，我会收到一条消息：“未知错误：Dropzone 未定义”。

JavascriptExecutor executor;

public ReactDrpzn() {
    Configuration.browser = "chrome";
    this.executor = (JavascriptExecutor) WebDriverRunner.getWebDriver();
}
private By dropzone = By.cssSelector(".filepicker.dropzone.dz-clickable");

@Test
public void drzon() throws IOException, InterruptedException {
    open("http://reactdropzone.azurewebsites.net/example");
    $(dropzone).hover();
    String script = "var myZone, blob, base64Image; myZone = Dropzone.forElement('.filepicker.dropzone.dz-clickable');" +
            "base64Image = 'iVBORw0KGgoAAAANSUhEUgAAAO0AAABQCAYAAAD1GfIkAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAEGSURBVHhe7dPBCcAwAAMxp/vv3ObRJQ4kMJ7gzrb3Doh4/gciRAsxooUY0UKMaCFGtBAjWogRLcSIFmJECzGihRjRQoxoIUa0ECNaiBEtxIgWYkQLMaKFGNFCjGghRrQQI1qIES3EiBZiRAsxooUY0UKMaCFGtBAjWogRLcSIFmJECzGihRjRQoxoIUa0ECNaiBEtxIgWYkQLMaKFGNFCjGghRrQQI1qIES3EiBZiRAsxooUY0UKMaCFGtBAjWogRLcSIFmJECzGihRjRQoxoIUa0ECNaiBEtxIgWYkQLMaKFGNFCjGghRrQQI1qIES3EiBZiRAsxooUY0UKMaCFGtBAjWkjZPk/PAZ8fwt/rAAAAAElFTkSuQmCC';" +
            "function base64toBlob(r,e,n){e=e||\"\",n=n||512;for(var t=atob(r),a=[],o=0;o<t.length;o+=n){for(var l=t.slice(o,o+n),h=new Array(l.length),b=0;b<l.length;b++)h[b]=l.charCodeAt(b);var v=new Uint8Array(h);a.push(v)}var c=new Blob(a,{type:e});return c}" +
            "blob = base64toBlob(base64Image, 'image / png');" +
            "blob.name = 'file.png';" +
            "myZone.addFile(blob);";

    executor.executeScript(script);
    Thread.sleep(3000);//смотрим результат
}

你可以从这里导入maven https://github.com/SaneQ/Drpzn

【问题讨论】：

原因是这在浏览器控制台中也不起作用。 DropZone 对象位于反应上下文中，并且该对象在主窗口中不可用。所以你需要先以某种方式暴露或获取这个对象

标签： javascript java reactjs selenium

【解决方案1】：

基本上分两步：

找到元素：
将密钥与您要上传的文件的位置一起发送。

JavaScript：

const {Builder, By, Key, until} = require('selenium-webdriver');

let driver = new Builder()
    .forBrowser('chrome')
    .build();

driver.get('http://reactdropzone.azurewebsites.net/example/');
driver.findElement(By.xpath('.//input[@type="file"]')).sendKeys('full_path_to_your_file.png');

Python：

from selenium import webdriver

driver = webdriver.Chrome()
driver.get('http://reactdropzone.azurewebsites.net/example/')
input_field = driver.find_element_by_xpath('.//input[@type="file"]')
input_field.send_keys('full_path_to_your_file.png')

【讨论】：

这是正确的，但 dropzone 组件必须有一个 onKeyDown 属性，，
是否有使用 xpath 的 CSS 替代方案？

【解决方案2】：

所以，我找到了在 react dropzone 中上传图片的简单方法。 React 在 DOM 中创建隐藏输入（Body > input）之后我只使用 selenium sendKeys("pathToImg")

【讨论】：