如何单击没有名称、标签的弹出窗口上的复选框 [英] how to click on checkboxes on a pop-up window which doesn't have name, label

查看：18
本文介绍了如何单击没有名称、标签的弹出窗口上的复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 Selenium 网络驱动程序的新手.我正在开发一个应用程序，在该应用程序中单击按钮将弹出一个用于创建新文件夹的窗口.在这个弹出窗口中，我们需要填写几个输入字段，选中几个框，然后点击创建按钮来创建一个文件夹.我正在尝试单击复选框，然后单击创建.复选框没有名称、文本和标签.我尝试使用 CSS 选择器和元素的以下 xpath，但是，这些都不起作用.使用 xpath 运行时，出现异常错误，提示无法定位元素".

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"));

这是弹出窗口复选框图像的链接

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

这是HTML代码

<头><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;显示:无；"><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-closeable x-window-default-closeable x-resizable x-window-resizablex-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-horizo​​ntal x-header-draggable x-docked x-unselectable x-window-header-default x-horizo​​ntal x-window-header-horizo​​ntal x-window-header-default-horizo​​ntal 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-closeable x-window-body-closesable x-window-body-default-可关闭的 x-window-body-default x-window-body-default-closeable x-resizable x-window-body-resizable x-window-body-default-resizable" style="background-color: white; left: 0px;顶部:20 像素；宽度:502 像素；高度:222 像素；"><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-停靠-无边框-底部 x-停靠-无边框-左" 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:固定；宽度: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:固定；宽度: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:固定；宽度: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-horizo​​ntal x-docked x-unselectable x-panel-header-default x-horizo​​ntal x-panel-header-horizo​​ntal x-panel-header-default-horizo​​ntal 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:490 像素；顶部:25 像素；高度:94 像素；"><table id="ext-gen1642" class="x-table-layout" cellpacing="0" cellpadding="0" role="presentation"><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;"><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=假"></td><td id="checkboxfield-1256-sideErrorCell" width="17" valign="middle" style="display: none;"></tr></tbody></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;"><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=假"></td><td id="checkboxfield-1257-sideErrorCell" width="17" valign="middle" style="display: none;"></tr></tbody></td><td id="" class="x-table-layout-cell" rowspan="1" colspan="1"></tr><tr><tr></tbody>

<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-布局:自动；"><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-布局:自动；">

</span>

<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">创建</span><span id="button-1270-btnIconEl" class="x-btn-icon-el " style="" unselectable="on" role="img"></span></a>

<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 id="propertieswindow-1245-north-handle" class="x-resizable-handle x-resizable-handle-north x-window-handle x-window-handle-north x-window-handle-north-brx-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-brx-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-brx-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-brx-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-brx-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-brx-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-brx-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-brx-unselectable" unselectable="on"></div>

<div id="ext-gen1659" class="x-mask" style="height: 854px; width: 1680px; z-index: 18997; right: auto; left: 0px; top: 0px;"><;/div>

解决方案

首先，如果您正在测试一个复杂的 Web 应用程序，下面的答案将不会那么优雅.如果您真的想正确地进行 ExtJS ui 测试，请将类名添加到相关元素.如果你不能让开发者这样做，生活会很悲惨.

第一步:通过 cssSelector .x-window 或者 xpath //*[contains(@class, 'x-window')] 找到窗口

第 2 步: 找到所有复选框，cssSelector input[id^='checkboxfield'] 或 xpath //input[starts-with(@id,'复选框字段')].或者，你也可以先找到table[id^='checkboxfield']，然后获取里面的input，但逻辑是一样的.

第 3 步:索引你想要的

Listcheckboxes = driver.findElements(By.cssSelector(".x-window input[id^='checkboxfield']"));//checkboxes.size() 在你的情况下应该是六个?复选框[0].click();

我建议您学习如何有效地使用 xpath 或 cssSelector.但是，我认为这个答案仍然不够优雅的原因是索引元素列表并不是一种稳定的方法.每当 UI 更改时，您的测试都会失败.如果您为该复选框设置了自定义类名，则会更容易，因为您可以通过其唯一的类名(例如 checkbox-owner-write)找到此特定复选框.

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>

解决方案

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).

这篇关于如何单击没有名称、标签的弹出窗口上的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆