Select first row after table is populated

I have this Angular SPA app which is displaying table rows after search:

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

Answer

Basically if you pay attention, you would see that this table is not build using tr and td tags. Basically it is a div with attribute role="row"

Also, to answer this part

waits for table row to be displayed 

we have 2 ways.

1. Use findElements onto that particular web element.

2. Use Explicit waits.

Code with Explicit waits :

This xpath //div[@role='row'][@row-index='0']/div matches 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

WebDriverWait wait = new WebDriverWait(driver, 30);
wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@role='row'][@row-index='0']/div"))).click();

Code with 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");
}