How to switch control to a pop up window and give a input in Selenium Webdriver

0
votes

I have a application on which clicking a button will pop-up a window for creating a new folder. In this pop-up window, we need to fill few input fields for creating a folder. When I am trying to find element by xpath and giving (//input[@name='name']) and give a input(using sendKeys) for this pop up input field, the input is getting filled in a field on the parent window(main window which at the back of the pop up window). When I'm trying run using the whole xpath. 

driver.findElement(By.xpath("//body/div[9]/div[2]/div/div/span/div/table/tbody/tr/td[2]/input"));

I get a exception error saying unable to locate element.

Here is the piece of html code 

<html class="x-border-box x-quirks x-viewport">
<head>
<body id="ext-gen1020" class="x-body x-gecko x-mac x-layout-fit x-container x-container-default">
<div id="workspace-1021" class="x-container x-fit-item x-container-default x-border-layout-ct" style="margin: 0px; width: 1680px; height: 587px;">
<div id="ext-quicktips-tip" class="x-tip x-layer x-tip-default" style="right: auto; left: 1605px; top: 105px; height: 26px; z-index: 19011; width: 75px; display: none;">
<div id="messagebox-1001" class="x-window x-message-box x-layer x-window-default x-closable x-window-closable x-window-default-closable x-hide-offsets" tabindex="-1" style="height: 114px; right: auto; left: 634px; top: 237px; z-index: 19001; width: 411px;">
<div id="ext-gen1055" class="x-mask" style="height: 880px; width: 1680px; z-index: 18997; right: auto; left: 0px; top: 0px;"></div>
<div id="ext-gen1594" class="x-mask" style="z-index: 18999; width: 1371px; height: 393px; right: auto; left: 307px; top: 159px; visibility: hidden;"></div>
<div id="loadmask-1105" class="x-mask-msg x-layer x-mask-msg-default" style="right: auto; left: 947px; top: 340px; z-index: 19001; display: none;">
<div id="ext-gen1056" class="x-css-shadow" role="presentation" style="z-index: 19000; right: auto; left: 684px; top: 238px; width: 312px; height: 116px; box-shadow: 0px 0px 6px rgb(136, 136, 136); display: none;"></div>
<div id="ext-gen1048" class="x-css-shadow" role="presentation" style="z-index: 19000; right: auto; left: 584px; top: 157px; width: 512px; height: 277px; box-shadow: 0px 0px 6px rgb(136, 136, 136); display: block;"></div>
<div id="propertieswindow-1310" class="x-window properties-window x-layer x-window-default x-closable x-window-closable x-window-default-closable x-resizable x-window-resizable x-window-default-resizable" tabindex="-1" style="height: 281px; right: auto; left: 584px; top: 153px; width: 512px; z-index: 19001;">
<div id="propertieswindow-1310_header" class="x-window-header x-header x-header-horizontal x-header-draggable x-docked x-unselectable x-window-header-default x-horizontal x-window-header-horizontal x-window-header-default-horizontal x-top x-window-header-top x-window-header-default-top x-docked-top x-window-header-docked-top x-window-header-default-docked-top" style="width: 512px; right: auto; left: -1px; top: -1px;">
<div id="propertieswindow-1310-body" class="x-window-body x-window-body-default x-layout-fit x-closable x-window-body-closable x-window-body-default-closable x-window-body-default x-window-body-default-closable x-resizable x-window-body-resizable x-window-body-default-resizable" style="background-color: white; left: 0px; top: 20px; width: 502px; height: 222px;">
<div id="form-1311" class="x-panel x-fit-item x-window-item x-panel-default" style="padding: 5px; width: 500px; margin: 0px; height: 220px;">
<div id="form-1311-body" class="x-panel-body x-panel-body-default x-panel-body-default x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left" style="width: 490px; left: 0px; top: 0px; height: 210px;">
<span id="form-1311-outerCt" style="display: table; width: 100%; table-layout: fixed;">
<div id="form-1311-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;">
<table id="textfield-1312" class="x-field x-table-plain x-form-item x-field-default x-anchor-form-item" cellpadding="0" style="table-layout: fixed; width: 490px;">
<tbody>
<tr id="textfield-1312-inputRow">
<td id="textfield-1312-labelCell" class="x-field-label-cell" width="55" valign="top" halign="right" style="">
<td id="textfield-1312-bodyEl" class="x-form-item-body " role="presentation" colspan="2" style="width: 100%;">
<input id="textfield-1312-inputEl" class="x-form-field x-form-required-field x-form-text " type="text" autocomplete="off" name="name" size="1" aria-invalid="false" style="width: 100%;">
</td>
<td id="textfield-1312-sideErrorCell" width="17" valign="middle" style="display: none;">
</tr>
</tbody>
</table>
<table id="textfield-1313" class="x-field x-table-plain x-form-item x-field-default x-anchor-form-item" cellpadding="0" style="table-layout: fixed; width: 490px;">
<table id="textfield-1314" class="x-field x-table-plain x-form-item x-field-default x-anchor-form-item" cellpadding="0" style="table-layout: fixed; width: 490px;">
<div id="panel-1315" class="x-panel x-panel-default" style="width: 490px; height: 119px;">
<table id="hiddenfield-1332" class="x-field x-table-plain x-form-item-hidden x-field-default x-anchor-form-item" cellpadding="0" style="table-layout: auto;">
<table id="hiddenfield-1333" class="x-field x-table-plain x-form-item-hidden x-field-default x-anchor-form-item" cellpadding="0" style="table-layout: auto;">
</div>
</span>
</div>
</div>
</div>
<div id="toolbar-1334" 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="width: 502px; right: auto; left: 4px; top: 246px;">
<div id="propertieswindow-1310-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"></div>
<div id="propertieswindow-1310-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"></div>
<div id="propertieswindow-1310-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"></div>
<div id="propertieswindow-1310-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"></div>
<div id="propertieswindow-1310-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"></div>
<div id="propertieswindow-1310-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"></div>
<div id="propertieswindow-1310-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"></div>
<div id="propertieswindow-1310-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"></div>
</div>
</body>
</html>

edit: link to image : http://imageshack.us/f/811/8thi.png/

2
extjsseleniumwebdriverselenium-webdriver
Duplicate stackoverflow.com/questions/14098679/… – Amey
@amey: I doubt it. Maybe OP just didn't explain it clearly. For ExtJs, iframe/div windows are quite common, not sure if OP is actually talking about that or browser window. – Yi Zeng
I have added the image link to the original post. Please take a look – user2479333
@user1177636 Seeing other posts I was doubtful and searched the html page however, I couldn't find any <iframe> line in it. – user2479333
@user1177636 Can you please take a look at the below link and help me with it.stackoverflow.com/questions/17307302/… – user2479333

2 Answers

0
votes

Oh, well, in your case this is neither browser window nor iframe popup.

So you just need to locator it normally.

I will suggest the following locator:

driver.findElement(By.cssSelector(".x-window input[name='name']"));

This is based on the info you provided, please give some feedback as it may not working.

0
votes

I humbly see by your "x-" tags that your using some kind of Google web module/objects in your application (similar to polymer.js), which may hide certain things from us. You probably need to enable shadow-DOM viewing in Chrome web-developer tools in order to view and see the source code within these objects.

But, to try to answer your question, given limited information, if this is just a simple popup window, all you need to do is use the Selenium "driver.switchTo()" method and then use a JavascriptExecutor to get popup window focus with "window.focus()" and then operate on the popup window and close it to get back to the parent window.

EDIT: It should also be noted that the Selenium binary Chrome driver now supports Shadow DOM (since Jan 28, 2015) : http://chromedriver.storage.googleapis.com/2.14/notes.txt