隐藏文件输入Python Selenium

时间:2018-02-22 23:36:47

标签: python html selenium

尝试使用Python Seleniun将文件上传到隐藏文件输入时,我遇到了一个问题。为了更清楚,请看下面的图像。

Issue example

我自己为第一个字段上传了一个文件。 下面是上传前后相应HTML代码的示例。

<judge-upload caption="Output to be scored" is-uploading="submissionsCtrl.isUploading[$index]" ng-model="submissionsCtrl.newSubmissions[$index].submissionBlobKey" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty" aria-invalid="false" style=""><div class="hcj-upload">
  <md-input-container class="md-input-has-value">
    <div class="hcj-upload-label ng-binding">Output to be scored</div>
    <div class="hcj-upload-content" ng-switch="!ctrl.fileKey">
      <!-- ngSwitchWhen: true -->
      <!-- ngSwitchWhen: false --><div ng-switch-when="false" layout="row" class="ng-scope layout-row" style="">
        <div>
          <input value="example0.out" aria-label="Filename" readonly="" class="md-input" id="input_8"><div class="md-errors-spacer"></div>
        </div>
        <div>
          <button class="md-icon-button md-button md-ink-ripple" type="button" ng-transclude="" ng-click="ctrl.onClear()" aria-label="Clear">
            <md-icon class="ng-scope material-icons" role="img" aria-hidden="true">delete</md-icon>
          </button>
        </div>
      </div><!-- end ngSwitchWhen: -->
    </div>
  </md-input-container>
</div>
</judge-upload>

*************************************

<judge-upload caption="Output to be scored" is-uploading="submissionsCtrl.isUploading[$index]" ng-model="submissionsCtrl.newSubmissions[$index].submissionBlobKey" class="ng-pristine ng-untouched ng-valid ng-scope ng-empty" aria-invalid="false"><div class="hcj-upload">
  <md-input-container class="">
    <div class="hcj-upload-label ng-binding">Output to be scored</div>
    <div class="hcj-upload-content" ng-switch="!ctrl.fileKey">
      <!-- ngSwitchWhen: true --><div ng-switch-when="true" layout="row" class="ng-scope layout-row">
        <button class="md-raised md-primary md-button md-ink-ripple" type="button" ng-transclude="" ng-click="ctrl.onUploadClick($event)" ng-disabled="!ctrl.ready || ctrl.fileName" aria-label="Upload">Upload file</button>
        <input class="hcj-upload-input ng-pristine ng-untouched ng-valid md-input ng-empty" ng-model="ctrl.fileValue" aria-label="Input file" id="input_3" aria-invalid="false" type="file"><div class="md-errors-spacer"></div>
        <div class="hcj-upload-filedrag layout-align-center-center layout-row" layout="row" ng-show="!ctrl.fileName" layout-align="center center" drag-drop="" on-drag="ctrl.onDragOver($event, $enter)" on-drop="ctrl.onDrop($event)" aria-hidden="false">
          or drop file here
        </div>
        <div class="hcj-upload-loading ng-hide layout-align-center-center layout-row" layout="row" ng-show="ctrl.fileName" layout-align="center center" aria-hidden="true">
          Uploading file. Please wait.
        </div>
      </div><!-- end ngSwitchWhen: -->
      <!-- ngSwitchWhen: false -->
    </div>
  </md-input-container>
</div>
</judge-upload>

使用selenium我尝试了各种解决方案来上传文件,但它们都不起作用:

driver.find_element_by_id("input_3").send_keys(PATH)
driver.execute_script('document.getElementById("input_4").setAttribute("value",PATH)')

在第二个之后,html似乎用文件路径更新,但它不会在Web浏览器中显示。

你能帮帮我吗?

谢谢!

------编辑------ 当我使用第二种方法发送文件时,我遇到的问题是仍然禁用了提交按钮。按钮的代码看起来像

<button class="md-primary md-button md-ink-ripple" type="button" ng-transclude="" ng-click="submissionsCtrl.createSubmission()" ng-disabled="!submissionsCtrl.canUploadSubmissions()" disabled="disabled">Submit</button>

我尝试通过Python代码启用它,但它目前还没有工作,如果你有任何想法仍然在努力。

driver.execute_script('document.getElementsByClassName("md-primary md-button md-ink-ripple")[0].disabled=false')
driver.find_elements_by_xpath("//*[@ng-click='submissionsCtrl.createSubmission()']")[0].click()
print driver.find_elements_by_xpath("//*[@ng-click='submissionsCtrl.createSubmission()']")[0].is_enabled()

即使在脚本调用之后输出仍然显示为is_enabled,并且单击该按钮不会执行任何操作。

------编辑2 ------ 我终于成功启用按钮并单击它。不幸的是,看起来文件并非真正由表单发送。

我仍在调查文件未发送的原因。

我用来启用按钮的代码:

driver.execute_script('''document.evaluate("//*[@ng-click='submissionsCtrl.createSubmission()']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.disabled=false''')
driver.find_elements_by_xpath("//*[@ng-click='submissionsCtrl.createSubmission()']")[0].click()

1 个答案:

答案 0 :(得分:0)

因为您的页面是AngularJs页面,所以文件输入绑定到模型ng-model="ctrl.fileValue"

即使您使用execute_script以背景方式设置值,但这种方式也不会触发模型fileValue更改。

我想ng-click="ctrl.onUploadClick($event)"按钮的点击事件UPLOAD FILE将从模型fileValue获取文件路径,而不是document.getElementById("input_3").value

即使没有错误报告,您也不应该成功上传文件。

要解决您的问题,唯一的方法是直接更改模型fileValue的值:

def input_upload_file_path(file_control, file_path):
    script = '''
       angular.element(arguments[0]).scope().$apply('fileValue=arguments[1]')
    '''
    driver.execute_script(script, file_control, file_path)

file_control = driver.find_element_by_css_selector('#input_3')
file_path = <absolute path of file>

input_upload_file_path(file_control, file_path)

执行input_upload_file_path()后,在此处添加一个暂停,然后您可以通过在浏览器DevTool的控制台选项卡中执行以下Javascript来检查功能是否正常工作:

angular.element('#input_3').scope().$eval('fileValue')

应打印与input_upload_file_path()

的参数值相同的文件路径

enter image description here