使用 WebdriverIO 上传文件

2019年6月25日 ·阅读 4 分钟

在浏览器中测试上传场景在自动化测试领域是一个罕见但并非不常见的情况。评估此类测试的重要性始终很重要，因为在许多情况下，您最终测试的是浏览器而不是您的应用程序。因此，请始终牢记您的前端应用程序在浏览器默认上传行为之上增加了多少额外功能。例如，如果大部分操作发生在后端，那么使用像request或axios这样的包，使用简单的 Node.js POST 请求模拟上传更有意义。

查找并公开文件输入

假设我们的前端应用程序除了上传文件之外还做了很多事情（例如，验证或对即将上传的文件进行其他前端方面的操作）。现在，我们应该做的第一件事是找到类型为 file 的输入元素。请注意，使用 React、Angular 或其他框架构建的应用程序通常会隐藏这些元素，因为它们难以使用纯 CSS 进行样式设置。因此，它们会隐藏元素并使用 div 或其他更易于设置样式的 HTML 标签模拟输入。

// Two hidden input elements, 1 for single file upload 1 for multiple.
<input class="upload-data-file-input hidden" type="file">
<input class="upload-data-file-input-multiple hidden" type="file">

为了能够修改此元素的值，我们需要使其可见。WebDriver 规范将输入元素定义为可交互的，以便更改其值。所以让我们这样做。

/**
 * The css class name "upload-data-file-input hidden" is just an example
 * and you can replace with your app.
 */
const fileUpload = $('.upload-data-file-input');
browser.execute(
    // assign style to elem in the browser
    (el) => el.style.display = 'block',
    // pass in element so we don't need to query it again in the browser
    fileUpload
);
fileUpload.waitForDisplayed();

使用execute，我们可以简单地修改元素属性以删除 hidden 类或赋予元素显示性。

上传文件

不幸的是，使用浏览器上传文件的机制高度依赖于您的测试设置。归根结底，浏览器需要能够访问您想要上传的文件。对于本地场景，这非常简单。由于您在本地机器上运行浏览器，并且您想要上传的文件也存在于您的本地机器上，因此您需要做的就是将文件路径的值设置为输入元素。

/**
 * it is recommended to always use the absolute path of the file as it ensures
 * that it can be found by the browser.
 */
const path = require('path');
const filePath = path.join(__dirname, 'path/to/your/file');
fileUpload.setValue(filePath);

如果您自动化的浏览器正在远程机器上运行，则此方法将不再有效，因为位于本地（或测试运行的任何位置）的文件不存在于运行浏览器的远程机器上。对于这些场景，Selenium 项目创建了一个file，它目前仅在运行 Chrome 或使用带有 Selenium 独立服务器的 Selenium Grid 时受支持。该命令期望文件有效负载作为 base64 字符串传递。由于这使用起来很不方便，因此 WebdriverIO 实现了 upload 命令，允许您只传入文件名，框架会负责正确地解析它。上传示例现在将如下所示：

const path = require('path');
const filePath = path.join(__dirname, 'path/to/your/file');

const remoteFilePath = browser.uploadFile(filePath);
$('.upload-data-file-input').setValue(remoteFilePath);

请注意，远程文件名与您的本地文件名不同。因此，您需要根据从 uploadFile 命令获得的远程文件名设置值。

就是这样！祝您上传愉快 😉🙌🏻 ❤️

查找并公开文件输入​

上传文件​

查找并公开文件输入

上传文件