如何使用 Protractor 在 table 中定位单元格

Question

我想使用量角器在 table 上定位航班号 (11302)。然后点击插入同一行的按钮。

<kendo-grid-list role="presentation" class="k-grid-container ng-star-inserted">
  <!---->
  <div role="presentation" tabindex="-1" class="k-grid-content k-virtual-content">
    <div role="presentation" class="k-grid-table-wrap">
      <table role="presentation" class="k-grid-table">
        <colgroup kendogridcolgroup="" role="presentation">
          <col style="width: 40px;" class="ng-star-inserted">
          <col style="width: 90px;" class="ng-star-inserted">
          <col style="width: 120px;" class="ng-star-inserted">
          <col style="width: 120px;" class="ng-star-inserted">
          <col style="width: 50px;" class="ng-star-inserted">
          <col style="width: 100px;" class="ng-star-inserted">
        </colgroup>
        <tbody kendogridtablebody="" role="presentation">

          <tr kendogridlogicalrow="" data-kendo-grid-item-index="0" role="row" class="ng-star-inserted" style="">
            <td kendogridcell="" kendogridlogicalcell="" role="gridcell" aria-selected="false" data-kendo-grid-column-index="0" colspan="1" aria-colindex="1" class="ng-star-inserted">
              <button _ngcontent-wqs-c341="" kendobutton="" look="flat" icon="plus-circle" class="k-button-icon k-button k-primary k-flat ng-star-inserted" role="button" aria-disabled="false" aria-pressed="false" dir="ltr"><span _ngcontent-wqs-c341="" class="k-icon k-i-plus-circle ng-star-inserted" role="presentation"></span></button>
            </td>
            <td kendogridcell="" kendogridlogicalcell="" role="gridcell" aria-selected="false" data-kendo-grid-column-index="1" colspan="1" aria-colindex="2" class="ng-star-inserted">
              <a _ngcontent-wqs-c341="" href="/admin/manifest-detail/27513" class="ng-star-inserted"> 11302</a>
              <br _ngcontent-wqs-c341="" class="ng-star-inserted">
              <span _ngcontent-wqs-c341="" title="" class="ng-star-inserted">Open </span>
            </td>
            <td kendogridcell="" kendogridlogicalcell="" role="gridcell" aria-selected="false" data-kendo-grid-column-index="2" colspan="1" aria-colindex="3" class="ng-star-inserted">
              07:00 AM<br _ngcontent-wqs-c341="" class="ng-star-inserted"> Midland, MI
            </td>

我尝试使用by.css定位元素，如下所示

let temp2 = element(by.css(".k-grid-container .data-kendo-grid-item-index='0' .data-kendo-grid-column-index='1'")).element(by.tagName('a'));

到目前为止我找不到航班号所在的单元格，不能单独点击按钮。

Answer 1

我尝试了另一种方法，这是代码

element.all(by.tagName('tbody')).first().then(function(_table) {
  return _table.element(by.tagName('tr')).filter(function(_tableRow) {
    return _tableRow.element.all(by.tagName('td')).get(1).then(function(_tableCell) {
      let tmp = _tableCell.element(by.tagName('a'));
      return expect(tmp.getText()).toContain("11302");
    });
  }).first().element(by.tagName('button')).click();
});

我在页面上总共有 3 个表（'tbody'），包含航班号的单元格的索引始终为 1。但它失败了，报告是

Failed: protractor_1.element.all(...).first(...).then is not a function

Answer 2

在你的情况下，我可能只是 select 这样的行：

let row = element(by.css(".k-grid-container tr[data-kendo-grid-item-index='0']";

然后在 link 和按钮上执行您的操作，如下所示：

expect(row.element(by.tagName('a')).getText()).toContain("11302");
row.element(by.tagName('button')).click();

by.tagName() 函数 select 是带有标记名 a 的行的第一个子行，因此您不必指定要查找的 td。如果数据-kendo-grid-item-index 属性没有出现在最后一页，你也可以 select 按它们出现的顺序排列：

let row = element.all(by.css(".k-grid-container tr").first();

你的第一个方法

let temp2 = element(by.css(".k-grid-container .data-kendo-grid-item-index='0' .data-kendo-grid-column-index='1'")).element(by.tagName('a'));

可能没有用，因为您将 data-kendo-grid-item-index 作为 class 名称而不是属性查找。

如果您在 Angular 页面上进行测试，则无需手动等待测试使用 .then(...) 在您的页面上找到特定项目，因为它会自动与Angular.

如何使用 Protractor 在 table 中定位单元格

How can I locate the cell in a table using Protractor

html

javascript

protractor

angular