反应虚拟化:通过 e2e 选择器以编程方式访问单元

Question

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

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

Answer 1

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

模式如下：

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

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