typescript验证表格数据，包括添加和列表数据

import { chromium } from 'playwright';

 

(async () => {

  // 启动浏览器和新建页面

  const browser = await chromium.launch({ headless: false });

  const context = await browser.newContext();

  const page = await context.newPage();

 

  // 跳转到表格页面

  await page.goto('https://example.com/table');

 

// 等待表格数据加载完成

  await page.waitForSelector('div.table-row');

 

  // 定义需要添加和查找的数据

  const data1 = {

    date: '2022-05-07',

    name: 'Alice',

    age: '23',

  };

  const data2 = {

    date: '2022-05-08',

    name: 'Bob',

    age: '25',

  };

 

// 定义正则表达式，用于验证日期格式

  const dateRegex = /\d{4}-\d{2}-\d{2}/;

 

  // 点击添加按钮，填写第一条数据并保存

  await page.click('div.add-button');

  await page.waitForSelector('div.dialog');

  await page.fill('div.dialog input.date-input', data1.date);

  await page.fill('div.dialog input.name-input', data1.name);

  await page.fill('div.dialog input.age-input', data1.age);

  await page.click('div.dialog button.save-button');

  await page.waitForSelector('div.dialog', { state: 'hidden' });

 

 

  // 点击添加按钮，填写第二条数据并保存

  await page.click('div.add-button');

  await page.waitForSelector('div.dialog');

  await page.fill('div.dialog input.date-input', data2.date);

  await page.fill('div.dialog input.name-input', data2.name);

  await page.fill('div.dialog input.age-input', data2.age);

  await page.click('div.dialog button.save-button');

  await page.waitForSelector('div.dialog', { state: 'hidden' });

 

 

// 获取所有表格行，遍历每个表格行并查找对应的数据

  const rows = await page.$$('div.table-row');

  let foundDataCount = 0;

 

  for (const row of rows) {

    // 获取日期、姓名、年龄单元格

    const dateCell = await row.$('div:nth-child(1)');

    const nameCell = await row.$('div:nth-child(2)');

    const ageCell = await row.$('div:nth-child(3)');

 

// 如果单元格都存在，获取单元格的文本内容并判断是否为需要查找的数据

    if (dateCell && nameCell && ageCell) {

      const [date, name, age] = await Promise.all([

        dateCell.textContent(),

        nameCell.textContent(),

        ageCell.textContent(),

      ]);

 

      if (

        dateRegex.test(date) &&

        ((name === data1.name && age === data1.age) ||

          (name === data2.name && age === data2.age))

      ) {

        foundDataCount++;

      }

    }

  }

 

 

// 验证查找到的数据数量是否为2

  expect(foundDataCount).toBe(2);

 

  // 关闭浏览器

  await browser.close();

})();