Can’t locate the file upload button in an Ext JS framework-created popup window
The server uses code based on the Ext JS framework to create a window component for file uploads. I hope to use the file upload button in the newly popped-up window to select files for uploading and then perform subsequent operations.
After running UI.Vision, the window pops up automatically, and it can close it automatically. Although clicking the file upload button with commands like clickandwait or click (using XPath or CSS for positioning) in UI.Vision does not show errors, the file selection dialog does not appear. It seems that the button is not clicked accurately. When I use the “Find” button to verify this script command in UI.Vision, it shows "E219:DOM not found "
Additionally, I checked the HTML code with F12 and was able to locate the file upload element precisely using XPath: //input[starts-with(@id,“fileuploadfield-”) and @type=“file”].
How should I modify the UI.Vision script to achieve this?
The “Allow access to file URLs” setting has been enabled for my RPA extension to facilitate automated file uploads. Currently unable to install xmodule to get elements for clicking, so I can only use traditional click or click and wait commands.
My UI.Vision script as follows:
{
"Name": "Temp",
"CreationDate": "2025-8-7",
"Commands": [
{
"Command": "open",
"Target": "https://crsprd01.scbmisp:8443/jes/main.do#",
"Value": "",
"Description": ""
},
{
"Command": "selectFrame",
"Target": "xpath=//*[substring(@id, string-length(@id) - string-length(\"DataFill\") + 1) = \"DataFill\"]",
"Value": "",
"Description": "id=JRTJ#M002_report_M001_DataFill"
},
{
"Command": "click",
"Target": "linkText=批量导入",
"Value": "",
"Description": ""
},
{
"Command": "pause",
"Target": "6000",
"Value": "",
"Description": ""
},
{
"Command": "clickAndWait",
"Target": "xpath=//input[starts-with(@id,\"fileuploadfield-\") and @type=\"file\"]",
"Value": "",
"Description": ""
},
{
"Command": "pause",
"Target": "3000",
"Value": "",
"Description": ""
},
{
"Command": "click",
"Target": "xpath=//img[starts-with(@id, 'tool-') and substring(@id, string-length(@id) - string-length('-toolEl') + 1) = '-toolEl']",
"Value": "",
"Description": ""
}
]
}
[status]
Playing macro Temp
[info]
Executing: | open | https://crsprd01.scbmisp:8443/jes/main.do# | |
[info]
Executing: | selectFrame | xpath=//*[substring(@id, string-length(@id) - string-length("DataFill") + 1) = "DataFill"] | |
[info]
Executing: | click | linkText=批量导入 | |
[info]
Executing: | pause | 6000 | |
[info]
Executing: | clickAndWait | xpath=//input[starts-with(@id,"fileuploadfield-") and @type="file"] | |
[info]
Executing: | pause | 3000 | |
[info]
Executing: | click | xpath=//img[starts-with(@id, 'tool-') and substring(@id, string-length(@id) - string-length('-toolEl') + 1) = '-toolEl'] | |
[info]
Macro completed (Runtime 16.05s)
The core HTML code from F12 is as follows:
Blockquote
<div
class="x-window x-layer x-window-blue-window-active x-closable x-window-closable x-window-blue-window-active-closable x-border-box x-resizable x-window-resizable x-window-blue-window-active-resizable x-window-active"
style="top: 176px; width: 361px; height: 120px; right: auto; left: -49px; z-index: 19000;"
id="window-1056"
tabindex="-1"
>
<div
class="x-window-header x-header x-header-horizontal x-header-draggable x-docked x-unselectable x-window-header-blue-window-active x-horizontal x-window-header-horizontal x-window-header-blue-window-active-horizontal x-top x-window-header-top x-window-header-blue-window-active-top x-docked-top x-window-header-docked-top x-window-header-blue-window-active-docked-top"
id="window-1056_header"
style="right: auto; left: -1px; top: -1px; width: 361px;"
>
<div
id="window-1056_header-body"
class="x-header-body x-window-header-body x-window-header-body-blue-window-active x-window-header-body-horizontal x-window-header-body-blue-window-active-horizontal x-window-header-body-top x-window-header-body-blue-window-active-top x-window-header-body-docked-top x-window-header-body-blue-window-active-docked-top x-box-layout-ct x-window-header-body-blue-window-active-horizontal x-window-header-body-blue-window-active-top x-window-header-body-blue-window-active-docked-top"
role="presentation"
style="width: 349px;"
>
<div
id="window-1056_header-innerCt"
class="x-box-inner"
role="presentation"
style="width: 349px; height: 22px;"
>
<div
id="window-1056_header-targetEl"
class="x-box-target"
role="presentation"
style="width: 349px;"
>
<div
class="x-component x-header-text-container x-window-header-text-container x-window-header-text-container-blue-window-active x-box-item x-component-default"
unselectable="on"
id="window-1056_header_hd"
style="right: auto; left: 0px; top: 0px; margin: 0px; width: 332px;"
fr-bold-38adg1a02a=""
>
<span
id="window-1056_header_hd-textEl"
class="x-header-text x-window-header-text x-window-header-text-blue-window-active"
unselectable="on"
fr-bold-38adg1a02a=""
>选择报表</span
>
</div>
<div
class="x-tool x-box-item x-tool-default x-tool-after-title"
style="width: 15px; height: 15px; right: auto; left: 334px; top: 3px; margin: 0px;"
id="tool-1061"
>
<img
id="tool-1061-toolEl"
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-tool-img x-tool-close"
role="presentation"
/>
</div>
</div>
</div>
</div>
</div>
<div
id="window-1056-body"
class="x-window-body x-window-body-blue-window-active x-layout-fit x-closable x-window-body-closable x-window-body-blue-window-active-closable x-window-body-blue-window-active x-window-body-blue-window-active-closable x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left x-resizable x-window-body-resizable x-window-body-blue-window-active-resizable"
role="presentation"
style="width: 351px; height: 57px; left: 0px; top: 24px;"
>
<div
class="x-panel x-panel-blue-panel-framed x-fit-item x-window-item"
id="form-1057"
style="margin: 0px; width: 351px; height: 57px;"
>
<div
id="form-1057-body"
class="x-panel-body x-panel-body-blue-panel-framed x-panel-body-blue-panel-framed x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left"
role="presentation"
style="width: 339px; height: 46px; left: 0px; top: 0px;"
>
<table
id="form-1057-formTable"
class="x-form-layout-table"
style="width:100%"
cellpadding="0"
role="presentation"
>
<tbody
class="x-field x-table-plain x-form-item x-form-readonly x-form-type-text x-field-default x-form-form-item"
style="width: 300px; table-layout: fixed;"
role="presentation"
id="fileuploadfield-1058"
>
<tr
role="presentation"
id="fileuploadfield-1058-inputRow"
class="x-form-item-input-row"
>
<td
role="presentation"
id="fileuploadfield-1058-labelCell"
style=""
valign="top"
halign="left"
width="65"
class="x-field-label-cell"
>
<label
id="fileuploadfield-1058-labelEl"
for="fileuploadfield-1058-inputEl"
class="x-form-item-label x-unselectable x-form-item-label-left"
style="width:60px;margin-right:5px;"
unselectable="on"
>模板<span role="separator">:</span></label
>
</td>
<td
role="presentation"
class="x-form-item-body x-form-file-wrap"
id="fileuploadfield-1058-bodyEl"
colspan="2"
style="width: 100%;"
>
<table
id="fileuploadfield-1058-triggerWrap"
class="x-form-trigger-wrap"
cellpadding="0"
cellspacing="0"
role="presentation"
style="width: 100%; table-layout: fixed;"
>
<tbody role="presentation">
<tr role="presentation">
<td
id="fileuploadfield-1058-inputCell"
class="x-form-trigger-input-cell"
role="presentation"
style="width: 100%;"
>
<input
id="fileuploadfield-1058-inputEl"
type="text"
role="textbox"
size="1"
name=""
readonly="readonly"
class="x-form-field x-form-required-field x-form-text"
autocomplete="off"
data-errorqtip=""
style="width: 100%;"
/>
</td>
<td
id="fileuploadfield-1058-browseButtonWrap"
role="presentation"
style="width: 36px;"
>
<a
class="x-btn-hrs x-form-file-btn x-unselectable x-btn-hrs-default-small x-noicon x-btn-hrs-noicon x-btn-hrs-default-small-noicon"
style="margin-left:3px;"
hidefocus="on"
unselectable="on"
tabindex="0"
id="fileuploadfield-1058-button"
><span
id="fileuploadfield-1058-button-btnWrap"
role="presentation"
class="x-btn-hrs-wrap"
unselectable="on"
><span
id="fileuploadfield-1058-button-btnEl"
class="x-btn-hrs-button"
role="button"
><span
id="fileuploadfield-1058-button-btnInnerEl"
class="x-btn-hrs-inner x-btn-hrs-inner-center"
unselectable="on"
>选择...</span
><span
role="presentation"
id="fileuploadfield-1058-button-btnIconEl"
class="x-btn-hrs-icon-el"
unselectable="on"
style=""
></span></span></span
><input
id="fileuploadfield-1058-button-fileInputEl"
class="x-form-file-input"
type="file"
size="1"
name="file"
role="button"
/></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div
class="x-toolbar x-docked x-toolbar-footer x-docked-bottom x-toolbar-docked-bottom x-toolbar-footer-docked-bottom x-box-layout-ct"
style="border-width: 0px; right: auto; left: 4px; top: 85px; width: 351px;"
id="toolbar-1059"
>
<div
id="toolbar-1059-innerCt"
class="x-box-inner"
role="presentation"
style="width: 345px; height: 22px;"
>
<div
id="toolbar-1059-targetEl"
class="x-box-target"
role="presentation"
style="width: 345px;"
>
<a
class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-blue-button-small x-noicon x-btn-noicon x-btn-blue-button-small-noicon"
hidefocus="on"
unselectable="on"
tabindex="0"
id="button-1060"
style="right: auto; left: 264px; top: 0px; margin: 0px; width: 75px;"
><span
id="button-1060-btnWrap"
role="presentation"
class="x-btn-wrap"
unselectable="on"
><span
id="button-1060-btnEl"
class="x-btn-button"
role="presentation"
><span
id="button-1060-btnInnerEl"
class="x-btn-inner x-btn-inner-center"
unselectable="on"
>执行</span
><span
role="presentation"
id="button-1060-btnIconEl"
class="x-btn-icon-el"
unselectable="on"
style=""
></span></span></span
></a>
</div>
</div>
</div>
<div
id="window-1056-north-handle"
class="x-resizable-handle x-resizable-handle-north x-window-handle x-window-handle-north x-window-handle-north-br x-unselectable"
unselectable="on"
role="presentation"
></div>
<div
id="window-1056-south-handle"
class="x-resizable-handle x-resizable-handle-south x-window-handle x-window-handle-south x-window-handle-south-br x-unselectable"
unselectable="on"
role="presentation"
></div>
<div
id="window-1056-east-handle"
class="x-resizable-handle x-resizable-handle-east x-window-handle x-window-handle-east x-window-handle-east-br x-unselectable"
unselectable="on"
role="presentation"
></div>
<div
id="window-1056-west-handle"
class="x-resizable-handle x-resizable-handle-west x-window-handle x-window-handle-west x-window-handle-west-br x-unselectable"
unselectable="on"
role="presentation"
></div>
<div
id="window-1056-northeast-handle"
class="x-resizable-handle x-resizable-handle-northeast x-window-handle x-window-handle-northeast x-window-handle-northeast-br x-unselectable"
unselectable="on"
role="presentation"
></div>
<div
id="window-1056-northwest-handle"
class="x-resizable-handle x-resizable-handle-northwest x-window-handle x-window-handle-northwest x-window-handle-northwest-br x-unselectable"
unselectable="on"
role="presentation"
></div>
<div
id="window-1056-southeast-handle"
class="x-resizable-handle x-resizable-handle-southeast x-window-handle x-window-handle-southeast x-window-handle-southeast-br x-unselectable"
unselectable="on"
role="presentation"
></div>
<div
id="window-1056-southwest-handle"
class="x-resizable-handle x-resizable-handle-southwest x-window-handle x-window-handle-southwest x-window-handle-southwest-br x-unselectable"
unselectable="on"
role="presentation"
></div>
</div>