查找表中的所有行，即使您必须在表中向下滚动

Question

我正在尝试为Vaadin 8教程应用程序编写UI测试，该应用程序将计算表中的行数。使用Selenide和CSS选择器进行测试。

该表是可滚动的，并且如下所示：

override fun init(vaadinRequest: VaadinRequest) {
    layout = VerticalLayout()
    grid = Grid(Customer::class.java)
    grid.id = "table.customers"
    grid.setColumns("firstName","lastName","email")
    layout.addComponents(grid)

    populateGrid()

    this.content = layout
}

private fun populateGrid() {
    val customers = customerService.findAll()
    grid.setItems(customers)
}

这个测试在这里：

@Test
fun displaysAllData(){
    //given
    val expectedCustomers = customerService.findAll()
    open("/customers")

    //when
    val displayedCustomers =  $(byId("table.customers"))
            .find("tbody:first-of-type")
            .findAll("tr")

    displayedCustomers.forEach{ println(it)}

    //then
    assertThat(displayedCustomers.size).isEqualTo(expectedCustomers.size)
}

给我

<tr class="v-grid-row v-grid-row-focused v-grid-row-has-data">Bernard Nilsen [email protected]</tr>
<tr class="v-grid-row v-grid-row-stripe v-grid-row-has-data">Jaydan Jackson [email protected]</tr>
<tr class="v-grid-row v-grid-row-has-data">Solomon Olsen [email protected]</tr>
<tr class="v-grid-row v-grid-row-stripe v-grid-row-has-data">Elvis Olsen [email protected]</tr>
<tr class="v-grid-row v-grid-row-has-data">Rene Carlsson [email protected]</tr>
<tr class="v-grid-row v-grid-row-stripe v-grid-row-has-data">Remington Andersson [email protected]</tr>
<tr class="v-grid-row v-grid-row-has-data">Ann Andersson [email protected]</tr>
<tr class="v-grid-row v-grid-row-stripe v-grid-row-has-data">Lara Martin [email protected]</tr>
<tr class="v-grid-row v-grid-row-has-data">Jamar Olsson [email protected]</tr>
<tr class="v-grid-row v-grid-row-stripe v-grid-row-has-data">Gunner Karlsen [email protected]</tr>
<tr class="v-grid-row v-grid-row-has-data" displayed:false></tr>

org.opentest4j.AssertionFailedError: 
Expecting:
 <11>
to be equal to:
 <30>
but was not.
Expected :30
Actual   :11

我确实手工计算了它，如果你滚动它，那个表中有30行。

我也尝试在Thread.sleep之后扔一个open(...)，以防单元测试有点太不耐烦而且没有阅读全桌。

这些是CSS选择器。如何获取表中的所有行，是否显示？

Answer 1

浏览器中的Grid实现基于名为Escalator的子组件。自动扶梯的想法是重用行DOM元素。即当您滚动网格时，行消失将移动到另一端并填充新数据（根据某些规则从服务器延迟加载）。所以Grid的“所有行”在浏览器中都比较新。