如果元素是 <label> 如何上传文件标签名? [英] How to upload file if element is &lt;label&gt; tagname?

问题描述

这是 HTML 代码:

<div class="upload-container" _ngcontent-c35=""><!----><div class="dialog-wrapper dz-default dz-message" _ngcontent-c34=""><span _ngcontent-c34="">拖拽&下降</span><span class="browse-label" _ngcontent-c34=""><span _ngcontent-c34="">或</span><label class="link-label" _ngcontent-c34="">browse</label></span>

<div class="upload-summary" _ngcontent-c35=""><div class="dropzone-previews" _ngcontent-c35="">

</px-upload-zone>

您可以在图像详细信息中看到:如果元素不是输入"标记名，如何处理上传功能?

<小时>

当前解决方案:

元素 input[type="file"] 隐藏在屏幕后面，您可以向该元素发送密钥(适用于上传一个或多个文件).这是我的代码:

页面对象:上传文档(文件名:字符串){文件名 = '../resources/' + 文件名;const absolutePath = resolve(__dirname, fileName);this.sendKeyToElement(this.uploadPage.INPUT_FILE_UPLOAD,absolutePath);浏览器睡眠(2000)；}步骤定义:当(/^上传文件名$/, (table: TableDefinition) => {for (table.rows() 的常量文件) {uploadPage.uploadDocument(file);}});特征:并上传带有文件名的文档|文件名 ||发票01.pdf ||发票02.pdf ||发票03.pdf ||发票04.pdf ||发票05.pdf |

解决方案

当你点击它时，如果你看到这样的桌面弹出窗口:-

桌面窗口示例

然后您可以使用autoit对其进行操作(桌面窗口).参考以下链接

https://www.npmjs.com/package/autoit

过程是:-

1. 在您的应用程序中自动安装它.
2. 下载自动查找工具(https://www.autoitscript.com/site/autoit/downloads/) 并获取元素.
3. 编写脚本并在需要时执行.

代码示例:-

var au = require('autoit');au.Init();au.WinWait("[Title:Open]");au.ControlFocus("打开", "", "Edit1");au.ControlSetText("打开", "", "Edit1", absolutePath);au.睡眠(1000)；au.ControlClick("打开", "", "Button1");

Here is HTML code:

<px-upload-zone class="dz-clickable" _ngcontent-c34="" _nghost-c35="">
<div class="upload-container" _ngcontent-c35="">
<!---->
<div class="dialog-wrapper dz-default dz-message" _ngcontent-c34="">
<span _ngcontent-c34="">Drag & Drop</span>
<span class="browse-label" _ngcontent-c34="">
<span _ngcontent-c34="">or</span>
<label class="link-label" _ngcontent-c34="">browse</label>
</span>
</div>
<div class="upload-summary" _ngcontent-c35="">
<div class="dropzone-previews" _ngcontent-c35="">
</div>
</px-upload-zone>

You can see in image detail: How to handle Upload function if element is not "input" tagname?

---

CURRENT SOLUTION:

The element input[type="file"] is hidden behind screen and you can sendkeys to this element (work for upload one or multi-file). This is my code:

Page Object:
    uploadDocument(fileName: string) {
    fileName = '../resources/' + fileName;
    const absolutePath = resolve(__dirname, fileName);
    this.sendKeyToElement(this.uploadPage.INPUT_FILE_UPLOAD, absolutePath);
    browser.sleep(2000);
}

Step Definition:
When(/^Upload document with file name$/, (table: TableDefinition) => {
    for (const file of table.rows()) {
        uploadPage.uploadDocument(file);
    }
});

Feature:
And Upload document with file name
        |Filename       |
        |Invoice 01.pdf |
        |Invoice 02.pdf |
        |Invoice 03.pdf |
        |Invoice 04.pdf |
        |Invoice 05.pdf |

解决方案

When you click on it if u get any desktop popup like this:-

sample of desktop window

Then you can use autoit to do operations on it(desktop window). Refer the below link

https://www.npmjs.com/package/autoit

The process is :-

1. Install auto it in your application.
2. Download auto it finder tool(https://www.autoitscript.com/site/autoit/downloads/) and get the elements.
3. Write a script and execute where required.

Example of code:-

var au = require('autoit');

au.Init();
au.WinWait("[Title:Open]");
au.ControlFocus("Open", "", "Edit1");
au.ControlSetText("Open", "", "Edit1", absolutePath); 
au.Sleep(1000);
au.ControlClick("Open", "", "Button1");

这篇关于如果元素是 <label> 如何上传文件标签名?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！