วิธีเช็คข้อมูลในตารางด้วย Playwright

การตรวจสอบข้อมูลในตาราง (Table) เป็นหนึ่งในขั้นตอนสำคัญของการเขียน Test โดยเฉพาะกรณีที่มีข้อมูลหลายแถว การเขียนให้ “เจาะจงและไม่สับสน” จะช่วยลดปัญหา Test พังในอนาคตได้

1. เช็คแบบเจาะจงแถว (Row-based Assertion) — แนะนำ

วิธีนี้ช่วยให้มั่นใจว่า “ข้อมูลทั้งหมดอยู่ในแถวเดียวกัน”

const row = page.locator('#user-table tbody tr', {
  hasText: 'somchai@test.com'
});

await expect(row).toContainText('สมชาย ทดสอบ');
await expect(row).toContainText('Admin');

2. เช็คค่าจากตำแหน่งคอลัมน์ (Column-based)

เหมาะกับกรณีที่ต้องการตรวจสอบค่าที่แน่นอนในแต่ละช่อง

const row = page.locator('#user-table tbody tr', {
  hasText: 'somchai@test.com'
});

await expect(row.locator('td').nth(1)).toHaveText('สมชาย ทดสอบ');

3. เช็คว่าข้อมูลมีอยู่ในตาราง

await expect(page.locator('#user-table'))
  .toContainText('somchai@test.com');

วิธีนี้ง่าย แต่ไม่การันตีว่าข้อมูลอยู่ในแถวเดียวกัน

4. เช็คจำนวนแถว

ใช้ตรวจสอบว่ามีการเพิ่มข้อมูลจริง

const rowCount = await page.locator('#user-table tbody tr').count();
expect(rowCount).toBeGreaterThan(0);

5. รอให้ข้อมูลแสดงผล (ลดปัญหา Flaky Test)

await expect(
  page.locator('#user-table tbody tr', {
    hasText: 'somchai@test.com'
  })
).toBeVisible();

⚠️ ข้อควรระวัง

• หลีกเลี่ยงการใช้ selector กว้างเกินไป เช่น tr อย่างเดียว
• หลีกเลี่ยงข้อมูลซ้ำ เช่น “สมชาย” อย่างเดียว
• ควรใช้ข้อมูลแบบ Unique เช่น:

const email = `somchai_${Date.now()}@test.com`;

🔥 Best Practice

const email = `test_${Date.now()}@mail.com`;

const row = page.locator('#user-table tbody tr', {
  hasText: email
});
await expect(row).toBeVisible();
await expect(row).toContainText('ชื่อที่กรอก');
await expect(row).toContainText('Admin');

การเขียน Test ให้เจาะจงตั้งแต่ต้น จะช่วยให้ระบบมีความเสถียร และลดปัญหา Test พังในระยะยาวได้อย่างมาก