在单击按钮之前等待上传完成

Question

我有一个模式可以打开以允许上传。该模式有一个用于多次上传、文件上传、上传、取消和确定的按钮（您在选择文件后按下该按钮，单击上传按钮，然后选择确定以 return 返回上一屏幕）。一切正常，但这是一个非 angular 应用程序，因此它不会在选择确定之前等待上传完成。我输入了一个 browser.driver.sleep 来给它足够的时间，但我知道这是一个不可靠的解决方案。关于如何在选择确定之前等待上传完成有什么想法吗？

测试代码：

this.selectsUploadButton = function () {
    this.waitsForElementToBeClickable(uploadButton);
    uploadButton.click().then(function () {
        browser.driver.sleep(5000);
        uploadButtonOkLogo.click();
    });
};

html：由于覆盖，我收到的错误无法点击。

<div id="uploadLogoDialog" class="modal-dialog" style="display: block;">
  <div class="upload-overlay"></div>
  <div class="upload-logo-container">
    <div class="upload-logo-header">Image must be under 50 MB and in the following formats: .JPG, .GIF, .PNG</div>
    <div class="upload-logo-content">
      <div class="select-container">
        <button class="btn btn-select" data-bind="click: assosiateLogoImage">
          <span class="icon icon-select"></span>
          <span class="label">Select file</span>
        </button>
      </div>
      <button class="btn btn-upload" data-bind="click: startLogoUpload, disable: logo.isUploaded" disabled="">
        <button class="btn btn-ok" data-bind="click: closeUploadLogoDialog">
          <div class="upload-progress-container">
            <div class="upload-progress" style="display: none;" data-bind="visible: isUploading">
              <div class="progress-bar ui-progressbar ui-widget ui-widget-content ui-corner-all" data-bind="progressBar: { value: progressValue }" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="display: none; width: 0%;"></div>
              </div>
              <div class="percentage" data-bind="text: progressValue() + ' %'">0 %</div>
            </div>
          </div>
          <form id="uploadForm" action="https://iplan.preview.s3.amazonaws.com/" enctype="multipart/form-data" target="uploadIFrame" method="post">
            <div class="file-input" data-bind="css: {'ie': isIE}">
              <input id="logoFile" type="file" data-bind="event:{ 'change': handleLogoSelection }" name="file">
            </div>
          </form>
    </div>
  </div>
  <div class="upload-busy" data-bind="visible: isUploading" style="display: none;"></div>
</div>

Answer 1

这里最好的选择是等到上传按钮得到 disabled 使用量角器与 ExpectedConditions 对象一起使用的 wait() 函数。 wait() 函数总是等到给定条件为真，因此您必须提供一个参数，使其在一段时间后变为真（这应该是您想要的值）。方法如下 -

var EC = protractor.ExpectedConditions;
browser.wait(EC.not(EC.elementToBeClickable(uploadButton)),10000).then(function(){
    uploadButtonOkLogo.click();
}); //Wait until element is not clickable (checks if element is enabled to decide if its clickable)

或者，您可以编写自己的 ExpectedCondition，直到元素未启用，然后在您的等待函数中使用它。方法如下 -

browser.wait(function(){
    return uploadButton.isEnabled().then(function(enabled){
        return enabled === false;  // wait until element is disabled and if it is disabled then return true
    });
}, 10000).then(function(){
    uploadButtonOkLogo.click();
});

另一种方式是手动写自己的ExpectedCondition等待上传进度条到100%。方法如下 -

browser.wait(function(){
    return $('.percentage').getText().then(function(percent){
        return percent === '100 %'; //return true only if percentage is 100%
    });
}, 10000).then(function(){
    uploadButtonOkLogo.click();
});

希望对您有所帮助。

在单击按钮之前等待上传完成

Wait for upload to complete before clicking a button

javascript

automation

file-upload

selenium-webdriver

protractor