React-Virtualized：通过 e2e 选择器以编程方式访问单元格

Question

是否有通过选择器以编程方式访问单元格的最佳实践？

我正在尝试让 e2e 测试轻松访问网格。

Answer 1

您如何渲染网格？您是使用 react-test-renderer 还是使用 ReactTestUtils.renderIntoDocument() 或 ReactDOM.render() 之类的直接 DOM 注入？如果是后 2 个，我在测试中所做的是在每个单元格中添加自定义 CSS class，并使用如下模式呈现：

  public static createCustomCellClass(rowIndex: number, columnIndex: number): string
  {
    return `pos-${rowIndex}-${columnIndex}`;
  }

然后，如果我想访问单元格的 DOM 元素，我可以使用 "div.pos-12-13" 之类的选择器来获取 rowIndex 12 和 columnIndex 13 处的单元格。 这对我来说效果很好。 我发现，因为所有的单元格都是绝对定位的，所以要到达特定的单元格并不简单。