如何在量角器中使用相同的指令处理两个表

Question

我在同一页面中有两个具有相同指令的表，并且我只想对第二个表中的列执行一些操作。

请参阅下面的html以供参考。

<table role="presentation" id="gridview-1204-table" class="x-gridview-1204-table x-grid-table x-grid-with-col-lines x-grid-with-row-lines x-grid-table-selected-first x-grid-table-focused-first" border="0" cellspacing="0" cellpadding="0" style="width: 2274px;" tabindex="-1">
<colgroup>
<col class="x-grid-cell-gridcolumn-1124" style="width:24px">
</colgroup>
<colgroup>
<col class="x-grid-cell-gridcolumn-1027" style="width:150px">
</colgroup>
<tbody id="gridview-1204-body">
    <tr role="row" id="gridview-1204-record-1998058-null-null" data-boundview="gridview-1204" data-recordid="1998058-null-null" data-recordindex="0" class="x-grid-row x-grid-data-row x-grid-row-selected x-grid-row-focused" tabindex="-1">
        <td role="gridcell" class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1124 x-grid-cell-first x-unselectable " id="ext-gen1402">
            <div id="ext-gen1403" unselectable="on" class="x-grid-cell-inner " style="text-align:left;">
            <div class="x-grid-row-checker">&nbsp;</div>
        </div>
        </td>
        <td role="gridcell" class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1027 x-unselectable " id="ext-gen1404">
            <div id="ext-gen1405" unselectable="on" class="x-grid-cell-inner " style="text-align:left;">&nbsp;</div>
        </td>
    </tr>
</tbody>
</table>
<div>
.
.
.
.
.
<div>
<table role="presentation" id="gridview-1057-table" class="x-gridview-1057-table x-grid-table x-grid-with-col-lines x-grid-with-row-lines x-grid-table-selected-first x-grid-table-focused-first" border="0" cellspacing="0" cellpadding="0" style="width: 2274px;" tabindex="-1">
<colgroup>
<col class="x-grid-cell-gridcolumn-1125" style="width:24px">
</colgroup>
<colgroup>
<col class="x-grid-cell-gridcolumn-1028" style="width:150px">
</colgroup>
<tbody id="gridview-1057-body">
    <tr role="row" id="gridview-1057-record-1998058-null-null" data-boundview="gridview-1057" data-recordid="1998058-null-null" data-recordindex="0" class="x-grid-row x-grid-data-row x-grid-row-selected x-grid-row-focused" tabindex="-1">
        <td role="gridcell" class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1125 x-grid-cell-first x-unselectable " id="ext-gen1402">
            <div id="ext-gen1403" unselectable="on" class="x-grid-cell-inner " style="text-align:left;">
            <div class="x-grid-row-checker">&nbsp;</div>
        </div>
        </td>
        <td role="gridcell" class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1028 x-unselectable " id="ext-gen1404">
            <div id="ext-gen1405" unselectable="on" class="x-grid-cell-inner " style="text-align:left;">&nbsp;</div>
        </td>
        <td role="gridcell" class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1029 x-unselectable " id="ext-gen1406">
            <div id="ext-gen1407" unselectable="on" class="x-grid-cell-inner " style="text-align:left;">&nbsp;</div>
        </td>
    </tr>
</tbody>
</table>

说，我想单击第二个表的第三列。 使用下面的代码，我无法单击该元素。

let reqTable = element(by.xpath('(//tr[contains(@role,"row")][contains(@data-boundview,"gridview")])[2]'));
let reqcolumn = reqTable.element(by.xpath('//td[3]/div'));
reqcolumn.click();

甚至尝试过

element(by.xpath('(//tr[contains(@role,"row")][contains(@data-boundview,"gridview")])[2]/td[3]/div')).click();

但是没有运气。 它总是以错误结尾

[14:42:54] E/launcher - Process exited with error code 1

注意：我能够手动单击该元素，并且一旦页面加载，就可以在DOM中看到该元素存在和可见。 另外，ID是自动生成的。 因此，我将无法使用它们。

有人可以帮助解决这个问题吗？

Answer 1

首先，xpath指向表2，然后您可以使用任何策略移动到选定的行或列..您可以链接到任意数量的元素，例如，移动到table2.row2.col3

element(by.xpath(("//tbody[@id='gridview-1057-body']")[2])) 
.element(by.something('second table row/col selector'))
.click();

Answer 2

为了在特定表格中选择特定元素，我建议采用以下方法：

此代码选择第二个表，然后单击第1行的第2列

// get second table
let table = element.all(by.css('table tbody')).get(1);

// get rows
let rows = table.all(by.tagName('tr'));

// get row1
rows.get(0)

  // get column2 of row 1
  .all(by.tagName('td'))
  .get(1)

  // click underlying div.
  .element(by.tagName('div'))
  .click();

您应该使用xpath以外的其他定位器，因为：

• 这是所有方法中最慢，最脆弱的定位器策略

• 标记很容易更改，因此xpath定位器需要大量维护

• xpath表达式不可读并且很难调试

参考=> https://github.com/CarmenPopoviciu/protractor-styleguide#rule-06-never-use-xpath