import { test, expect, Page } from '@playwright/test';
import { strictEqual } from 'assert';

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
});

test.afterAll(async () => {
  if (page !== undefined) {
    await page.close();
  }
});
test('Login', async () => {
  // Login
  await page.goto('http://192.168.1.90:20001/');
  await expect(page).toHaveTitle(/^Sign in to /);
  await page.fill("input[name='username']", 'admin');
  await page.fill("input[name='password']", '1234');
  await page.click('id=kc-login');
  await page.waitForTimeout(2000);
  //   await page.click('id=acceptBtn');
});

//---------------------------------Tab ทั้งหมด----------------------------------------

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลลำดับ', async () => {
  try {
    // คลิกเมนูเพื่อเข้าหน้าจัดการบุคลากร
    await page.click('id=menu-icon-personnel-management');

    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_0');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_0');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_0'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลชื่อ-สกุล', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_1');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_1');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_1'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลประเภท', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_2');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_2');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_2'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลเบอร์โทรศัพท์', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_3');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_3');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_3'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลอายุ', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_4');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_4');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_4'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลอีเมล', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_5');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_5');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_5'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลสิทธิ์ผู้ใช้งาน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_6');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_6');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_6'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
  await page.waitForTimeout(2000);
});

//---------------------------------Tab พนักงาน----------------------------------------

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลลำดับ - พนักงาน', async () => {
  try {
    // คลิก Tab พนักงาน
    await page.click("(//div[@role='tab'])[2]");

    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_0');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_0');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_0'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลชื่อ-สกุล - พนักงาน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_1');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_1');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_1'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลประเภท - พนักงาน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_2');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_2');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_2'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลเบอร์โทรศัพท์ - พนักงาน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_3');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_3');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_3'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลอายุ - พนักงาน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_4');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_4');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_4'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลอีเมล - พนักงาน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_5');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_5');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_5'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลสิทธิ์ผู้ใช้งาน - พนักงาน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_6');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_6');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_6'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
  await page.waitForTimeout(2000);
});

//---------------------------------Tab พนักงานส่งเอกสาร----------------------------------------

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลลำดับ - พนักงานส่งเอกสาร', async () => {
  try {
    // คลิก Tab พนักงาน
    await page.click("(//div[@role='tab'])[3]");

    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_0');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_0');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_0'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลชื่อ-สกุล - พนักงานส่งเอกสาร', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_1');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_1');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_1'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลประเภท - พนักงานส่งเอกสาร', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_2');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_2');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_2'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลเบอร์โทรศัพท์ - พนักงานส่งเอกสาร', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_3');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_3');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_3'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลอายุ - พนักงานส่งเอกสาร', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_4');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_4');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_4'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลอีเมล - พนักงานส่งเอกสาร', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_5');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_5');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_5'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลสิทธิ์ผู้ใช้งาน - พนักงานส่งเอกสาร', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_6');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_6');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_6'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
  await page.waitForTimeout(2000);
});

//---------------------------------Tab ตัวแทน----------------------------------------

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลลำดับ - ตัวแทน', async () => {
  try {
    // คลิก Tab พนักงาน
    await page.click("(//div[@role='tab'])[4]");

    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_0');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_0');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_0'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลชื่อ-สกุล - ตัวแทน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_1');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_1');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_1'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลประเภท - ตัวแทน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_2');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_2');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_2'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลเบอร์โทรศัพท์ - ตัวแทน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_3');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_3');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_3'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลอายุ - ตัวแทน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_4');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_4');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_4'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลอีเมล - ตัวแทน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_5');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_5');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_5'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลสิทธิ์ผู้ใช้งาน - ตัวแทน', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_6');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_6');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_6'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
  await page.waitForTimeout(2000);
});

//---------------------------------Tab เอเจนซี่----------------------------------------

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลลำดับ - เอเจนซี่', async () => {
  try {
    // คลิก Tab พนักงาน
    await page.click("(//div[@role='tab'])[5]");

    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_0');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_0');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_0'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลชื่อ-สกุล - เอเจนซี่', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_1');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_1');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_1'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลประเภท - เอเจนซี่', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_2');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_2');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_2'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลเบอร์โทรศัพท์ - เอเจนซี่', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_3');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_3');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_3'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลอายุ - เอเจนซี่', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_4');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_4');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_4'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลอีเมล - เอเจนซี่', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_5');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_5');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_5'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
});

test('ตรวจสอบการแสดงผลฟิลด์แสดงผลสิทธิ์ผู้ใช้งาน - เอเจนซี่', async () => {
  try {
    // คลิกเพื่อเปิด dropdown
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด

    // คลิกเพื่อปิดคอลัมน์ที่ 1
    await page.click('id=select-field_6');
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
    const column1 = page.locator('id=select-field_6');
    const column1Cells = page.locator(
      "//th[normalize-space(text())='ลำดับที่']",
    );

    const isColumn1Hidden = await column1.evaluate(
      (el) => window.getComputedStyle(el).display === 'none',
    );
    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค

    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค

    expect(isColumn1Hidden).toBe(false);
    expect(areCellsHidden).toBe(true);

    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
    await page.keyboard.press('Escape');
    await page.click("(//input[@id='select-field'])[1]");
    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
    await page.click('id=select-field_6'); // คลิกเพื่อเปิดคอลัมน์
    await page.waitForTimeout(1000); // รอให้ UI อัปเดต

    // ตรวจสอบว่าคอลัมน์แสดงอยู่
    const isColumn1Visible = await column1.evaluate(
      (el) => window.getComputedStyle(el).display !== 'none',
    );
    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค

    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
    );
    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค

    expect(isColumn1Visible).toBe(true);
    expect(areCellsVisible).toBe(true);

    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
    throw error;
  }
  await page.keyboard.press('Escape');
  await page.waitForTimeout(2000);
});
