使用两个文本标准从表中选择特定行（剧作家，JS）

Question

我使用潜在的唯一标识符从表中选择特定行时遇到了麻烦。

下表

#events {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0 20px 0;
}

#events td,
#events th {
  border: 1px solid #ddd;
  padding: 8px;
}

#events tr:nth-child(even) {
  background-color: #f2f2f2;
}

#events tr:hover {
  background-color: #ddd;
}

#events th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

<div>
  <table id="events" class="table table-striped">
    <thead>
      <tr>
        <th data-qaid="checkbox"><input type="checkbox" /></th>
        <th data-qaid="event">Event</th>
        <th data-qaid="date">Date</th>
        <th data-qaid="location">Location</th>
        <th data-qaid="purchase-date">Ticket Purchased</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-qaid="checkbox"><input type="checkbox" /></td>
        <td data-qaid="event">Movie</td>
        <td data-qaid="date">06/06/2022</td>
        <td data-qaid="location">Frankfort</td>
        <td data-qaid="purchase-date">06/06/2022</td>
      </tr>
      <tr>
        <td data-qaid="checkbox"><input type="checkbox" /></td>
        <td data-qaid="event">Concert</td>
        <td data-qaid="date">06/06/2022</td>
        <td data-qaid="location">Frankfort</td>
        <td data-qaid="purchase-date">06/06/2022</td>
      </tr>
      <tr>
        <td data-qaid="checkbox"><input type="checkbox" /></td>
        <td data-qaid="event">Park</td>
        <td data-qaid="date">06/10/2022</td>
        <td data-qaid="location">Memphis</td>
        <td data-qaid="purchase-date">06/06/2022</td>
      </tr>
      <tr>
        <td data-qaid="checkbox"><input type="checkbox" /></td>
        <td data-qaid="event">Concert</td>
        <td data-qaid="date">06/10/2022</td>
        <td data-qaid="location">Memphis</td>
        <td data-qaid="purchase-date">06/06/2022</td>
      </tr>
      <tr>
        <td data-qaid="checkbox"><input type="checkbox" /></td>
        <td data-qaid="event">Sport</td>
        <td data-qaid="date">06/12/2022</td>
        <td data-qaid="location">Atlanta</td>
        <td data-qaid="purchase-date">06/06/2022</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="change-location">
  <label>New Location</label>
  <input type="text" />
  <button>Update Selected</button>
</div>

使用剧作家定位器，我希望能够在06/10/2022选择音乐会的行，然后能够单击该行上的复选框。

我已经可以使用单个列定位器来完成此操作，并选择遇到的第一行（使用.nth（＃））。

const child_locator = page.locator('[data-qaid="Event"]', { hasText: "Concert" }).nth(0);
const row_locator = page.locator("#events tbody tr", { has: child_locator });
row_locator.locator('[data-qaid="checkbox"] input').setChecked();

但这不起作用，因为我所需的行不是第一个遇到的行结果。

我想拥有一些更强大 /动态的东西。而且我很难弄清楚如何做到这一点。我尝试了各种方法，例如使用最终的定位器来限制随后的搜索。我认为这是我对剧作家定位器尽可能完整的理解。我正在研究文档，但尚未弄清楚这一点。

我认为我唯一真正的解决方案可能是获取整个行的文字，然后就此提出正式差异。但是，如果搜索文本出现在行的另一列中，则可能会有误报问题。例如，在给定的示例中，如果我想选择“ 06/06/2022”的演唱会，我的正则是与日期“ 06/10/2022”的音乐会，因为购买的票证也将与“ 06”匹配。 /06/2022“

Answer 1

好吧，由于您没有任何可以绑定到的明确选择器，因此唯一的选择是减少：

1. 您收集所有tr s。
2. 您从其中选择具有TD的 s s concert
3. 从中选择tr s > td s出现在06/10/2022
4. 您单击收集的元素（S）

Answer 2

这是我想到的：

/**
 * options {{page: Page, search_array: [{column_index: number, needle: string}], tr_selector: Locator}}
 */
static async getRowByValues(options) {
   // get the table data
   const table_data = await options.page.locator(table_selector).allInnerTexts();
   let row_index = table_data.findIndex( (row_text) => {
      const text_array = row_text.split("\t");
      // loop through the search_array data and match to text_array
      for (const col_data of options.search_array) {
         // fail immediately if false, continue if true.
         if (text_array[col_data.column_index] !== col_data.needle) {
            return false;
         }
      }
      return true;
   });
   if (row_index >= 0) {
      return options.page.locator(tr_selector).nth(row_index);
   } else {
      return null;
   }
}

要使用它，可以做：

const desired_row = await getRowByValues({
   page: page,
   search_array: [
     {
       column_index: 1,
       needle: "Concert"
     },
     {
       column_index: 2,
       needle: "06/10/2022"
     }
   ],
   tr_selector: page.locator('#events tbody tr')
});

if (desired_row) {
   await desired_row.locator('[data-qaid="checkbox"] input').setChecked(true);
   await expect(desired_row.locator('[data-qaid="checkbox"] input')).toBeChecked();
}

Answer 3

最简单的方法是将行用作咏叹调角色

page.getByRole('row')

并通过单元格的文本进行过滤

.filter({ hasText: 'Concert' })

：

page.getByRole('row').filter({ hasText: 'Concert' })

fnely，找到复选框和链条，

page.getByRole('row').filter({ hasText: 'Concert' }).getByRole('checkbox')

请参阅DOCS
https：//playwright.dev/dev/docs/ Next/api/class-framelocator＃frame-locator-by-by-lole