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

Posted 2023-02-24

【中文标题】查找网格中的所有行，即使您必须在网格中向下滚动

【英文标题】：Find ALL rows in a Grid, even if you have to scroll down in the Grid

【发布时间】：2019-04-04 13:30:38

【问题描述】：

我正在尝试为 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 [e-mail]</tr>
<tr class="v-grid-row v-grid-row-stripe v-grid-row-has-data">Jaydan Jackson [e-mail]</tr>
<tr class="v-grid-row v-grid-row-has-data">Solomon Olsen [e-mail]</tr>
<tr class="v-grid-row v-grid-row-stripe v-grid-row-has-data">Elvis Olsen [e-mail]</tr>
<tr class="v-grid-row v-grid-row-has-data">Rene Carlsson [e-mail]</tr>
<tr class="v-grid-row v-grid-row-stripe v-grid-row-has-data">Remington Andersson [e-mail]</tr>
<tr class="v-grid-row v-grid-row-has-data">Ann Andersson [e-mail]</tr>
<tr class="v-grid-row v-grid-row-stripe v-grid-row-has-data">Lara Martin [e-mail]</tr>
<tr class="v-grid-row v-grid-row-has-data">Jamar Olsson [e-mail]</tr>
<tr class="v-grid-row v-grid-row-stripe v-grid-row-has-data">Gunner Karlsen [e-mail]</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 行。

我还尝试在open(...) 之后添加Thread.sleep，以防单元测试有点太不耐烦并且没有阅读完整的表格。

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

【参考方案1】：

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