Select 填充表格后的第一行
[英]Select first row after table is populated
问题描述
I have this Angular SPA app which is displaying table rows after search:
我有这个 Angular SPA 应用程序，它在搜索后显示表格行：
<div class="ag-root-wrapper-body ag-layout-normal ag-focus-managed" ref="rootWrapperBody"><div class="ag-tab-guard ag-tab-guard-top" role="presentation" tabindex="0"></div>
<!--AG-GRID-COMP--><div class="ag-root ag-unselectable ag-layout-normal" role="grid" unselectable="on" ref="gridPanel" aria-rowcount="2" aria-colcount="8">
<!--AG-HEADER-ROOT--><div class="ag-header ag-focus-managed ag-pivot-off" role="presentation" ref="headerRoot" unselectable="on" style="height: 26px; min-height: 26px;">
<div class="ag-pinned-left-header ag-hidden" ref="ePinnedLeftHeader" role="presentation" style="width: 0px; max-width: 0px; min-width: 0px;"><div class="ag-header-row ag-header-row-column" role="row" aria-rowindex="1" style="top: 0px; height: 25px; width: 0px;"></div></div>
<div class="ag-header-viewport" ref="eHeaderViewport" role="presentation">
<div class="ag-header-container" ref="eHeaderContainer" role="rowgroup" style="width: 800px; transform: translateX(0px);"><div class="ag-header-row ag-header-row-column" role="row" aria-rowindex="1" style="top: 0px; height: 25px; width: 800px;"><div class="ag-header-cell ag-focus-managed ag-header-cell-sortable" role="columnheader" unselectable="on" tabindex="-1" aria-sort="none" aria-colindex="1" col-id="lookupCode" style="width: 200px; left: 0px;">
<div ref="eResize" class="ag-header-cell-resize ag-hidden" role="presentation"></div>
<!--AG-CHECKBOX--><div role="presentation" ref="cbSelectAll" class="ag-header-select-all ag-labeled ag-label-align-right ag-checkbox ag-input-field ag-hidden">
<div ref="eLabel" class="ag-input-field-label ag-label ag-hidden ag-checkbox-label"></div>
<div ref="eWrapper" class="ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper" role="presentation">
<input ref="eInput" class="ag-input-field-input ag-checkbox-input" type="checkbox" id="ag-306-input" tabindex="-1" aria-label="Press Space to toggle all rows selection (unchecked)">
</div>
</div>
<div class="ag-cell-label-container ag-header-cell-sorted-none">
<div ref="eLabel" class="ag-header-cell-label" role="presentation" unselectable="on">
<span ref="eText" class="ag-header-cell-text" unselectable="on">Serial Number</span>
<span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-filter" unselectable="on" role="presentation"></span></span>
<span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order ag-hidden" aria-hidden="true"></span>
<span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-up"></i></span>
<span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-down"></i></span>
<span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-none" unselectable="on" role="presentation"></span></span>
</div>
</div></div><div class="ag-header-cell ag-focus-managed ag-header-cell-sortable" role="columnheader" unselectable="on" tabindex="-1" aria-sort="none" aria-colindex="6" col-id="materialName" style="width: 200px; left: 200px;">
<div ref="eResize" class="ag-header-cell-resize ag-hidden" role="presentation"></div>
<!--AG-CHECKBOX--><div role="presentation" ref="cbSelectAll" class="ag-header-select-all ag-labeled ag-label-align-right ag-checkbox ag-input-field ag-hidden">
<div ref="eLabel" class="ag-input-field-label ag-label ag-hidden ag-checkbox-label"></div>
<div ref="eWrapper" class="ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper" role="presentation">
<input ref="eInput" class="ag-input-field-input ag-checkbox-input" type="checkbox" id="ag-309-input" tabindex="-1" aria-label="Press Space to toggle all rows selection (unchecked)">
</div>
</div>
<div class="ag-cell-label-container ag-header-cell-sorted-none">
<div ref="eLabel" class="ag-header-cell-label" role="presentation" unselectable="on">
<span ref="eText" class="ag-header-cell-text" unselectable="on">Material</span>
<span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-filter" unselectable="on" role="presentation"></span></span>
<span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order ag-hidden" aria-hidden="true"></span>
<span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-up"></i></span>
<span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-down"></i></span>
<span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-none" unselectable="on" role="presentation"></span></span>
</div>
</div></div><div class="ag-header-cell ag-focus-managed ag-header-cell-sortable" role="columnheader" unselectable="on" tabindex="-1" aria-sort="none" aria-colindex="7" col-id="lotLookupCode" style="width: 200px; left: 400px;">
<div ref="eResize" class="ag-header-cell-resize ag-hidden" role="presentation"></div>
<!--AG-CHECKBOX--><div role="presentation" ref="cbSelectAll" class="ag-header-select-all ag-labeled ag-label-align-right ag-checkbox ag-input-field ag-hidden">
<div ref="eLabel" class="ag-input-field-label ag-label ag-hidden ag-checkbox-label"></div>
<div ref="eWrapper" class="ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper" role="presentation">
<input ref="eInput" class="ag-input-field-input ag-checkbox-input" type="checkbox" id="ag-312-input" tabindex="-1" aria-label="Press Space to toggle all rows selection (unchecked)">
</div>
</div>
<div class="ag-cell-label-container ag-header-cell-sorted-none">
<div ref="eLabel" class="ag-header-cell-label" role="presentation" unselectable="on">
<span ref="eText" class="ag-header-cell-text" unselectable="on">Lot</span>
<span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-filter" unselectable="on" role="presentation"></span></span>
<span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order ag-hidden" aria-hidden="true"></span>
<span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-up"></i></span>
<span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-down"></i></span>
<span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-none" unselectable="on" role="presentation"></span></span>
</div>
</div></div><div class="ag-header-cell ag-focus-managed ag-header-cell-sortable" role="columnheader" unselectable="on" tabindex="-1" aria-sort="none" aria-colindex="8" col-id="packagingName" style="width: 200px; left: 600px;">
<div ref="eResize" class="ag-header-cell-resize ag-hidden" role="presentation"></div>
<!--AG-CHECKBOX--><div role="presentation" ref="cbSelectAll" class="ag-header-select-all ag-labeled ag-label-align-right ag-checkbox ag-input-field ag-hidden">
<div ref="eLabel" class="ag-input-field-label ag-label ag-hidden ag-checkbox-label"></div>
<div ref="eWrapper" class="ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper" role="presentation">
<input ref="eInput" class="ag-input-field-input ag-checkbox-input" type="checkbox" id="ag-336-input" tabindex="-1" aria-label="Press Space to toggle all rows selection (unchecked)">
</div>
</div>
<div class="ag-cell-label-container ag-header-cell-sorted-none">
<div ref="eLabel" class="ag-header-cell-label" role="presentation" unselectable="on">
<span ref="eText" class="ag-header-cell-text" unselectable="on">Unit</span>
<span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-filter" unselectable="on" role="presentation"></span></span>
<span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order ag-hidden" aria-hidden="true"></span>
<span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-up"></i></span>
<span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-down"></i></span>
<span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-none" unselectable="on" role="presentation"></span></span>
</div>
</div></div></div></div>
</div>
<div class="ag-pinned-right-header ag-hidden" ref="ePinnedRightHeader" role="presentation" style="width: 0px; max-width: 0px; min-width: 0px;"><div class="ag-header-row ag-header-row-column" role="row" aria-rowindex="1" style="top: 0px; height: 25px; width: 0px;"></div></div>
</div>
<div class="ag-floating-top" ref="eTop" role="presentation" unselectable="on" style="min-height: 0px; height: 0px; display: none; overflow-y: hidden;">
<div class="ag-pinned-left-floating-top ag-hidden" ref="eLeftTop" role="presentation" unselectable="on"></div>
<div class="ag-floating-top-viewport" ref="eTopViewport" role="presentation" unselectable="on">
<div class="ag-floating-top-container" ref="eTopContainer" role="presentation" unselectable="on" style="width: 800px; transform: translateX(0px);"></div>
</div>
<div class="ag-pinned-right-floating-top ag-hidden" ref="eRightTop" role="presentation" unselectable="on"></div>
<div class="ag-floating-top-full-width-container ag-hidden" ref="eTopFullWidthContainer" role="presentation" unselectable="on"></div>
</div>
<div class="ag-body-viewport ag-layout-normal ag-row-no-animation" ref="eBodyViewport" role="presentation">
<div class="ag-pinned-left-cols-container ag-hidden" ref="eLeftContainer" role="presentation" unselectable="on" style="height: 50px;"><div role="row" row-index="0" aria-rowindex="2" row-id="2" comp-id="342" class="ag-row ag-row-focus ag-row-even ag-row-level-0 ag-row-position-absolute ag-row-first ag-row-last ag-row-selected" aria-selected="true" style="height: 50px; transform: translateY(0px); " aria-label="Press SPACE to deselect this row."></div></div>
<div class="ag-center-cols-clipper" ref="eCenterColsClipper" role="presentation" unselectable="on" style="height: 50px;">
<div class="ag-center-cols-viewport" ref="eCenterViewport" role="presentation" style="height: calc(100% + 0px);">
<div class="ag-center-cols-container" ref="eCenterContainer" role="rowgroup" unselectable="on" style="width: 800px; height: 50px;"><div role="row" row-index="0" aria-rowindex="2" row-id="2" comp-id="342" class="ag-row ag-row-focus ag-row-even ag-row-level-0 ag-row-position-absolute ag-row-first ag-row-last ag-row-selected" aria-selected="true" style="height: 50px; transform: translateY(0px); " aria-label="Press SPACE to deselect this row."><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="1" comp-id="343" col-id="lookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 200px; left: 0px; ">6673718</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="6" comp-id="344" col-id="materialName" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 200px; left: 200px; ">Material_66737</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="7" comp-id="345" col-id="lotLookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value ag-cell-focus" style="width: 200px; left: 400px; ">Material_66737-GLot</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="8" comp-id="346" col-id="packagingName" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 200px; left: 600px; ">BOX</div></div></div>
</div>
</div>
<div class="ag-pinned-right-cols-container ag-hidden" ref="eRightContainer" role="presentation" unselectable="on" style="height: 50px;"><div role="row" row-index="0" aria-rowindex="2" row-id="2" comp-id="342" class="ag-row ag-row-focus ag-row-even ag-row-level-0 ag-row-position-absolute ag-row-first ag-row-last ag-row-selected" aria-selected="true" style="height: 50px; transform: translateY(0px); " aria-label="Press SPACE to deselect this row."></div></div>
<div class="ag-full-width-container" ref="eFullWidthContainer" role="presentation" unselectable="on" style="height: 50px;"></div>
</div>
<div class="ag-floating-bottom" ref="eBottom" role="presentation" unselectable="on" style="min-height: 0px; height: 0px; display: none; overflow-y: hidden;">
<div class="ag-pinned-left-floating-bottom ag-hidden" ref="eLeftBottom" role="presentation" unselectable="on"></div>
<div class="ag-floating-bottom-viewport" ref="eBottomViewport" role="presentation" unselectable="on">
<div class="ag-floating-bottom-container" ref="eBottomContainer" role="presentation" unselectable="on" style="width: 800px; transform: translateX(0px);"></div>
</div>
<div class="ag-pinned-right-floating-bottom ag-hidden" ref="eRightBottom" role="presentation" unselectable="on"></div>
<div class="ag-floating-bottom-full-width-container ag-hidden" ref="eBottomFullWidthContainer" role="presentation" unselectable="on"></div>
</div>
<div class="ag-body-horizontal-scroll" ref="eHorizontalScrollBody" aria-hidden="true" style="height: 0px; max-height: 0px; min-height: 0px;">
<div class="ag-horizontal-left-spacer ag-scroller-corner" ref="eHorizontalLeftSpacer" style="width: 0px; max-width: 0px; min-width: 0px;"></div>
<div class="ag-body-horizontal-scroll-viewport" ref="eBodyHorizontalScrollViewport" style="height: 0px; max-height: 0px; min-height: 0px;">
<div class="ag-body-horizontal-scroll-container" ref="eBodyHorizontalScrollContainer" style="width: 800px; height: 0px; max-height: 0px; min-height: 0px;"></div>
</div>
<div class="ag-horizontal-right-spacer ag-scroller-corner" ref="eHorizontalRightSpacer" style="width: 0px; max-width: 0px; min-width: 0px;"></div>
</div>
<!--AG-OVERLAY-WRAPPER--><div class="ag-overlay ag-hidden" aria-hidden="true" ref="overlayWrapper">
<div class="ag-overlay-panel">
<div class="ag-overlay-wrapper ag-layout-normal ag-overlay-no-rows-wrapper" ref="eOverlayWrapper"></div>
</div>
</div>
</div>
<div class="ag-tab-guard ag-tab-guard-bottom" role="presentation" tabindex="0"></div></div>
Do you know how I can implement a listener with Java and Selenium which waits for table row to be displayed and clicks in it?你知道我如何用 Java 和 Selenium 实现一个等待显示表格行并点击它的监听器吗？ I tried something like this:我试过这样的事情：
WebElement element = driver.findElement(By.cssSelector("div:not(.ag-hidden) > .ag-row-first"));
element.click();
But it's not working.但它不起作用。 Can you guide me for appropriate solution?你能指导我找到合适的解决方案吗？
4 个解决方案
解决方案1
3 2021-09-10 13:40:59
To wait for some condition to be true you can use those two:要等待某些条件为真，您可以使用这两个：
org.openqa.selenium.support.ui.WebDriverWait
org.openqa.selenium.support.ui.ExpectedConditions
like this:像这样：
public static WebDriverWait waitSec(int sec) {
return new WebDriverWait(driver, sec);
}
public static WebElement clickableByXpath(String xpath, int sec) {
WebElement element = waitSec(sec).until(ExpectedConditions.elementToBeClickable(By.xpath(xpath)));
return element;
}
public static WebElement clickableById(String id, int sec) {
WebElement element = waitSec(sec).until(ExpectedConditions.elementToBeClickable(By.id(id)));
return element;
}
See all expected conditions in https://www.selenium.dev/selenium/docs/api/java/org/openqa/selenium/support/ui/ExpectedConditions.html查看https://www.selenium.dev/selenium/docs/api/java/org/openqa/selenium/support/ui/ExpectedConditions.html中的所有预期条件
To implement as listener you need second WebDriver instance listening on page where the first WebDriver instance operates.要实现为侦听器，您需要第二个WebDriver实例在第一个WebDriver实例运行的页面上侦听。 Not sure if it's possible.不确定是否可能。
解决方案2
2 已采纳 2021-09-12 07:26:02
Basically if you pay attention, you would see that this table is not build using tr and td tags.基本上如果你注意的话，你会发现这个表不是使用tr和td tags. Basically it is a div with attribute role="row"基本上它是一个带有attribute role="row"的div
Also, to answer this part另外，回答这部分
waits for table row to be displayed
we have 2 ways.我们有两种方法。
Use
findElementsonto that particular web element.在特定的 web 元素上使用findElements。Use Explicit waits.
使用显式等待。
Code with Explicit waits:具有显式等待的代码：
This xpath //div[@role='row'][@row-index='0']/div matches 4 nodes in HTML DOM .这个 xpath //div[@role='row'][@row-index='0']/div匹配4 nodes in HTML DOM 。 But since you've mentioned that you wanna, target and click on 6673718 , using the mentioned xpath it would click on the first element and that represent the 6673718但是既然你已经提到你想要， target and click 6673718 ，使用提到的 xpath 它会点击第first element并且代表6673718
WebDriverWait wait = new WebDriverWait(driver, 30);
wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@role='row'][@row-index='0']/div"))).click();
Code with FindElements:使用 FindElements 编写代码：
WebDriverWait wait = new WebDriverWait(driver, 30);
List<WebElement> listElems = driver.findElements(By.xpath("//div[@role='row'][@row-index='0']/div"));
if (listElems.size() > 0 ) {
wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@role='row'][@row-index='0']/div"))).click();
}
else {
System.out.println("Either element is not present, or it's not rendered properly");
}
解决方案3
0 2021-10-01 13:27:03
Try the below code and it should work, here is how it works.试试下面的代码，它应该可以工作，下面是它的工作原理。 We have created our own expected condition here, which will check for class named ag-hidden to be missing from the element.我们在这里创建了自己的预期条件，它将检查元素中是否缺少名为 ag-hidden 的 class。 every time it finds a value "ag-hidden" in the class it will return false and again check after 500 milliseconds until the method returns true for next 20 seconds.每次它在 class 中找到值“ag-hidden”时，它将返回 false 并在 500 毫秒后再次检查，直到该方法在接下来的 20 秒内返回 true。 Here you can change the timeout as per your wish.在这里您可以根据自己的意愿更改超时。
You can write the code to work on the first row of the table after this statement.您可以在该语句之后编写代码来处理表的第一行。
You can go through the following link to understand further about custom expected condition您可以通过以下链接go进一步了解自定义预期条件
WebDriverWait wait = new WebDriverWait(driver, 20);
wait.until(new ExpectedCondition<Boolean>() {
public Boolean apply(WebDriver driver) {
WebElement table = driver.findElement(By.cssSelector("div.ag-overlay"));
String classes = table.getAttribute("class");
if(classes.contains("ag-hidden"))
return false;
else
return true;
}
});
解决方案4
0 2021-10-04 09:18:07
In table, we might have more td values in the webpage, always we should wait for the all the elements to be presented in the webpage.在表格中，我们可能在网页中有更多的 td 值，我们总是应该等待所有元素在网页中呈现。 presenceOfAllElementsLocatedBy presenceOfAllElementsLocatedBy
By divCss = By.cssSelector("div:not(.ag-hidden) > .ag-row-first");
wait.until(ExpectedConditions.elementToBeClickable(divCss));
wait.until(ExpectedConditions.presenceOfAllElementsLocatedBy(divCss));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
默认选择第一行 - Select first table row by default
Primefaces LazyLoading表默认选择第一行 - Primefaces LazyLoading Table Select First Row by Default
单击复选框时如何选择整个tableviewer行（表的第一列每行都有复选框） - how to select entire tableviewer row when checkbox clicked (first column of the table has checkboxes in each row)
在将 Selenium 与 java 一起使用时，无法在网格中应用过滤器后的第一行 select [棘手情况] - Not able to select the first row after applying a filter in a grid while using Selenium with java [tricky situation]
Glazedlist表的第一行中的IndexOutOfBoundsException？ - IndexOutOfBoundsException in the first row of Glazedlist table?
使用Hibernate创建/重新创建表后，立即自动插入第一行 - Automatically Insert first row soon after table is created / recreated using Hibernate
再次选择表格的一行 - Select a row of a Table for second time
在primefaces数据表中选择“行” - Select Row in primefaces data table
行排序后在JTable中选择行 - Select row in a JTable after row sorting
即使使用table.setRowSelectionAllowed（true），添加颜色后也无法选择jtable的行 - cannot select row of jtable after adding colors even with table.setRowSelectionAllowed(true)
相关标签