javascript - 如何使用 Protractor 查找表格中的空单元格

Question

如果该字段是非空单元格，我可以使用过滤器或 by.cssContainingText 来查找 td。但是，如果 td 为空怎么办？

例如，下表有两个完全相同的行。每行有 5 个 p-editable-column。但是所有的列都是空的，那么如何选择特定的列呢？例如，我想选择第一行的第二个 p-editable-column。

<tbody class="p-datatable-tbody">
    <tr class="p-datatable-row blackFont" draggable="false" style="height: 28px;">
        <td class="" style="min-width: 2.6em; width: 2.6em; padding: 0px; border-spacing: 0px;"></td>
        <td class="" style="min-width: 2.8em; width: 2.8em; padding: 0px; border-spacing: 0px;"><i aria-hidden="true"
                class="file outline vertically flipped icon link noteButton"></i></td>
        <td class="p-editable-column" style="width: 5em; white-space: pre-line;"><a tabindex="0"
                class="p-cell-editor-key-helper p-hidden-accessible"><span></span></a></td>
        <td class="p-editable-column" style="width: 5em; white-space: pre-line;"><a tabindex="0"
                class="p-cell-editor-key-helper p-hidden-accessible"><span></span></a></td>
        <td class="p-editable-column" style="width: 5em; white-space: pre-line;"><a tabindex="0"
                class="p-cell-editor-key-helper p-hidden-accessible"><span></span></a></td>
        <td class="p-editable-column" style="width: 5em; white-space: pre-line;"><a tabindex="0"
                class="p-cell-editor-key-helper p-hidden-accessible"><span></span></a></td>
        <td class="p-editable-column" style="width: 5em; white-space: pre-line;"><a tabindex="0"
                class="p-cell-editor-key-helper p-hidden-accessible"><span></span></a></td>
    </tr>
    <tr class="p-datatable-row blackFont" draggable="false" style="height: 28px;">
        <td class="" style="min-width: 2.6em; width: 2.6em; padding: 0px; border-spacing: 0px;"></td>
        <td class="" style="min-width: 2.8em; width: 2.8em; padding: 0px; border-spacing: 0px;"><i aria-hidden="true"
                class="file outline vertically flipped icon link noteButton"></i></td>
        <td class="p-editable-column" style="width: 5em; white-space: pre-line;"><a tabindex="0"
                class="p-cell-editor-key-helper p-hidden-accessible"><span></span></a></td>
        <td class="p-editable-column" style="width: 5em; white-space: pre-line;"><a tabindex="0"
                class="p-cell-editor-key-helper p-hidden-accessible"><span></span></a></td>
        <td class="p-editable-column" style="width: 5em; white-space: pre-line;"><a tabindex="0"
                class="p-cell-editor-key-helper p-hidden-accessible"><span></span></a></td>
        <td class="p-editable-column" style="width: 5em; white-space: pre-line;"><a tabindex="0"
                class="p-cell-editor-key-helper p-hidden-accessible"><span></span></a></td>
        <td class="p-editable-column" style="width: 5em; white-space: pre-line;"><a tabindex="0"
                class="p-cell-editor-key-helper p-hidden-accessible"><span></span></a></td>
    </tr>
</tbody>

Answer 1

您可以通过 css 定位它们并指示索引。例如，如果您想要第二个 p-editable-column 列，您首先必须找到第一行:

const firstRow = element.all(by.css('.p-datatable-row.blackFont')).get(0);

然后找到该行中的第 2 列:

const secondCol = firstRow.all(by.css('.p-editable-column')).get(1);