javascript - 等待上传完成后再单击按钮

Question

我有一个打开的模式允许上传。该模式有一个用于多次上传、要上传的文件、上传、取消和确定的按钮(选择文件后按下该按钮，单击上传按钮，然后选择确定返回到上一屏幕)。一切正常，但是这是一个非 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

这里最好的选择是使用 Protractor 具有的 wait() 函数和 ExpectedConditions 对象来等待上传按钮被禁用。 wait() 函数总是等待，直到给定的条件为 true，因此您必须以这样的方式提供一个参数，使其在一段时间后变为 true(这应该是您想要的值)。方法如下 -

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();
});

希望有帮助。