How to upload file if element is tagname?

Question

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 |

Because if element is then we can use sendkey method to handle it. — Dao Minh Dam, Oct 30 '17 at 11:10
Please refer W3C standard constraints and admonitions https://www.w3.org/TR/2012/WD-html-markup-20120329/input.file.html — Ankit Pandey, Oct 30 '17 at 11:21

score 1 · Answer 1 · answered Nov 02 '17 at 15:59

1

You can find an input[type="file"] element hidden behind screen and when you drag and drop a file or upload the file it would internally set the value to the hidden input[type="file"] element. You can unhide the input element and then use the sendKeys to upload the file. I have faced similar issue before.

answered Nov 02 '17 at 15:59

Rakesh

329
5
16

That way is work well for me (one and multi-file), input tagname is hidden behind screen. Thanks Rakesh. – Dao Minh Dam Nov 06 '17 at 03:10
Welcome @DAOMINHDAM – Rakesh Nov 09 '17 at 09:31

score 1 · Accepted Answer · answered Nov 06 '17 at 07:17

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 :-

Install auto it in your application.
Download auto it finder tool(https://www.autoitscript.com/site/autoit/downloads/) and get the elements.
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");

How to upload file if element is tagname?

2 Answers2

Linked