用硒测试 $("<input type='file'>").click()答案

【问题标题】：Test with selenium for $("<input type='file'>").click()用硒测试 $("<input type='file'>").click()
【发布时间】：2016-06-05 02:14:08
【问题描述】：

你们中的一些人可能知道可以要求用户选择文件，甚至无需在 DOM 中放置 <input type=file">。对于大多数浏览器来说，它似乎工作正常，只要从用户触发的点击事件处理程序内部调用此代码。

所以，基本上我使用这个函数来获得文件的 ES6 承诺。

function askForFile() {
    var $input = $("<input type='file'/>");
    var promise = new Promise(function(resolve, reject) {
        $input.change(e => {
           resolve(e.target.files[0]);
        });
    });
    $input.click();
    return promise;
};

它工作得很好，但有人可以告诉我如何用 Selenium 测试它吗？

我见过一些 Selenium snippets 允许用一些文件填充 DOM 输入：

// find the input element
WebElement elem = driver.findElement(By.xpath("//input[@type='file']"));
// 'type' the file location to it as it were a usual <input type='text' /> element
elem.sendKeys("C://path/To/File.jpg");

但是我的输入不在 DOM 中，所以我似乎不能使用这个技巧。有什么方法可以用 Selenium 测试我的代码吗？

谁能告诉我是否有另一种可测试的方式来向用户询问文件而不向 DOM 中添加无用的输入？

【问题讨论】：

标签： javascript html selenium dom selenium-webdriver

【解决方案1】：

使用 Selenium 向onclick 添加一个监听器怎么样？

driver.executeScript('
    $(function() { 
        $("input[type=file]").on('click', function(el) {
            $(el).val('path/to/file');
        });
    })
')

对不起，如果它是垃圾，我目前无法测试，所以请考虑它是伪代码:)

【讨论】：

然后您从 selenium 创建一个输入，但是我的应用程序 js 代码如何接收该文件呢？不确定我们是否也可以设置这样的 val 不？
不，输入是由您的应用在调用askForFile 时创建的。 Selenium 只是为onclick 事件添加了一个监听器。事实上，我不确定你是否可以指定这样的文件路径，但你已经有了可以轻松测试的代码:)
但是如果没有向 DOM 添加输入，$("input[type=file]") 将如何返回任何内容？
确实，您需要将元素插入 DOM 并将侦听器应用于父级。但是当你试图避免这种情况时......不确定。您可能会尝试在测试中覆盖您的askForFile，但这需要保持版本同步。或者你可以将它包装在一个类中，并通过 driver.executeScript() 将 $input 作为可访问的属性