如何使用量角器在表格中查找空单元格答案

【问题标题】：How to use Protractor to find a empty cell in a table如何使用量角器在表格中查找空单元格
【发布时间】：2019-11-28 16:14:08
【问题描述】：

如果字段是非空单元格，我可以使用 filter 或 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>

【问题讨论】：

标签： javascript html testing html-table protractor

【解决方案1】：

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

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

然后找到该行中的第二列：

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

【讨论】：