操纵er者在表行中搜索字符串

Question

我有一个这样的表JS Fiddle Here

<table class="x-grid-table x-grid-table-resizer" border="1" >
  <tbody>
    <tr class="x-grid-header-row">
      <th class="x-grid-col-resizer-h1" style="width: 0px; height: 0px;"></th>
      <th class="x-grid-col-resizer-h2" style="width: 0px; height: 0px;"></th>
      <th class="x-grid-col-resizer-h3" style="width: 0px; height: 0px;"></th>
      <th class="x-grid-col-resizer-h4" style="width: 0px; height: 0px;"></th>
      <th class="x-grid-col-resizer-h5" style="width: 0px; height: 0px;"></th>
      <th class="x-grid-col-resizer-h6" style="width: 0px; height: 0px;"></th>
      <th class="x-grid-col-resizer-h7" style="width: 0px; height: 0px;"></th>
      <th class="x-grid-col-resizer-h8" style="width: 0px; height: 0px;"></th>
      <th class="x-grid-col-resizer-h9" style="width: 0px; height: 0px;"></th>
    </tr>
    <tr class="x-grid-row x-grid-row-ticket-priority">
      <td class="justify-content-left x-grid-cell x-grid-cell-h1 ">
        <div class="x-grid-cell-inner " style="; text-align: left;">1</div>
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h2   ">
        <div class="x-grid-cell-inner " style="; text-align: left;">Fri Nov 30 2018 19:52:48 GMT+0100 (Central European Standard Time)</div>
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h3   ">
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h4   ">
        <div class="x-grid-cell-inner " style="; text-align: left;">false</div>
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h5   ">
        <div class="x-grid-cell-inner " style="; text-align: left;" id="ext-gen1193"><a href="https://example.com/account/user/profile" class="">blue@example.com</a></div>
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h6   ">
        <div class="x-grid-cell-inner " style="; text-align: left;"> blue@example.com</div>
      </td>
      <td class="justify-content-center x-grid-cell x-grid-cell-h7   ">
        <div class="x-grid-cell-inner " style="; text-align: center;"><a href="javascript:void(0);" id="override_lnk_ext-gen1171">None</a></div>
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h8   ">
        <div class="x-grid-cell-inner " style="; text-align: left;"><a href="javascript:void(0);" id="override_lnk_ext-gen1172">View</a></div>
      </td>
      <td class="x-row-el-ignore actionsColumn justify-content-center x-grid-cell x-grid-cell-h9   x-grid-cell-last">
        <div class="x-grid-cell-inner " style="; text-align: center;">
          <div id="splitbutton-user7415249" class="x-btn x-row-el-ignore x-row-el-ignore actionsSplitBtn x-btn-default-small x-icon-text-right x-btn-icon-text-right x-btn-default-small-icon-text-right"><em id="splitbutton-user7415249-btnWrap" class="x-btn-split x-btn-split-right"><button id="splitbutton-user7415249-btnEl" type="button" hidefocus="true" role="button" autocomplete="off" class="x-btn-center x-row-el-ignore" aria-haspopup="true"><span id="splitbutton-user7415249-btnInnerEl" class="x-btn-inner" style="margin:-13px -18px -13px -18px">Actions</span><span id="splitbutton-user7415249-btnIconEl" class="x-btn-icon fa fa-angle-down">&nbsp;</span></button></em></div>
          <div id="ext-gen1173"></div>
        </div>
      </td>
    </tr>
    <tr class="x-grid-row x-grid-row-ticket-priority">
      <td class="justify-content-left x-grid-cell x-grid-cell-h1 ">
        <div class="x-grid-cell-inner " style="; text-align: left;">2</div>
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h2   ">
        <div class="x-grid-cell-inner " style="; text-align: left;">Fri Nov 30 2018 19:52:48 GMT+0100 (Central European Standard Time)</div>
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h3   ">
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h4   ">
        <div class="x-grid-cell-inner " style="; text-align: left;">false</div>
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h5   ">
        <div class="x-grid-cell-inner " style="; text-align: left;" id="ext-gen1193"><a href="https://example.com/account/user/profile" class="">red@test.com</a></div>
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h6   ">
        <div class="x-grid-cell-inner " style="; text-align: left;">red@test.com</div>
      </td>
      <td class="justify-content-center x-grid-cell x-grid-cell-h7   ">
        <div class="x-grid-cell-inner " style="; text-align: center;"><a href="javascript:void(0);" id="override_lnk_ext-gen1171">None</a></div>
      </td>
      <td class="justify-content-left x-grid-cell x-grid-cell-h8   ">
        <div class="x-grid-cell-inner " style="; text-align: left;"><a href="javascript:void(0);" id="override_lnk_ext-gen1172">Generate</a></div>
      </td>
      <td class="x-row-el-ignore actionsColumn justify-content-center x-grid-cell x-grid-cell-h9   x-grid-cell-last">
        <div class="x-grid-cell-inner " style="; text-align: center;">
          <div id="splitbutton-user7415249" class="x-btn x-row-el-ignore x-row-el-ignore actionsSplitBtn x-btn-default-small x-icon-text-right x-btn-icon-text-right x-btn-default-small-icon-text-right"><em id="splitbutton-user7415249-btnWrap" class="x-btn-split x-btn-split-right"><button id="splitbutton-user7415249-btnEl" type="button" hidefocus="true" role="button" autocomplete="off" class="x-btn-center x-row-el-ignore" aria-haspopup="true"><span id="splitbutton-user7415249-btnInnerEl" class="x-btn-inner" style="margin:-13px -18px -13px -18px">Actions</span><span id="splitbutton-user7415249-btnIconEl" class="x-btn-icon fa fa-angle-down">&nbsp;</span></button></em></div>
          <div id="ext-gen1173"></div>
        </div>
      </td>
    </tr>


  </tbody>
</table>

每行的第5列包含一封电子邮件，而在第8列中始终有一个按钮，其中可以包含文本View或Generate。

所以我有一封电子邮件，例如red@test.com，我想检查它是否在第五列的任何行中存在，如果存在，我想在该行中获取按钮的文本在该行的第8列上，然后单击它。

我正在使用打字稿和Puppeteer。

我想通过获取所有表数据然后基于第5列值过滤表数据来解决此问题。

const data = await this.page.$$eval(
  'table tr td', 
  tds => tds.map((td) => { 
  return td.innerHTML; }));

在const data上，我正在获取所有表数据，但是以这种方式很难对其进行过滤。

我尝试使用查询选择器let email定位电子邮件，但没有任何数据？

let email = await this.page.evaluate( () => Array.from( 
   document.querySelectorAll( 'tbody > .x-grid-row  > td:nth-child(5)' ), element => { 
  if(element.textContent.trim() == 'red@test.com') { }} ) );

有人可以帮助我实现这一目标吗？