如何使用量角器在 table 中查找空单元格

Question

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

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

<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);

如何使用量角器在 table 中查找空单元格

How to use Protractor to find a empty cell in a table

html

javascript

testing

html-table

protractor