如何在没有名称，标签的弹出窗口中单击复选框

松英喆

2023-03-14

问题内容：

我是Selenium
webdriver的新手。我正在开发一个应用程序，其中单击一个按钮将弹出一个用于创建新文件夹的窗口。在此弹出窗口中，我们需要填写几个输入字段，选中几个框，然后单击“创建”按钮以创建文件夹。我试图单击复选框，然后单击创建。复选框没有名称，文本，标签。我尝试使用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代码

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

问题答案：

首先，如果您正在测试复杂的Web应用程序，那么下面的答案将不是那么完美。如果您确实想正确执行ExtJS
ui测试，请在相关元素中添加类名称。如果您不能让开发人员这样做，那么生活将会很痛苦。

步骤1： 通过cssSelector .x-window或xpath 查找窗口//*[contains(@class, 'x-window')]

第2步： 找到所有复选框cssSelector input[id^='checkboxfield']或xpath
//input[starts-with(@id, 'checkboxfield')]。或者，您也可以table[id^='checkboxfield']先找到，然后进入input内部，但是逻辑是相同的。

步骤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）来定位此特定的复选框。

如何在没有名称，标签的弹出窗口中单击复选框

相关阅读

相关文章

相关问答

相关工具

相关文档