Sorting grid columns using Testbench

Flow
1

Hello,

I am unable to capture the sorter from the grid element in order to test via UI that the sorting works on version: com.vaadin:vaadin-testbench-core:6.2.1

As pointed by another user, GridElement::getHeaderCell returns the th in Grid’s shadow DOM, but in order to trigger sort or query the direction attribute one needs to retrieve the vaadin-grid-sorter element that is inside of the slotted cell:

GridTHTDElement th = grid.getHeaderCell(0);
    WebElement sorter = (WebElement) th.getCommandExecutor().executeScript(
            "return arguments[0]
.children[0]
.assignedElements()[0]
.querySelector('vaadin-grid-sorter')", th);
    sorter.click();

The sorter returns as null and any other direct interactions on the element do not result in any interaction with the element.
th.click(), th,contextClick().

I’d be happy to receive any suggestions or ideas.

2

Hello,

Could you please try this code snippet if it works?
grid.getHeaderCell(0).$("vaadin-grid-sorter").first().click();

Best regards,
Yuriy

3

Thanks for the suggestion Yuri.

Still fails with ‘element not found’.
org.openqa.selenium.NoSuchElementException: No element with tag found using index 0

4

Might have found a solution after 2 days of trying. Yuriy’s suggestion also put me on the right track.

This snippet does the job to click on the header and sort the column.
Difference is getting the wrapped element as a generic Webelement instead of GridTHTDElement. Casting the element as GridTHTDElement will throw an exception when trying to use getHeaderCellContent().

GridElement grid = driver.$(GridElement.class).first();
WebElement th = grid.getHeaderCellContent(0,0);
th.findElement(By.tagName("vaadin-grid-sorter")).click();