stackoom
  简体   繁体   中英

Select first table row by default

 原文  2021-07-16 21:10:32  9   3    java/ selenium/ selenium-webdriver

Question

I have this Angular application which displays selected table rows:

<div class="ag-center-cols-container" ref="eCenterContainer" role="rowgroup" unselectable="on" style="width: 432px; height: 100px;">
   <div role="row" row-index="0" aria-rowindex="2" row-id="0" comp-id="370" class="ag-row ag-row-focus ag-row-even ag-row-selected ag-row-level-0 ag-row-position-absolute ag-row-first" 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="371" col-id="rowCheckbox" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 32px; left: 0px;  ">
         <mobileweb-checkbox-selection-renderer _nghost-tkr-c21="" class="ng-star-inserted"><i _ngcontent-tkr-c21="" class="far fa-check-square"></i><i _ngcontent-tkr-c21="" class="far fa-square" hidden=""></i></mobileweb-checkbox-selection-renderer>
      </div>
      <div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="2" comp-id="372" col-id="lookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 32px;">4</div>
      <div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="3" comp-id="373" col-id="shipmentLookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-focus ag-cell-value" style="width: 100px; left: 132px;">20</div>
      <div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="4" comp-id="374" col-id="carrierName" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 232px;"></div>
      <div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="5" comp-id="375" col-id="shipmentExpectedDate" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 332px;">2021-01-28T16:20:35.987</div>
   </div>
   <div role="row" row-index="1" aria-rowindex="3" row-id="1" comp-id="376" class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-position-absolute ag-row-last" aria-selected="false" style="height: 50px; transform: translateY(50px); " aria-label="Press SPACE to select this row.">
      <div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="1" comp-id="377" col-id="rowCheckbox" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 32px; left: 0px;  ">
         <mobileweb-checkbox-selection-renderer _nghost-tkr-c21="" class="ng-star-inserted"><i _ngcontent-tkr-c21="" class="far fa-check-square" hidden=""></i><i _ngcontent-tkr-c21="" class="far fa-square"></i></mobileweb-checkbox-selection-renderer>
      </div>
      <div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="2" comp-id="378" col-id="lookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 32px;">3</div>
      <div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="3" comp-id="379" col-id="shipmentLookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 132px;">19</div>
      <div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="4" comp-id="380" col-id="carrierName" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 232px;"></div>
      <div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="5" comp-id="381" col-id="shipmentExpectedDate" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 332px;">2021-01-28T12:36:31.057</div>
   </div>
</div>

Full code https://pastebin.com/GUaHHnpA

How I can always click on the first table row and select it using Selenium WebDriver with Java?

3 answers

solution1
 2  2021-07-19 06:22:34

The link that you have shared for full HTML code , does not have <body> tag in it, nonetheless it has </body> , so can you re-verify that first ?

Now, based on the HTML code above, if the goal is to select the first table row , here is my suggestion/Recommendations.

You can achieve that in two ways :-

  1. Use of xpath indexing

  2. use of Selenium - findElements() method

Demonstration of case 1 :

if this xpath

//div[@role='row']

represent rows in the HTML , you would see lot of entering in DOM.

and in your case, since you wanna grab the first item, it'd be something like this :

(//div[@role='row'])[1]

in case if you'd like to select 2nd row , or 3rd row , we can get it done using changing this value from above xpath :

[1] to [2] or [3]

in code you can use it like below :

WebDriverWait wait = new WebDriverWait(driver, 30);
WebElement firstRow = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("(//div[@role='row'])[1]")));
firstRow.click();

Demonstration of case 2 :

2.1 : 

List<WebElement> allRows = driver.findElements(By.xpath("//div[@role='row']"));
WebElement firstRow = allRows.get(0);
firstRow.click();

OR

2.2 : 

List<WebElement> allRows = driver.findElements(By.xpath("//div[@role='row']"));
for (WebElement rows : allRows) {
    rows.click();
    break;
}

The below part is request by OP (additionally, it has nothing to do with the original question)

if you have already implemented WebDriverEventListener Interface or extended AbstractWebDriverEventListener Class , you can make use of the below methods :

WebDriverWait wait = new WebDriverWait(driver, 30);
WebElement firstRow = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("(//div[@role='row'])[1]")));
beforeClickOn(firstRow, driver);
firstRow.click();
afterClickOn(firstRow, driver);

and let's say this is written in class A then you can extends it like this :

public class A extends AbstractWebDriverEventListener

solution2
 1  2021-07-19 04:54:39

The first row has ag-row-first and ag-row-selected classes, you can use either one. This will match 3 elements (according to the html you posted in the link), so you can combine it with a parent element that doesn't have ag-hidden class

driver.findElement(By.cssSelector("div:not(.ag-hidden) > .ag-row-first"));

In general, findElement will return the first matching element in the DOM, so

driver.findElement(By.className(".ag-row-selected"));

Or its equivalent

driver.findElements(By.className(".ag-row-selected")).get(0);

Should have worked if the row was really the first in the DOM.

solution3
 1  2021-07-20 12:49:57

Using the Selenium plugin, you can find any element by XPath or CSS expressions.

In order to find the first row using CSS expression, use this string:

String cssExpresison = "div[role='row'][row-id='0']";
WebElement we = driver.findElement(By.cssSelector(cssExpression));
we.click();

You can use the text written in the first row via XPath:

String xPathExpression = "//div[contains(text(), 'Press SPACE to deselect this row')]";
WebElement we = driver.findElement(By.xpath(xPathExpression));
we.click();

If we.click() does Not work, do this:

Actions builder = new Actions(driver);            
builder.moveToElement(we).click().build().perform();

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Primefaces LazyLoading Table Select First Row by Default Select first row after table is populated Making a default value in a first row how to select entire tableviewer row when checkbox clicked (first column of the table has checkboxes in each row) IndexOutOfBoundsException in the first row of Glazedlist table? keep first row in jtable selected as default Select Row in primefaces data table Select a row of a Table for second time How to select the first row/line from database Spring form:select - multiple does not select first option by default
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM