0

I am new to Selenium webdriver. I am working on a application in 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, check few boxes and then click on create button for creating a folder. I am trying to click on check-boxes and then click on create. The check-boxes don't have a name, text, label. I tried using the CSS selector, and the following xpath of the element however, non of these are working. When running using the xpath I get an exception error saying "Unable to locate element". 

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

Here is the link for the pop-up window check-boxes image

http://imageshack.us/f/811/8thi.png/

Here is the 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-1010" class="x-container x-fit-item x-container-default x-border-layout-ct" style="margin: 0px; width: 1680px; height: 494px;">
<div id="ext-quicktips-tip" class="x-tip x-layer x-tip-default" style="display: none;">
<div id="ext-gen1562" class="x-mask" style="z-index: 18999; width: 1371px; height: 300px; right: auto; left: 307px; top: 159px; visibility: hidden;"></div>
<div id="loadmask-1094" class="x-mask-msg x-layer x-mask-msg-default" style="right: auto; left: 947px; top: 293px; z-index: 19001; display: none;">
<div id="ext-gen1660" class="x-css-shadow" role="presentation" style="z-index: 19000; right: auto; left: 584px; top: 110px; width: 512px; height: 277px; box-shadow: 0px 0px 6px rgb(136, 136, 136); display: block;"></div>
<div id="propertieswindow-1245" 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: 106px; width: 512px; z-index: 19001;">
<div id="propertieswindow-1245_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-1245-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-1246" class="x-panel x-fit-item x-window-item x-panel-default" style="padding: 5px; width: 500px; margin: 0px; height: 220px;">
<div id="form-1246-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-1246-outerCt" style="display: table; width: 100%; table-layout: fixed;">
<div id="form-1246-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;">
<table id="textfield-1247" 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-1248" 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-1249" 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-1250" class="x-panel x-panel-default" style="width: 490px; height: 119px;">
<div id="panel-1250_header" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top" style="width: 490px; right: auto; left: 0px; top: 0px;">
<div id="panel-1250-body" class="x-panel-body x-panel-body-default x-table-layout-ct x-panel-body-default" style="left: 0px; width: 490px; top: 25px; height: 94px;">
<table id="ext-gen1642" class="x-table-layout" cellspacing="0" cellpadding="0" role="presentation">
<tbody>
<tr>
<tr>
<td id="" class="x-table-layout-cell " rowspan="1" colspan="1">
<td id="" class="x-table-layout-cell " rowspan="1" colspan="1">
<table id="checkboxfield-1256" class="x-field x-table-plain x-form-item x-field-default x-table-form-item" cellpadding="0" style="border-width: 0px; table-layout: auto;">
<tbody>
<tr id="checkboxfield-1256-inputRow">
<td id="checkboxfield-1256-labelCell" class="x-field-label-cell" width="105" valign="top" halign="right" style="display:none;">
<td id="checkboxfield-1256-bodyEl" class="x-form-item-body x-form-cb-wrap" role="presentation" colspan="3">
<input id="checkboxfield-1256-inputEl" class="x-form-field x-form-checkbox x-form-cb" type="button" hidefocus="true" autocomplete="off" aria-invalid="false">
</td>
<td id="checkboxfield-1256-sideErrorCell" width="17" valign="middle" style="display: none;">
</tr>
</tbody>
</table>
</td>
<td id="" class="x-table-layout-cell " rowspan="1" colspan="1">
<table id="checkboxfield-1257" class="x-field x-table-plain x-form-item x-field-default x-table-form-item" cellpadding="0" style="border-width: 0px; table-layout: auto;">
<tbody>
<tr id="checkboxfield-1257-inputRow">
<td id="checkboxfield-1257-labelCell" class="x-field-label-cell" width="105" valign="top" halign="right" style="display:none;">
<td id="checkboxfield-1257-bodyEl" class="x-form-item-body x-form-cb-wrap" role="presentation" colspan="3">
<input id="checkboxfield-1257-inputEl" class="x-form-field x-form-checkbox x-form-cb" type="button" hidefocus="true" autocomplete="off" aria-invalid="false">
</td>
<td id="checkboxfield-1257-sideErrorCell" width="17" valign="middle" style="display: none;">
</tr>
</tbody>
</table>
</td>
<td id="" class="x-table-layout-cell " rowspan="1" colspan="1">
</tr>
<tr>
<tr>
</tbody>
</table>
</div>
</div>
<table id="hiddenfield-1267" 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-1268" 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-1269" 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="toolbar-1269-innerCt" class="x-box-inner " role="presentation" style="width: 496px; height: 22px;">
<div id="toolbar-1269-targetEl" class="x-box-target" style="width: 496px;">
<div id="button-1270" class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon" style="border-width: 1px; right: auto; left: 334px; margin: 0px; top: 0px; width: 75px;">
<div id="button-1270-btnWrap" class="x-btn-wrap" unselectable="on">
<a id="button-1270-btnEl" class="x-btn-button" tabindex="0" unselectable="on" hidefocus="on" role="button">
<span id="button-1270-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">Create</span>
<span id="button-1270-btnIconEl" class="x-btn-icon-el " style="" unselectable="on" role="img"></span>
</a>
</div>
</div>
<div id="button-1271" class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon" style="border-width: 1px; right: auto; left: 415px; margin: 0px; top: 0px; width: 75px;">
</div>
</div>
</div>
<div id="propertieswindow-1245-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-1245-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-1245-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-1245-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-1245-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-1245-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-1245-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-1245-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>
<div id="ext-gen1659" class="x-mask" style="height: 854px; width: 1680px; z-index: 18997; right: auto; left: 0px; top: 0px;"></div>
</body>
</html>
Vince Bowdren
  • 8,326
  • 3
  • 31
  • 56
user2479333
  • 7
  • 3
  • 6
  • I would strongly advise against trying to use Selenium with ExtJS, for a number of reasons. ExtJS renders things differently in different browsers, so XPaths will not always be standard (plus they will sometimes change between Ext versions). Element IDs are also generated dynamically, which makes it that much harder to try to use Selenium. I have not used it myself, but have heard that Siesta is a possible alternative you could explore: http://www.bryntum.com/products/siesta/. – kevhender Jun 25 '13 at 21:01
  • @kevhender: Oh well, yes it's hard, but works fine no matter how complex the website is. As long as the class names are added to the pages. – Yi Zeng Jun 25 '13 at 21:47

1 Answers1

2

First, the answer below will not be that elegant if you are testing a complex web app. If you really want to do the ExtJS ui testing right, add class names to relevant elements. If you can't get developers to do so, life will be miserable.

Step 1: find the window by cssSelector .x-window or xpath //*[contains(@class, 'x-window')]

Step 2: find all checkboxes, cssSelector input[id^='checkboxfield'] or xpath //input[starts-with(@id, 'checkboxfield')]. Alternatively, you may also find table[id^='checkboxfield'] first, then get the input inside, but logic is the same.

Step 3: index the one you want

List<IWebElement> checkboxes = driver.findElements(By.cssSelector(".x-window input[id^='checkboxfield']"));
//checkboxes.size() here should be six in your case?
checkboxes[0].click();

I'd suggest you to learn how to use xpath or cssSelector effectively. However, the reason I think this answer is still not elegant is because indexing a list of elements is not a stable approach. Whenever UI changes, your tests fail. If you have a custom class name for that checkbox, it will be much easier, as you can locate this particular checkbox by its unique class name (e.g checkbox-owner-write).

Yi Zeng
  • 32,020
  • 13
  • 97
  • 125
  • @1177636 Thank you for suggesting this solution. I was able to check all the boxes with few changes with the solution you suggested me. List checkboxes = driver.findElements(By.cssSelector(".x-window input[id^='checkboxfield']")); for (WebElement checkbox : checkboxes) { checkbox.click(); } – user2479333 Jun 27 '13 at 17:37
  • @1177636 however for a create button I am not able to find a unique attribute as almost all the attributes are same for Create and Cancel button except the id's whose numbers are being changed and the inner text with which am unable to click while specifying '.x-window'. – user2479333 Jun 27 '13 at 17:41
  • @user2479333: Yes, you can do the same `List buttons = driver.findElements(By.cssSelector(".x-window .x-btn-button"));`, then `buttons[0]` is the create and `buttons[1]` is cancel. But like I said, the best way is to add unique class names in the source code. – Yi Zeng Jun 27 '13 at 21:10
  • Yeah I spoke to my colleagues about it. I was able to click on the create with this as well.... driver.findElement(By.xpath("//div[contains(@class, 'properties-window')] //span[text()='Create']")); Thank you once again... – user2479333 Jun 27 '13 at 23:02
  • @user2479333: Oh yes, I forgot to tell you that way, because in my ExtJs app, it supports multi-languages, finding elements by text is not desirable. But this may work for you, good luck! – Yi Zeng Jun 27 '13 at 23:08