使用剧作家获取所有TH标签和测试值

Question

我正在使用剧作家测试页面，并且有下表。

我希望能够测试所有列的列，计数和值按正确的顺序，即产品，价格等。

我该怎么做？

这是我到目前为止尝试过的方法，尽管过度

test('the table headings are in place and in the correct order', async ({
      page,
    }) => {
      log('looking for the table headings...');

      const tableThead = page.$$('table.subscriptions > thead > tr > th');

      const allThs = await page.$$eval(
        'table.subscriptions > thead > tr',
        (ths) => {
          return ths.map((th) => {
            const product = th.querySelector('th:nth-child(1)');
            const price = th.querySelector('th:nth-child(2)');
            const term = th.querySelector('th:nth-child(3)');
            const renewalDate = th.querySelector('th:nth-child(4)');
            const renewalAmount = th.querySelector('th:nth-child(5)');
            const renewalType = th.querySelector('th:nth-child(6)');
            const paymentType = th.querySelector('th:nth-child(6)');
            const address = th.querySelector('th:nth-child(7)');
            return {
              product,
              price,
              term,
              renewalDate,
              renewalAmount,
              renewalType,
              paymentType,
              address,
            };
          });
        }
      );

      log('taking a screenshot...');

      await tableThead.screenshot({
        path: 'screenshots/subscriptions/table/table-head.png',
      });
    });

=========

edit 1：

这是我尝试Alapan Das的答案后得到的：

Answer 1

我认为在这种情况下，您可以使用 loacators列表，然后比较这样的内部文本：

const expectedText = [
  product,
  price,
  term,
  renewalDate,
  renewalAmount,
  renewalType,
  paymentType,
  address,
]
const tableHeader = page.locator('th[role="columnheader"]')
const tableHeaderTexts = await tableHeader.allTextContents()
await tableHeaderTexts.forEach((text, index) => {
  expect(text).toEqual(expectedText[index])
})