Getting all th tags and testing values with playwright-CodePudding

I'm using playwright to test a page, and I have the following table.

I want to be able to test all the thead th columns, the count and values are in the right order, i.e. Product, Price etc.

How would I go about doing this?

Here is what I've tried so far, although overkill

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',
      });
    });

CodePudding user response：

With Playwright 1.21 there is a new method was introduced called the :scope. You can read more about it here. You can do something like this:

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

CodePudding user response：

You can create below method to do such operations

control = "//thead[@role='rowgroup']//th


public async verifyListForMultipleValues(controlLocator: 
    WebControl, listOfValueToVerify: string[], 
    waitTillElementIsDisplayed = true) {
            if (waitTillElementIsDisplayed) {
                await this.waitTillElementIsPresent(control);
            }
        const list = await this.page.locator(controlLocator).elementHandles();
        for (let i = 0; i < listOfValueToVerify.length; i  ) {
            await list[i].waitForElementState("visible");
            await list[i].innerText().then(function (value) {
                if (value.trim().includes(listOfValueToVerify[i])) {
                    logVerification("VERIFICATION: PASSED. Expected: '"   listOfValueToVerify[i]   "' Actual: "   value);
                } else {
                    logVerification("VERIFICATION: FAILED. Expected: '"   listOfValueToVerify[i]   "' Actual: "   value);

                }
                expect(value.trim()).toContain(listOfValueToVerify[i]);
            });
        }
    }