获取量角器中的第一个元素

Question

我想验证量角器中的表行数，在此类表格多次出现的页面上。我一直在尝试使用 first-of-type 选择器，但它似乎捕获了两个表，因为它们没有并排显示。

例如，给定此 HTML：

<div>
  <table class="foo">
    <tr>
      <th>First row</th>
      <th>Second row</th>
      <th>Third row</th>
      <th>Fourth row</th>
    </tr>
  </table>
</div>
<div>
  <table class="foo">
    <tr>
      <th>First row</th>
      <th>Second row</th>
      <th>Third row</th>
      <th>Fourth row</th>
    </tr>
  </table>
</div>

而这个量角器代码：

element.all(by.css('table:first-of-type tr:first-of-type th')).then(function (elements) {
  expect(elements.length).toBe(4);
});

量角器失败了，理由是有 8 个元素而不是 4 个。似乎table:first-of-type选择器正在捕获这两个元素，因为它们都是其父组件div组件的第一个子元素。我的项目的结构方式是，最好不要向每个包装div添加单个类。

有没有办法获取在量角器中找到的第一个元素，然后搜索其子元素？

Answer 1

我没有在量角器中使用:first-of-type作为 css 选择器;但是，您可以获得所有th的第一个table，然后检查计数是否为 4。

expect(element.all(by.css('table')).first().all(by.css('th')).count()).toBe(4);

Answer 2

你当然可以按照@cnishina建议的方式去做（我实际上更喜欢他的方法而不是制作一个长 CSS 选择器），但如果你想继续使用单个 CSS 选择器来解决这个问题，你还应该将first-of-type（或first-child）应用于父div：

div:first-of-type > table:first-of-type > tr:first-of-type > th

我还添加了强制实施直接父子关系的>。