如何点击没有名称，标签的弹出窗口上的复选框 [英] how to click on checkboxes on a pop-up window which doesn't have name, label
问题描述
我是Selenium webdriver的新手。我正在处理一个应用程序，其中点击一个按钮将弹出一个窗口创建一个新的文件夹。在这个弹出窗口中，我们需要填充几个输入字段，选中几个框，然后单击创建按钮创建一个文件夹。我想点击复选框，然后点击创建。复选框没有名称，文本，标签。我尝试使用CSS选择器，并且元素的以下xpath，但不是这些都工作。当使用xpath运行时，我得到一个异常错误，无法找到元素。
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"));
这是弹出窗口的链接复选框image
Here is the link for the pop-up window check-boxes image
http://imageshack.us/f/811/8thi。 png /
以下是HTML代码
<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>
推荐答案
首先，下面的答案不会那么优雅您正在测试一个复杂的网络应用程序。如果你真的想做ExtJS ui测试，添加类名到相关的元素。
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.
第1步：通过cssSelector查找窗口 .x-window 或xpath // * [contains（@class，'x-window'）]
Step 1: find the window by cssSelector .x-window or xpath //*[contains(@class, 'x-window')]
步骤2：找到所有复选框，cssSelector 输入[id ^ ='checkboxfield'] 或xpath // input [starts-with（@id，'checkboxfield'）] 。或者，您也可以先找到 table [id ^ ='checkboxfield'] ，然后在里面获取输入逻辑是一样的。
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.
步骤3：索引您想要的索引。
List<IWebElement> checkboxes = driver.findElements(By.cssSelector(".x-window input[id^='checkboxfield']"));
//checkboxes.size() here should be six in your case?
checkboxes[0].click();
我建议你学习如何有效地使用xpath或cssSelector。但是，我认为这个答案仍然不优雅的原因是因为索引一个元素列表不是一个稳定的方法。
每当UI更改时，您的测试失败。如果你有一个自定义类名称为那个复选框，它会更容易，因为你可以找到这个特殊的复选框，其唯一的类名称（例如 checkbox-owner-write ） 。
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).
这篇关于如何点击没有名称，标签的弹出窗口上的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://imageshack.us/f/811/8thi。 png /](\"http://imageshack.us/f/811/8thi.png/\"){kind=link}