Playwright Cheat Sheet: ฟังก์ชันที่ใช้บ่อย วิธีใช้ และตัวอย่างผลลัพธ์

await page.getByRole('button', { name: 'Login' }).click();
await page.getByRole('heading', { name: 'Products' });
await page.getByRole('link', { name: /twitter/i });   // regex ได้
await page.getByRole('button', { name: 'Add to cart', exact: true });

await page.getByText('Sauce Labs Backpack').click();
await page.getByText('Swag Labs', { exact: true });
await expect(page.getByText(/thank you/i)).toBeVisible();

await page.getByLabel('Email').fill('a@b.com');

await page.getByPlaceholder('Username').fill('standard_user');
await page.getByPlaceholder('Password').fill('secret_sauce');

// playwright.config.ts
use: { testIdAttribute: 'data-test' }

// ในเทสต์
await page.getByTestId('login-button').click();

page.locator('[data-test="username"]');
page.locator('.inventory_item');
page.locator('xpath=//button[text()="Login"]');
page.locator('div.item >> text=Backpack');

await page.getByAltText('Sauce Labs Backpack').click();   // img alt
await page.getByTitle('Close').click();                    // title attr

const items = page.locator('.inventory_item');
await items.first().click();
await items.last().click();
await items.nth(2).click();   // index เริ่มที่ 0

const backpack = page.locator('.inventory_item').filter({ hasText: 'Backpack' });
await backpack.getByRole('button', { name: 'Add to cart' }).click();

const withButton = page.locator('.inventory_item').filter({
  has: page.getByRole('button', { name: 'Remove' }),
});

// ค้นหาต่อเนื่องภายใน element แม่
await page.locator('.cart_item').getByText('Backpack');

// ต้องตรงทั้งสองเงื่อนไข
page.getByRole('button').and(page.getByTitle('Subscribe'));

// อย่างใดอย่างหนึ่ง (เช่น popup ที่อาจขึ้นหรือไม่ขึ้น)
const dialog = page.getByText('Accept cookies').or(page.getByText('ยอมรับคุกกี้'));
await dialog.click();

const n = await page.locator('.inventory_item').count();
console.log(n);

for (const item of await page.locator('.inventory_item').all()) {
  console.log(await item.innerText());
}

6
Sauce Labs Backpack
$29.99
ADD TO CART
...

await page.goto('https://www.saucedemo.com');
await page.goto('/inventory.html');                 // ใช้ baseURL จาก config
await page.goto(url, { waitUntil: 'domcontentloaded' });

await page.reload();
await page.goBack();
await page.goForward();

console.log(page.url());          // sync ไม่ต้อง await
console.log(await page.title());

https://www.saucedemo.com/inventory.html
Swag Labs

await page.getByTestId('login-button').click();
await page.waitForURL('**/inventory.html');
await page.waitForURL(/checkout-complete/);

await page.getByTestId('login-button').click();
await locator.click({ button: 'right' });            // คลิกขวา
await locator.click({ modifiers: ['Shift'] });       // กด Shift ค้าง
await locator.click({ position: { x: 10, y: 10 } });
await locator.click({ force: true });                // ข้ามการตรวจ actionability
await locator.click({ clickCount: 2 });
await locator.click({ timeout: 5000 });

await page.getByTestId('username').fill('standard_user');
await page.getByTestId('password').fill('secret_sauce');

await page.getByTestId('username').clear();

await page.getByPlaceholder('Search').pressSequentially('shoes', { delay: 100 });

await page.getByTestId('password').press('Enter');
await locator.press('Control+A');
await locator.press('ArrowDown');
await locator.press('Tab');

await page.getByLabel('Remember me').check();
await page.getByLabel('Remember me').uncheck();
await page.getByLabel('Subscribe').setChecked(true);

await page.locator('[data-test="product-sort-container"]').selectOption('hilo');
await select.selectOption({ label: 'Price (high to low)' });
await select.selectOption({ index: 2 });
await select.selectOption(['red', 'blue']);   // multi-select

await page.getByText('Menu').hover();
await page.getByLabel('Email').focus();

await locator.dblclick();
await locator.tap();     // สำหรับ touch device / mobile emulation

await page.locator('input[type=file]').setInputFiles('tests/data/photo.png');
await page.locator('input[type=file]').setInputFiles(['a.png', 'b.png']);
await page.locator('input[type=file]').setInputFiles([]);   // ล้างไฟล์

await page.locator('#item').dragTo(page.locator('#dropzone'));

await page.locator('.footer').scrollIntoViewIfNeeded();

await expect(locator).toBeVisible();
await expect(locator).toBeHidden();
await expect(locator).toBeEnabled();
await expect(locator).toBeDisabled();
await expect(locator).toBeChecked();
await expect(locator).toBeEditable();
await expect(locator).toBeFocused();
await expect(locator).toBeEmpty();
await expect(locator).toBeAttached();

await expect(locator).toHaveText('Thank you for your order!');   // ตรงทั้งหมด
await expect(locator).toContainText('Thank you');                // มีบางส่วน
await expect(locator).toHaveText(/thank you/i);                  // regex
await expect(items).toHaveText(['Backpack', 'Bike Light']);      // หลาย element ตามลำดับ

await expect(input).toHaveValue('standard_user');
await expect(link).toHaveAttribute('href', '/inventory.html');
await expect(el).toHaveClass(/active/);
await expect(el).toHaveCSS('color', 'rgb(255, 0, 0)');
await expect(el).toHaveId('main');

await expect(page.locator('.inventory_item')).toHaveCount(6);
await expect(page.locator('.error')).toHaveCount(0);

await expect(page).toHaveURL('https://www.saucedemo.com/checkout-complete.html');
await expect(page).toHaveURL(/inventory/);
await expect(page).toHaveTitle('Swag Labs');

expect(29.99).toBeGreaterThan(9.99);
expect(prices[0]).toBeGreaterThanOrEqual(prices[1]);
expect(total).toBeCloseTo(32.39, 2);      // ทศนิยม
expect(names).toContain('Sauce Labs Backpack');
expect(names).toEqual(['A', 'B']);
expect(obj).toMatchObject({ id: 1 });
expect(text).toMatch(/[$][0-9]+/);
expect(list).toHaveLength(2);
expect(value).toBeTruthy();

await expect(locator).not.toBeVisible();           // กลับเงื่อนไข

await expect.soft(locator).toHaveText('A');        // fail แล้วเทสต์ยังรันต่อ
await expect.soft(locator2).toHaveText('B');

await expect.poll(async () => {                    // poll ค่า async ซ้ำจนผ่าน
  const res = await request.get('/api/status');
  return (await res.json()).state;
}, { timeout: 10000 }).toBe('done');

await expect(locator, 'ปุ่ม Login ต้องเห็น').toBeVisible({ timeout: 10000 });

Error: expect(locator).toHaveText(expected)

Locator: locator('[data-test="complete-header"]')
Expected string: "Thank you for your order!"
Received string: ""
Timeout: 5000ms

await expect(page).toHaveScreenshot('home.png');
await expect(locator).toHaveScreenshot();
await expect(page).toHaveScreenshot({ maxDiffPixels: 100, fullPage: true });
expect(await page.content()).toMatchSnapshot('page.html');
await expect(locator).toMatchAriaSnapshot();

const name = await page.locator('.inventory_item_name').first().textContent();
const price = await page.locator('.inventory_item_price').first().innerText();
console.log(name, price);

Sauce Labs Backpack $29.99

const prices = await page.locator('.inventory_item_price').allTextContents();
console.log(prices);

[ '$29.99', '$9.99', '$15.99', '$49.99', '$7.99', '$15.99' ]

const v = await page.getByTestId('username').inputValue();
console.log(v);   // standard_user

const href = await page.locator('.shopping_cart_link').getAttribute('href');
console.log(href);   // /cart.html

if (await page.getByText('Accept').isVisible()) {
  await page.getByText('Accept').click();
}
console.log(await checkbox.isChecked());   // false

const color = await locator.evaluate(el => getComputedStyle(el).color);

const names = await page.locator('.inventory_item_name')
  .evaluateAll(els => els.map(e => e.textContent));

const height = await page.evaluate(() => document.body.scrollHeight);

console.log(await locator.boundingBox());
// { x: 20, y: 140, width: 240, height: 360 }

const html = await page.content();   // HTML ทั้งหน้าเป็น string

const toNumber = (t: string) => parseFloat(t.replace(/[^0-9.]/g, ''));
const prices = (await page.locator('.inventory_item_price').allTextContents()).map(toNumber);
console.log(Math.max(...prices), Math.min(...prices));   // 49.99 7.99

await page.locator('.spinner').waitFor({ state: 'hidden' });
await page.locator('.result').waitFor({ state: 'visible', timeout: 10000 });

await page.waitForLoadState('networkidle');
await page.waitForLoadState('domcontentloaded');

const [response] = await Promise.all([
  page.waitForResponse(r => r.url().includes('/api/orders') && r.status() === 200),
  page.getByText('Submit').click(),
]);
console.log(response.status(), await response.json());

200 { id: 101, status: 'created' }

await page.waitForFunction(() => document.querySelectorAll('.item').length > 5);

await page.waitForTimeout(2000);

const popup = await Promise.all([
  page.waitForEvent('popup'),
  page.getByText('Open').click(),
]).then(([p]) => p);

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

test.describe('Checkout flow', () => {
  test('login สำเร็จ', async ({ page }) => {
    await page.goto('https://www.saucedemo.com');
    // ...
  });

  test('login ผิดพลาด', async ({ page }) => {
    // ...
  });
});

test.beforeAll(async () => { /* รันครั้งเดียวก่อนทุกเทสต์ */ });
test.beforeEach(async ({ page }) => {
  await page.goto('https://www.saucedemo.com');
});
test.afterEach(async ({ page }) => { /* เคลียร์ข้อมูล */ });
test.afterAll(async () => { /* ปิดการเชื่อมต่อ */ });

await test.step('Login', async () => {
  await page.getByTestId('username').fill('standard_user');
  await page.getByTestId('login-button').click();
});
await test.step('Sort by price', async () => {
  await page.getByTestId('product-sort-container').selectOption('hilo');
});

test.skip('ยังไม่พร้อม', async () => {});
test.only('รันเฉพาะอันนี้', async () => {});
test.fixme('บั๊กที่รู้อยู่แล้ว', async () => {});
test.slow();                                   // เพิ่ม timeout 3 เท่า
test.skip(browserName === 'webkit', 'ไม่รองรับ');
test('smoke', { tag: '@smoke' }, async ({ page }) => {});

const users = ['standard_user', 'problem_user', 'performance_glitch_user'];
for (const u of users) {
  test(`login ด้วย ${u}`, async ({ page }) => {
    await page.goto('https://www.saucedemo.com');
    await page.getByTestId('username').fill(u);
    await page.getByTestId('password').fill('secret_sauce');
    await page.getByTestId('login-button').click();
    await expect(page).toHaveURL(/inventory/);
  });
}

import { test as base } from '@playwright/test';

const test = base.extend<{ loggedInPage: Page }>({
  loggedInPage: async ({ page }, use) => {
    await page.goto('https://www.saucedemo.com');
    await page.getByTestId('username').fill('standard_user');
    await page.getByTestId('password').fill('secret_sauce');
    await page.getByTestId('login-button').click();
    await use(page);
  },
});

test('ใช้ที่ login แล้ว', async ({ loggedInPage }) => {
  await expect(loggedInPage).toHaveURL(/inventory/);
});

Running 3 tests using 3 workers

  ✓  1 [chromium] › login.spec.ts:5:1 › login สำเร็จ (1.8s)
  ✓  2 [chromium] › login.spec.ts:12:1 › login ผิดพลาด (1.2s)
  ✘  3 [chromium] › cart.spec.ts:8:1 › checkout (6.1s)

  1 failed
  2 passed (9.4s)

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: false, slowMo: 300 });
const context = await browser.newContext({ viewport: { width: 1280, height: 720 } });
const page = await context.newPage();
await page.goto('https://www.saucedemo.com');
await browser.close();

await browser.newContext({
  viewport: { width: 390, height: 844 },
  locale: 'th-TH',
  timezoneId: 'Asia/Bangkok',
  geolocation: { latitude: 13.75, longitude: 100.5 },
  permissions: ['geolocation'],
  userAgent: 'MyAgent/1.0',
  colorScheme: 'dark',
  httpCredentials: { username: 'u', password: 'p' },
});

// บันทึกหลัง login
await context.storageState({ path: 'auth.json' });

// ใช้ใน config
use: { storageState: 'auth.json' }

// หรือใช้ในไฟล์เทสต์เดียว
test.use({ storageState: 'auth.json' });

const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.getByText('Open in new tab').click(),
]);
await newPage.waitForLoadState();
console.log(await newPage.title());

console.log(context.pages().length);   // 2
await newPage.close();

await context.addCookies([{ name: 'token', value: 'abc', url: 'https://www.saucedemo.com' }]);
console.log(await context.cookies());
await context.clearCookies();

await page.evaluate(() => localStorage.setItem('k', 'v'));
const v = await page.evaluate(() => localStorage.getItem('k'));

const frame = page.frameLocator('#payment-iframe');
await frame.getByLabel('Card number').fill('4242424242424242');
await frame.getByRole('button', { name: 'Pay' }).click();

page.on('dialog', async dialog => {
  console.log(dialog.type(), dialog.message());
  await dialog.accept();          // หรือ dialog.dismiss() / accept('ข้อความ')
});
await page.getByText('Delete').click();

confirm Are you sure you want to delete?

const [download] = await Promise.all([
  page.waitForEvent('download'),
  page.getByText('Export CSV').click(),
]);
console.log(download.suggestedFilename());   // report.csv
await download.saveAs('downloads/' + download.suggestedFilename());

// Locator ทะลุ shadow DOM ให้อัตโนมัติ
await page.locator('my-component').getByText('OK').click();

await page.keyboard.type('Hello');
await page.keyboard.press('Control+A');
await page.keyboard.down('Shift');

await page.mouse.move(100, 200);
await page.mouse.click(100, 200);
await page.mouse.wheel(0, 500);    // scroll ลง

await page.route('**/api/products', route =>
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify([{ id: 1, name: 'Mock item', price: 9.99 }]),
  })
);

// บล็อกรูปภาพเพื่อให้โหลดเร็วขึ้น
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());

// แก้ header แล้วส่งต่อ
await page.route('**/api/**', route =>
  route.continue({ headers: { ...route.request().headers(), 'x-test': '1' } })
);

// จำลอง server error
await page.route('**/api/orders', route => route.fulfill({ status: 500 }));

page.on('request', req => console.log('>>', req.method(), req.url()));
page.on('response', res => console.log('<<', res.status(), res.url()));
page.on('console', msg => console.log('console:', msg.text()));
page.on('pageerror', err => console.log('error:', err.message));

>> GET https://www.saucedemo.com/
<< 200 https://www.saucedemo.com/
console: Failed to load resource: 404

test('API test', async ({ request }) => {
  const res = await request.post('https://api.example.com/users', {
    data: { name: 'Somchai' },
    headers: { Authorization: 'Bearer xxx' },
  });
  expect(res.ok()).toBeTruthy();
  expect(res.status()).toBe(201);
  const body = await res.json();
  expect(body.name).toBe('Somchai');
});

await page.screenshot({ path: 'home.png' });
await page.screenshot({ path: 'full.png', fullPage: true });
await locator.screenshot({ path: 'item.png' });
const buffer = await page.screenshot();       // ได้ Buffer

await page.pdf({ path: 'page.pdf', format: 'A4' });

// playwright.config.ts
use: {
  screenshot: 'only-on-failure',
  video: 'retain-on-failure',
  trace: 'on-first-retry',     // หรือ 'on', 'retain-on-failure'
}

npx playwright show-trace test-results/xxx/trace.zip

expect(5).toBe(5);                        // เทียบแบบ Object.is (ชนิดพื้นฐาน)
expect({ a: 1 }).toEqual({ a: 1 });       // เทียบเนื้อใน object / array
expect(x).toBeTruthy();                   // truthy
expect(x).toBeFalsy();                    // falsy: 0, '', null, undefined, false, NaN
expect(arr).toHaveLength(3);
expect(arr).toContain('a');               // array มีค่านี้
expect(text).toContain('Thank');          // สตริงมีข้อความนี้
expect(text).toMatch(/thank/i);
expect(10).toBeGreaterThan(5);
expect(10).toBeGreaterThanOrEqual(10);
expect(5).toBeLessThan(10);
expect(5).toBeLessThanOrEqual(5);
expect(0.1 + 0.2).toBeCloseTo(0.3, 5);   // เลขทศนิยม
expect(obj).toMatchObject({ id: 1 });     // มี property เหล่านี้ (ที่เหลือไม่สน)
expect(obj).toHaveProperty('user.name', 'Somchai');
expect(null).toBeNull();
expect(undefined).toBeUndefined();
expect(0).toBeDefined();                  // ไม่ใช่ undefined (null, 0, '' ผ่าน)
expect(NaN).toBeNaN();
expect({ a: 1, b: undefined }).toStrictEqual({ a: 1 });   // fail: เข้มกว่า toEqual
expect(arr).toContainEqual({ id: 1 });    // array มี object ที่เนื้อเท่ากัน
expect(() => fn()).toThrow('error msg');
expect(new Date()).toBeInstanceOf(Date);

Error: expect(received).toBe(expected) // Object.is equality

Expected: 5
Received: 4

Error: expect(received).toBeGreaterThanOrEqual(expected)

Expected: >= 49.99
Received:    29.99

Error: expect(received).toContain(expected) // indexOf

Expected value: "Thank"
Received string: "Checkout: Overview"

expect(user).toEqual({
  id: expect.any(Number),                   // ชนิดตรง ค่าอะไรก็ได้
  name: expect.stringContaining('Som'),
  email: expect.stringMatching(/@.+/),
  tags: expect.arrayContaining(['qa']),
  meta: expect.objectContaining({ ok: true }),
  token: expect.anything(),                 // ไม่ใช่ null / undefined
});

Error: expect(locator).toHaveCount(expected)

Locator: locator('.inventory_item')
Expected: 6
Received: 5
Timeout: 5000ms

Error: expect(page).toHaveURL(expected)

Expected string: "https://www.saucedemo.com/checkout-complete.html"
Received string: "https://www.saucedemo.com/checkout-step-two.html"

await expect(async () => {
  const res = await page.request.get('/api/status');
  expect(res.status()).toBe(200);
}).toPass({ intervals: [500, 1000], timeout: 10_000 });

const slowExpect = expect.configure({ timeout: 15_000 });
await slowExpect(page.getByText('Done')).toBeVisible();

expect.extend({
  toBePositive(received: number) {
    const pass = received > 0;
    return { pass, message: () => `expected ${received} to be positive` };
  },
});

page.on('response', async res => {
  if (res.url().includes('/api/')) {
    console.log(res.status(), res.url());
    console.log(await res.json());
  }
});

200 https://example.com/api/products
[ { id: 1, name: 'Backpack' }, { id: 2, name: 'Bike Light' } ]

const api = await playwright.request.newContext({
  baseURL: 'https://api.example.com',
  extraHTTPHeaders: { Authorization: 'Bearer xxx' },
});
const res = await api.get('/users/1');
console.log(res.status(), await res.json());

200 { id: 1, name: 'Somchai' }

test('demo', async ({ page }, testInfo) => {
  console.log(testInfo.title, testInfo.retry);        // demo 0
  await testInfo.attach('screenshot', {
    body: await page.screenshot(),
    contentType: 'image/png',
  });
});

prices.length;                           // 6

prices.map(p => p * 2);                  // [99.98, 59.98, 31.98, 31.98, 19.98, 15.98]
prices.filter(p => p > 15);              // [49.99, 29.99, 15.99, 15.99]
prices.find(p => p < 10);                // 9.99 (ตัวแรกที่เจอ ไม่เจอได้ undefined)
prices.findIndex(p => p < 10);           // 4   (ไม่เจอได้ -1)
prices.includes(9.99);                   // true
prices.indexOf(15.99);                   // 2   (ไม่เจอได้ -1)
prices.some(p => p > 40);                // true  (มีอย่างน้อย 1 ตัว)
prices.every(p => p > 5);                // true  (ทุกตัวต้องผ่าน)
prices.reduce((sum, p) => sum + p, 0);   // 129.94 (อาจได้ 129.94000000000003 ให้ใช้ toFixed)
names.join(', ');                        // 'Backpack, Bike Light, Bolt T-Shirt'
names.forEach(n => console.log(n));      // พิมพ์ทีละชื่อ (คืน undefined)

[3, 1, 2].sort();                        // [1, 2, 3]  (ระวัง: เรียงแบบตัวอักษร)
[10, 9, 1].sort();                       // [1, 10, 9] (ผิดความคาดหวัง)
[10, 9, 1].sort((a, b) => a - b);        // [1, 9, 10] เรียงเลขน้อยไปมาก
[10, 9, 1].sort((a, b) => b - a);        // [10, 9, 1] เรียงมากไปน้อย

[...prices].sort((a, b) => b - a);       // สำเนา: ไม่แก้ array เดิม (sort แก้ array เดิม)

prices.slice(0, 2);                      // [49.99, 29.99] (ไม่แก้ array เดิม)
prices.slice(-2);                        // [9.99, 7.99]
prices.at(-1);                           // 7.99 (ตัวสุดท้าย)
prices[prices.length - 1];               // 7.99 (วิธีเดิม)

const a = [1, 2, 3];
a.push(4);          // a = [1, 2, 3, 4], คืนความยาวใหม่ 4
a.pop();            // คืน 4, a = [1, 2, 3]
a.unshift(0);       // เพิ่มหน้า a = [0, 1, 2, 3]
a.shift();          // คืน 0, a = [1, 2, 3]
a.splice(1, 1);     // ลบ 1 ตัวที่ index 1 คืน [2], a = [1, 3]
a.reverse();        // a = [3, 1]

[1, 2].concat([3]);                      // [1, 2, 3]
[...[1, 2], ...[3, 4]];                  // [1, 2, 3, 4] (spread)
[[1, 2], [3]].flat();                    // [1, 2, 3]
names.flatMap(n => n.split(' '));        // ['Backpack', 'Bike', 'Light', 'Bolt', 'T-Shirt']
Array.from({ length: 3 }, (_, i) => i);  // [0, 1, 2]
Array.isArray(prices);                   // true
new Set(prices);                         // Set { 49.99, 29.99, 15.99, 9.99, 7.99 }
[...new Set(prices)];                    // [49.99, 29.99, 15.99, 9.99, 7.99] (ตัดซ้ำ)
Array(3).fill(0);                        // [0, 0, 0]
prices.entries();                        // iterator ของ [index, value]

const texts = await page.locator('.inventory_item_price').allTextContents();
// ['$49.99', '$29.99', '$15.99', '$15.99', '$9.99', '$7.99']

const nums = texts.map(t => parseFloat(t.replace('$', '')));
// [49.99, 29.99, 15.99, 15.99, 9.99, 7.99]

const sorted = [...nums].sort((a, b) => b - a);
expect(nums).toEqual(sorted);                    // ตรวจเรียงจากมากไปน้อย

const total = nums.reduce((s, n) => s + n, 0);
console.log(total.toFixed(2));                   // '129.94'

const s = '  Hello Playwright  ';
s.length;                          // 20
s.trim();                          // 'Hello Playwright'
s.trimStart();                     // 'Hello Playwright  '
s.trimEnd();                       // '  Hello Playwright'
s.toLowerCase();                   // '  hello playwright  '
s.toUpperCase();                   // '  HELLO PLAYWRIGHT  '
s.includes('Play');                // true
s.replace('Hello', 'Hi');          // '  Hi Playwright  ' (แทนตัวแรกตัวเดียว)
s.replaceAll('l', 'L');            // '  HeLLo PLaywright  '
s.split(' ');                     // ['', '', 'Hello', 'Playwright', '', '']
s.trim().split(' ');               // ['Hello', 'Playwright']
'$29.99'.replace('$', '');         // '29.99'
'$1,299.50'.replace(/[^0-9.]/g, '');   // '1299.50' (ตัดทุกอย่างที่ไม่ใช่เลข / จุด)

const u = 'https://www.saucedemo.com/inventory.html';
u.startsWith('https');             // true
u.endsWith('.html');               // true
u.indexOf('saucedemo');            // 12  (ไม่เจอได้ -1)
u.includes('cart');                // false
u.match(/inventory/);              // ['inventory', index: 26, ...]
u.match(/[0-9]+/g);                // null (ไม่มีตัวเลข)
'a1b22'.match(/[0-9]+/g);          // ['1', '22']
/inventory/.test(u);               // true (regex.test คืน boolean)

'Backpack'.slice(0, 4);            // 'Back'
'Backpack'.slice(-4);              // 'pack'
'Backpack'.substring(4);           // 'pack'
'Backpack'.charAt(0);              // 'B'
'Backpack'.at(-1);                 // 'k'
'5'.padStart(3, '0');              // '005'
'5'.padEnd(3, '0');                // '500'
'ab'.repeat(3);                    // 'ababab'
'a,b,c'.split(',');                // ['a', 'b', 'c']
'Bolt T-Shirt'.split(' ')[0];      // 'Bolt'

const user = 'standard_user';
const n = 3;
const msg = `ผู้ใช้ ${user} มีสินค้า ${n} ชิ้น รวม ${(n * 9.99).toFixed(2)} บาท`;
// 'ผู้ใช้ standard_user มีสินค้า 3 ชิ้น รวม 29.97 บาท'

await page.locator(`[data-test="add-to-cart-${slug}"]`).click();

'a'.localeCompare('b');            // -1 (ใช้เรียงสตริง: arr.sort((x, y) => x.localeCompare(y)))
'Ab'.toLowerCase() === 'ab';       // true (เทียบแบบไม่สนตัวพิมพ์)
'abc'.split('').reverse().join('');// 'cba'
[...'abc'];                        // ['a', 'b', 'c']
[...'a1b2'.matchAll(/[0-9]/g)].map(m => m[0]);   // ['1', '2']

parseFloat('29.99');               // 29.99
parseFloat('$29.99');              // NaN  <- บั๊กที่เจอในแชท ต้องตัด $ ก่อน
parseFloat('29.99abc');            // 29.99 (อ่านเท่าที่เป็นเลข)
parseInt('42px', 10);              // 42
parseInt('3.9', 10);               // 3
Number('29.99');                   // 29.99
Number('29.99abc');                // NaN (เข้มกว่า parseFloat)
Number('');                        // 0   (ระวัง)
+'12';                             // 12  (ทางลัด)
Number.isNaN(NaN);                 // true
Number.isNaN('abc');               // false (ไม่แปลงชนิด)
isNaN('abc');                      // true  (แปลงชนิดก่อน ไม่แนะนำ)
Number.isInteger(5.0);             // true
Number.isFinite(1 / 0);            // false

(29.99).toFixed(1);                // '30.0'  <- ได้ string ไม่ใช่ number
Number((0.1 + 0.2).toFixed(2));    // 0.3
(1234567.891).toLocaleString();    // '1,234,567.891'
(1234.5).toLocaleString('th-TH', { style: 'currency', currency: 'THB' });  // '฿1,234.50'
(255).toString(16);                // 'ff'
(5).toString();                    // '5'
String(5);                         // '5'
Boolean('');                       // false
!!'abc';                           // true
Number.EPSILON;                    // 2.220446049250313e-16
Number.MAX_SAFE_INTEGER;           // 9007199254740991

0.1 + 0.2;                         // 0.30000000000000004
0.1 + 0.2 === 0.3;                 // false
expect(0.1 + 0.2).toBeCloseTo(0.3, 2);   // ผ่าน
Math.round((0.1 + 0.2) * 100) / 100;     // 0.3

Math.max(...prices);               // 49.99  (ต้อง spread: Math.max(prices) ได้ NaN)
Math.min(...prices);               // 7.99
Math.round(2.5);                   // 3
Math.round(-2.5);                  // -2 (ปัดเข้าหา +infinity)
Math.floor(2.9);                   // 2
Math.ceil(2.1);                    // 3
Math.trunc(-2.9);                  // -2 (ตัดทศนิยมทิ้ง)
Math.abs(-5);                      // 5
Math.pow(2, 3);                    // 8   (หรือ 2 ** 3)
Math.sqrt(16);                     // 4
Math.random();                     // 0 ถึงน้อยกว่า 1 เช่น 0.4817...
Math.floor(Math.random() * 100);   // เลขสุ่ม 0 ถึง 99
Math.sign(-3);                     // -1
Math.PI;                           // 3.141592653589793

const email = `user${Date.now()}@test.com`;               // 'user1761700000000@test.com'
const rand = Math.floor(Math.random() * 9000) + 1000;     // เลข 4 หลัก 1000 ถึง 9999

const item = { name: 'Backpack', price: 29.99, tags: ['bag', 'sale'] };

Object.keys(item);                       // ['name', 'price', 'tags']
Object.values(item);                     // ['Backpack', 29.99, ['bag', 'sale']]
Object.entries(item);                    // [['name', 'Backpack'], ['price', 29.99], ['tags', [...]]]
Object.fromEntries([['a', 1], ['b', 2]]);// { a: 1, b: 2 }
Object.assign({}, item, { price: 19 });  // { name: 'Backpack', price: 19, tags: [...] }
Object.hasOwn(item, 'price');            // true
Object.freeze(item);                     // ห้ามแก้ค่า (ใน strict mode แก้แล้ว error)
structuredClone(item);                   // คัดลอกลึก (deep copy)

// Spread: คัดลอกตื้น และแก้บางค่า
const updated = { ...item, price: 19.99 };      // { name: 'Backpack', price: 19.99, tags: [...] }

// Destructuring
const { name, price } = item;            // name = 'Backpack', price = 29.99
const { name: productName } = item;      // ตั้งชื่อใหม่
const [first, second] = ['a', 'b', 'c']; // first = 'a', second = 'b'

// Optional chaining และ nullish
item.discount?.rate;                     // undefined (ไม่ error แม้ discount ไม่มี)
item.discount?.rate ?? 0;                // 0 (ใช้ค่าเริ่มต้นเฉพาะ null / undefined)
item.price || 10;                        // 29.99 (|| ใช้ค่าเริ่มต้นกับ falsy ทั้งหมด รวม 0)
0 || 10;                                 // 10
0 ?? 10;                                 // 0

'price' in item;                         // true
delete (item as any).tags;               // ลบ property

const buyer = { firstName: 'Somchai', lastName: 'Jaidee', postalCode: '10110' };
for (const [key, value] of Object.entries(buyer)) {
  await page.locator(`[data-test="${key}"]`).fill(value);
}

const obj = { id: 1, name: 'Somchai' };
JSON.stringify(obj);                     // '{"id":1,"name":"Somchai"}'
JSON.stringify(obj, null, 2);            // จัดย่อหน้า 2 ช่องให้อ่านง่าย
JSON.parse('{"id":1}');                  // { id: 1 }
JSON.parse('not json');                  // throw SyntaxError: Unexpected token 'o'

const copy = JSON.parse(JSON.stringify(obj));    // คัดลอกลึกแบบเก่า (เสียข้อมูล Date, undefined)

await page.goto('/');                    // รอจนเสร็จ ลืม await = บั๊กยอดฮิต

const [a, b] = await Promise.all([       // รันพร้อมกัน รอทั้งคู่ (เร็วกว่ารอทีละตัว)
  page.locator('.a').textContent(),
  page.locator('.b').textContent(),
]);

await Promise.allSettled([p1, p2]);      // [{ status: 'fulfilled', value }, { status: 'rejected', reason }]
await Promise.race([p1, p2]);            // เอาตัวที่เสร็จก่อน
await Promise.resolve(5);                // 5

// try / catch / finally
try {
  await page.locator('.x').click({ timeout: 2000 });
} catch (e) {
  console.log((e as Error).message);     // Timeout 2000ms exceeded.
} finally {
  console.log('จบ');
}

// หน่วงเวลา (ใช้น้อยมาก)
await new Promise(r => setTimeout(r, 1000));

const [popup] = await Promise.all([
  page.waitForEvent('popup'),            // เริ่มรอก่อน
  page.getByText('Open').click(),        // แล้วค่อยคลิก (กัน popup มาก่อนที่จะรอ)
]);

const now = new Date();
Date.now();                              // 1761700000000 (ms นับจาก 1970)
now.toISOString();                       // '2026-10-29T08:30:00.000Z'
now.getFullYear();                       // 2026
now.getMonth();                          // 9  (เดือนเริ่มที่ 0: 9 = ตุลาคม)
now.getDate();                           // 29
now.getDay();                            // 4  (0 = อาทิตย์, 4 = พฤหัสบดี)
now.getHours();                          // 15
now.toLocaleDateString('th-TH');         // '29/10/2569'
now.toLocaleDateString('en-GB');         // '29/10/2026'
new Date('2026-12-31');                  // วันที่จากสตริง
new Date(2026, 0, 15);                   // 15 ม.ค. 2026 (เดือนเริ่มที่ 0)

// ความต่างของวัน
const diffDays = (new Date('2026-12-31').getTime() - now.getTime()) / 86_400_000;

// เพิ่มวัน
const next = new Date(now);
next.setDate(next.getDate() + 7);        // อีก 7 วัน

const re = /^[0-9]{5}$/;
re.test('10110');                        // true
re.test('1011');                         // false
'a1b22'.replace(/[0-9]+/g, '#');         // 'a#b#'
'2026-10-29'.match(/([0-9]{4})-([0-9]{2})-([0-9]{2})/);
// ['2026-10-29', '2026', '10', '29', index: 0, ...]

const m = 'Total: $32.39'.match(/Total: [$]([0-9.]+)/);
Number(m?.[1]);                          // 32.39

new RegExp(`^${prefix}-[0-9]+$`);        // สร้างจากตัวแปร

const set = new Set([1, 2, 2, 3]);       // Set { 1, 2, 3 }
set.add(4); set.has(2); set.delete(1);   // true สำหรับ has
set.size;                                // 3

const map = new Map<string, number>([['Backpack', 29.99]]);
map.set('Bike Light', 9.99);
map.get('Backpack');                     // 29.99
map.has('X');                            // false
map.size;                                // 2
[...map.entries()];                      // [['Backpack', 29.99], ['Bike Light', 9.99]]
for (const [k, v] of map) console.log(k, v);

for (const p of prices) {}               // วนค่า (ใช้ await ภายในได้)
for (const i in prices) {}               // วน index (เป็น string) ไม่แนะนำกับ array
for (let i = 0; i < prices.length - 1; i++) {}   // วนแบบมี index (ระวัง off-by-one)
prices.forEach(async p => { await x(p); });      // ห้าม! ไม่รอ await ให้ใช้ for...of แทน

const grade = score >= 80 ? 'A' : 'B';  // ternary
switch (browserName) { case 'webkit': break; default: break; }

// ชนิดพื้นฐาน
let n: number = 5;
let s: string = 'a';
let b: boolean = true;
let arr: number[] = [1, 2];
let tup: [string, number] = ['a', 1];
let any1: any;                           // ปิดการตรวจชนิด (หลีกเลี่ยง)
let unk: unknown;                        // ต้องตรวจชนิดก่อนใช้ (ปลอดภัยกว่า any)

// Union และ literal
let status: 'ok' | 'fail' = 'ok';
let id: string | number = 5;

// interface / type
interface Product { name: string; price: number; tags?: string[]; }
type Buyer = { firstName: string; lastName: string; postalCode: string };

// enum
enum Sort { AZ = 'az', ZA = 'za', LOHI = 'lohi', HILO = 'hilo' }
await select.selectOption(Sort.HILO);

// Generics และ ฟังก์ชัน
function first<T>(a: T[]): T | undefined { return a[0]; }
const toNumber = (t: string): number => parseFloat(t.replace(/[^0-9.]/g, ''));

// Utility types
type P1 = Partial<Product>;              // ทุก field เป็น optional
type P2 = Required<Product>;             // ทุก field บังคับ
type P3 = Pick<Product, 'name'>;         // เลือกเฉพาะ field
type P4 = Omit<Product, 'tags'>;         // ตัด field ออก
type P5 = Record<string, number>;        // { [key: string]: number }
type P6 = Readonly<Product>;             // แก้ค่าไม่ได้
type P7 = ReturnType<typeof toNumber>;   // number

// Type guard
if (typeof id === 'string') { id.toUpperCase(); }

interface CartItem { name: string; price: number; }
const cart: CartItem[] = [{ name: 'Backpack', price: 29.99 }, { name: 'Bike Light', price: 9.99 }];
const total = cart.reduce((s, i) => s + i.price, 0);   // 39.98
const tax = +(total * 0.08).toFixed(2);                 // 3.2
const grand = +(total + tax).toFixed(2);                // 43.18

const toNumber = (t: string) => parseFloat(t.replace(/[^0-9.]/g, ''));

const itemTotal = toNumber(await page.locator('[data-test="subtotal-label"]').innerText());
// 'Item total: $59.98' -> 59.98
const tax = toNumber(await page.locator('[data-test="tax-label"]').innerText());
// 'Tax: $4.80' -> 4.8
const total = toNumber(await page.locator('[data-test="total-label"]').innerText());
// 'Total: $64.78' -> 64.78

expect(tax).toBeCloseTo(+(itemTotal * 0.08).toFixed(2), 2);   // 59.98 x 0.08 = 4.7984 -> 4.80
expect(total).toBeCloseTo(itemTotal + tax, 2);                 // 59.98 + 4.80 = 64.78

import * as XLSX from 'xlsx';
import path from 'path';

const file = path.join(process.cwd(), 'tests', 'data', 'users.xlsx');

const wb = XLSX.readFile(file);                  // ⭐⭐⭐ อ่านไฟล์ (sync)
console.log(wb.SheetNames);                      // ['Login']

const ws = wb.Sheets['Login'];                   // ⭐⭐⭐ เลือก sheet ตามชื่อ
const ws2 = wb.Sheets[wb.SheetNames[0]];         // ⭐⭐⭐ เลือก sheet แรก

// 1) เป็น array ของ object (แถวแรกเป็นชื่อ key)
const rows = XLSX.utils.sheet_to_json(ws);
console.log(rows);

[
  { username: 'standard_user',   password: 'secret_sauce', expected: 'success' },
  { username: 'locked_out_user', password: 'secret_sauce', expected: 'error' },
  { username: 'problem_user',    password: 'secret_sauce', expected: 'success' }
]

// 2) เป็น array 2 มิติ (รวมแถวหัวตาราง)
const grid = XLSX.utils.sheet_to_json<string[]>(ws, { header: 1 });
console.log(grid);

[
  ['username', 'password', 'expected'],
  ['standard_user', 'secret_sauce', 'success'],
  ['locked_out_user', 'secret_sauce', 'error'],
  ['problem_user', 'secret_sauce', 'success']
]

XLSX.utils.sheet_to_json(ws, {
  header: 1,          // 1 = array 2 มิติ, 'A' = ใช้ตัวอักษรคอลัมน์เป็น key, หรือ ['a','b','c'] ตั้งชื่อเอง
  defval: '',         // ค่าเริ่มต้นของเซลล์ว่าง (ไม่ตั้ง = ช่องว่างจะหายไปจาก object)
  range: 1,           // เริ่มอ่านจากแถวที่ index 1 (ข้ามแถวหัวข้อ) หรือ 'A2:C10'
  raw: false,         // false = ใช้ข้อความตามที่แสดงใน Excel (เช่น '29.99%' แทน 0.2999)
  blankrows: false,   // ข้ามแถวว่าง
});

{ username: 'standard_user', expected: 'success' }          // password หายไปทั้ง key
{ username: 'standard_user', password: '', expected: 'success' }   // เมื่อตั้ง defval: ''

XLSX.utils.sheet_to_csv(ws);          // 'username,password,expected\nstandard_user,...'
XLSX.utils.sheet_to_html(ws);         // '<table>...</table>'
XLSX.utils.sheet_to_txt(ws);          // แยกด้วย tab
XLSX.utils.sheet_to_formulae(ws);     // ['A1="username"', 'B1="password"', ...]

const cell = ws['B2'];
console.log(cell.v);     // 'secret_sauce'  ค่าดิบ
console.log(cell.w);     // 'secret_sauce'  ข้อความที่แสดงผล (formatted)
console.log(cell.t);     // 's'  ชนิด: s=สตริง, n=ตัวเลข, b=boolean, d=วันที่, e=error
console.log(cell.f);     // สูตร (ถ้ามี) เช่น 'SUM(A1:A3)'

console.log(ws['Z99']);  // undefined  (เซลล์ไม่มี ต้องเช็กก่อนอ่าน .v)
console.log(ws['!ref']); // 'A1:C4'  ช่วงข้อมูลทั้งหมด

const range = XLSX.utils.decode_range(ws['!ref']!);
console.log(range.e.r + 1);   // 4  จำนวนแถว (รวมหัวตาราง)
console.log(range.e.c + 1);   // 3  จำนวนคอลัมน์
XLSX.utils.encode_cell({ r: 1, c: 1 });   // 'B2'
XLSX.utils.encode_col(2);                 // 'C'

const wb2 = XLSX.readFile(file, { cellDates: true });   // แปลงเซลล์วันที่เป็น Date
const data = XLSX.utils.sheet_to_json(wb2.Sheets['Orders']);
// { orderDate: 2026-10-29T00:00:00.000Z }  ถ้าไม่ใส่ cellDates จะได้เลข serial เช่น 46324

import fs from 'fs';
const wb3 = XLSX.read(fs.readFileSync(file), { type: 'buffer' });

const all: Record<string, unknown[]> = {};
for (const name of wb.SheetNames) {
  all[name] = XLSX.utils.sheet_to_json(wb.Sheets[name]);
}
console.log(Object.keys(all));   // ['Login', 'Checkout']

const out = XLSX.utils.book_new();
const sheet = XLSX.utils.json_to_sheet([{ test: 'login', result: 'pass' }]);
XLSX.utils.book_append_sheet(out, sheet, 'Result');
XLSX.writeFile(out, 'test-results/result.xlsx');
// XLSX.utils.aoa_to_sheet([['a', 'b'], [1, 2]])  สร้างจาก array 2 มิติ

import ExcelJS from 'exceljs';

const wb = new ExcelJS.Workbook();
await wb.xlsx.readFile('tests/data/users.xlsx');   // ⭐⭐⭐ อ่านไฟล์

const ws = wb.getWorksheet('Login');               // ⭐⭐⭐ เลือกตามชื่อ (ไม่เจอได้ undefined)
const ws1 = wb.worksheets[0];                      // ⭐⭐ เลือกตามลำดับ
console.log(wb.worksheets.map(s => s.name));       // ['Login']

console.log(ws!.rowCount);                         // 4  จำนวนแถว
console.log(ws!.columnCount);                      // 3  จำนวนคอลัมน์
console.log(ws!.actualRowCount);                   // 4  นับเฉพาะแถวที่มีข้อมูล

ws!.getCell('B2').value;           // 'secret_sauce'
ws!.getCell(2, 2).value;           // 'secret_sauce'  (แถว 2 คอลัมน์ 2)
ws!.getRow(2).getCell(1).value;    // 'standard_user'
ws!.getCell('B2').text;            // ข้อความที่แสดงผล (string เสมอ)
ws!.getCell('A1').type;            // ชนิดเซลล์ (ExcelJS.ValueType)
ws!.getCell('D2').formula;         // สูตร
ws!.getCell('D2').result;          // ผลลัพธ์ของสูตร

console.log(ws!.getRow(1).values);
// [ <1 empty item>, 'username', 'password', 'expected' ]   index 0 ว่างเสมอ เพราะนับจาก 1

console.log(ws!.getColumn(1).values);
// [ <1 empty item>, 'username', 'standard_user', 'locked_out_user', 'problem_user' ]

type User = { username: string; password: string; expected: string };
const users: User[] = [];

ws!.eachRow((row, rowNumber) => {
  if (rowNumber === 1) return;                 // ข้ามหัวตาราง
  users.push({
    username: String(row.getCell(1).value),
    password: String(row.getCell(2).value),
    expected: String(row.getCell(3).value),
  });
});
console.log(users);

[
  { username: 'standard_user', password: 'secret_sauce', expected: 'success' },
  { username: 'locked_out_user', password: 'secret_sauce', expected: 'error' },
  { username: 'problem_user', password: 'secret_sauce', expected: 'success' }
]

ws!.getCell('D2').value = 'PASS';
ws!.addRow(['new_user', 'pw', 'success']);
await wb.xlsx.writeFile('test-results/users-result.xlsx');

ws!.getCell('A2').value;   // 'abc'                        string
ws!.getCell('B2').value;   // 123                           number
ws!.getCell('C2').value;   // 2026-10-29T00:00:00.000Z      Date
ws!.getCell('D2').value;   // { formula: 'A1+B1', result: 5 }   สูตร
ws!.getCell('E2').value;   // { text: 'link', hyperlink: 'https://...' }
ws!.getCell('F2').value;   // null  (เซลล์ว่าง)

const text = ws!.getCell('D2').text;       // ใช้ .text เมื่ออยากได้ string ที่ปลอดภัย

import fs from 'fs';
import { parse } from 'csv-parse/sync';

const records = parse(fs.readFileSync('tests/data/users.csv'), {
  columns: true,             // ใช้แถวแรกเป็นชื่อ key
  skip_empty_lines: true,
  trim: true,
  bom: true,                 // ตัด BOM ที่ Excel ใส่ตอน Save as CSV UTF-8
});
console.log(records[0]);     // { username: 'standard_user', password: 'secret_sauce', expected: 'success' }

import { test, expect } from '@playwright/test';
import * as XLSX from 'xlsx';
import path from 'path';

type LoginRow = { username: string; password: string; expected: 'success' | 'error' };

const wb = XLSX.readFile(path.join(process.cwd(), 'tests', 'data', 'users.xlsx'));
const rows = XLSX.utils.sheet_to_json<LoginRow>(wb.Sheets['Login'], { defval: '' });

for (const row of rows) {
  test(`login: ${row.username} -> ${row.expected}`, async ({ page }) => {
    await page.goto('https://www.saucedemo.com');
    await page.getByTestId('username').fill(row.username);
    await page.getByTestId('password').fill(row.password);
    await page.getByTestId('login-button').click();

    if (row.expected === 'success') {
      await expect(page).toHaveURL(/inventory/);
    } else {
      await expect(page.getByTestId('error')).toBeVisible();
    }
  });
}

Running 3 tests using 3 workers

  ✓  1 [chromium] › login.spec.ts:15:7 › login: standard_user -> success (1.9s)
  ✓  2 [chromium] › login.spec.ts:15:7 › login: locked_out_user -> error (1.4s)
  ✓  3 [chromium] › login.spec.ts:15:7 › login: problem_user -> success (2.0s)

  3 passed (4.1s)

import { test, expect } from '@playwright/test';
import ExcelJS from 'exceljs';

let users: { username: string; password: string }[] = [];

test.beforeAll(async () => {
  const wb = new ExcelJS.Workbook();
  await wb.xlsx.readFile('tests/data/users.xlsx');
  const ws = wb.getWorksheet('Login')!;
  ws.eachRow((row, n) => {
    if (n === 1) return;
    users.push({ username: String(row.getCell(1).value), password: String(row.getCell(2).value) });
  });
});

test('ใช้แถวแรก', async ({ page }) => {
  await page.goto('https://www.saucedemo.com');
  await page.getByTestId('username').fill(users[0].username);
  await page.getByTestId('password').fill(users[0].password);
  await page.getByTestId('login-button').click();
  await expect(page).toHaveURL(/inventory/);
});

import * as XLSX from 'xlsx';

const results: { test: string; status: string; time: string }[] = [];

test.afterEach(async ({}, testInfo) => {
  results.push({ test: testInfo.title, status: testInfo.status ?? 'unknown', time: `${testInfo.duration} ms` });
});

test.afterAll(() => {
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(results), 'Results');
  XLSX.writeFile(wb, 'test-results/summary.xlsx');
});

// scripts/excel-to-json.ts   รัน: npx ts-node scripts/excel-to-json.ts
import * as XLSX from 'xlsx';
import fs from 'fs';

const wb = XLSX.readFile('tests/data/users.xlsx');
const data = XLSX.utils.sheet_to_json(wb.Sheets['Login'], { defval: '' });
fs.writeFileSync('tests/data/users.json', JSON.stringify(data, null, 2));

// ในเทสต์
import users from './data/users.json';   // ต้องเปิด resolveJsonModule ใน tsconfig.json

saucedemo-project/
├── config.yaml
├── saucedemo_testdata.xlsx      (Sheet: E2E_Purchase, Negative_Cases)
├── playwright.config.ts
├── package.json
├── screenshots/                 (สร้างเองอัตโนมัติ)
└── tests/
    └── saucedemo.spec.ts

npm init playwright@latest
npm i xlsx js-yaml
npm i -D @types/js-yaml

env:
  url: "https://www.saucedemo.com"
  browser: "chrome"
  headless: false

timeout:
  implicit_wait: "10s"
  explicit_wait: "15s"

default_user:
  standard: "standard_user"
  locked: "locked_out_user"

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  use: {
    testIdAttribute: 'data-test',   // saucedemo ใช้ data-test ไม่ใช่ data-testid
    headless: false,
    channel: 'chrome',
  },
});

import { test, expect, Page } from '@playwright/test';
import * as XLSX from 'xlsx';
import * as yaml from 'js-yaml';
import * as fs from 'fs';
import * as path from 'path';

// ---------- โหลด config ----------
const config: any = yaml.load(
  fs.readFileSync(path.join(process.cwd(), 'config.yaml'), 'utf8')
);
const toMs = (s: string) => parseInt(s) * 1000;   // "15s" -> 15000

// ---------- โหลด Excel ----------
type Row = Record<string, string>;
const wb = XLSX.readFile(path.join(process.cwd(), 'saucedemo_testdata.xlsx'));

function loadSheet(name: string): Row[] {
  const rows = XLSX.utils.sheet_to_json<Row>(wb.Sheets[name], {
    defval: '',     // ช่องว่างให้เป็น '' ไม่ใช่ undefined
    raw: false,     // postal_code ที่เป็นตัวเลขจะถูกอ่านเป็น string
  });
  return rows.filter((r) => String(r.run).trim().toUpperCase() === 'Y');
}

// ---------- Helper functions ----------
async function login(page: Page, username: string, password: string) {
  await page.goto(config.env.url);
  await page.getByTestId('username').fill(username);
  await page.getByTestId('password').fill(password);
  await page.getByTestId('login-button').click();
}

async function addItems(page: Page, itemsStr: string) {
  const items = itemsStr.split(',').map((s) => s.trim()).filter(Boolean);
  for (const name of items) {
    const card = page
      .getByTestId('inventory-item')
      .filter({ has: page.getByText(name, { exact: true }) });
    await expect(card, `ไม่พบสินค้า: ${name}`).toHaveCount(1);
    await card.getByRole('button', { name: /add to cart/i }).click();
  }
  return items;
}

async function fillCheckoutInfo(page: Page, r: Row) {
  await page.getByTestId('firstName').fill(r.first_name);
  await page.getByTestId('lastName').fill(r.last_name);
  await page.getByTestId('postalCode').fill(r.postal_code);
  await page.getByTestId('continue').click();
}

test.beforeEach(async ({ page }) => {
  page.setDefaultTimeout(toMs(config.timeout.explicit_wait));
});

// ================= Scenario 1: E2E Purchase =================
test.describe('Scenario 1: E2E Successful Purchase', () => {
  for (const r of loadSheet('E2E_Purchase')) {
    test(`${r.tc_id} - ${r.testcase_name}`, async ({ page }) => {
      await login(page, r.username, r.password);
      await expect(page).toHaveURL(/inventory/);

      const items = await addItems(page, r.items_to_add);
      await expect(page.getByTestId('shopping-cart-badge')).toHaveText(String(items.length));

      await page.getByTestId('shopping-cart-link').click();
      await page.getByTestId('checkout').click();
      await fillCheckoutInfo(page, r);

      // หน้า Overview: ตรวจว่ารายการตรงกับที่เลือก
      await expect(page).toHaveURL(/checkout-step-two/);
      await expect(page.getByTestId('inventory-item-name')).toHaveText(items);
      await page.screenshot({ path: `screenshots/overview-${r.tc_id}.png`, fullPage: true });

      await page.getByTestId('finish').click();
      await expect(page.getByTestId('complete-header')).toHaveText(r.expected_result);
    });
  }
});

// ================= Scenario 2: Negative Cases =================
test.describe('Scenario 2: Negative - Error Validation', () => {
  for (const r of loadSheet('Negative_Cases')) {
    test(`${r.tc_id} - ${r.testcase_name}`, async ({ page }) => {
      await login(page, r.username, r.password);

      // login ไม่ผ่าน (locked user / รหัสผิด) -> เช็ค error ที่หน้า login
      if (!/inventory/.test(page.url()) && (await page.getByTestId('error').isVisible())) {
        await expect(page.getByTestId('error')).toContainText(r.expected_result);
        return;
      }

      // login ผ่าน แต่กรอกข้อมูลชำระเงินไม่ครบ
      if (r.items_to_add) await addItems(page, r.items_to_add);
      await page.getByTestId('shopping-cart-link').click();
      await page.getByTestId('checkout').click();
      await fillCheckoutInfo(page, r);

      await expect(page.getByTestId('error')).toContainText(r.expected_result);
    });
  }
});

npx playwright test
npx playwright test --ui          # โหมด UI
npx playwright show-report        # เปิดรายงาน HTML

Running 6 tests using 1 worker
  ✓  Scenario 1: E2E Successful Purchase › TC01 - ซื้อสินค้า 1 ชิ้น
  ✓  Scenario 1: E2E Successful Purchase › TC02 - ซื้อหลายชิ้น
  ✓  Scenario 2: Negative - Error Validation › NG01 - locked user
  ✓  Scenario 2: Negative - Error Validation › NG02 - ไม่กรอก First Name
  ✓  Scenario 2: Negative - Error Validation › NG03 - ไม่กรอก Last Name
  ✓  Scenario 2: Negative - Error Validation › NG04 - ไม่กรอก Postal Code

  6 passed

// scripts/make-excel.ts   รัน: npx ts-node scripts/make-excel.ts
import * as XLSX from 'xlsx';

const head = ['tc_id','run','testcase_name','username','password','items_to_add',
              'first_name','last_name','postal_code','expected_result','note'];

const e2e = [
  ['TC01','Y','ซื้อสินค้า 1 ชิ้น','standard_user','secret_sauce','Sauce Labs Backpack','John','Doe','10110','Thank you for your order!',''],
  ['TC02','Y','ซื้อหลายชิ้น','standard_user','secret_sauce','Sauce Labs Backpack,Sauce Labs Bike Light','Jane','Doe','10200','Thank you for your order!',''],
];
const neg = [
  ['NG01','Y','locked user','locked_out_user','secret_sauce','','','','','Sorry, this user has been locked out.',''],
  ['NG02','Y','ไม่กรอก First Name','standard_user','secret_sauce','Sauce Labs Backpack','','Doe','10110','Error: First Name is required',''],
  ['NG03','Y','ไม่กรอก Last Name','standard_user','secret_sauce','Sauce Labs Backpack','John','','10110','Error: Last Name is required',''],
  ['NG04','Y','ไม่กรอก Postal Code','standard_user','secret_sauce','Sauce Labs Backpack','John','Doe','','Error: Postal Code is required',''],
];

const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, XLSX.utils.aoa_to_sheet([head, ...e2e]), 'E2E_Purchase');
XLSX.utils.book_append_sheet(wb, XLSX.utils.aoa_to_sheet([head, ...neg]), 'Negative_Cases');
XLSX.writeFile(wb, 'saucedemo_testdata.xlsx');

เปิด https://www.saucedemo.com และ Login ด้วย standard_user
1. Sorting Test: เปลี่ยนเป็น "Price (high to low)" แล้วตรวจว่าชิ้นแรกราคา >= ชิ้นถัดไป (Dynamic Inspection)
2. Multi-Item Selection: เพิ่มสินค้าแพงที่สุดและถูกที่สุดลงตะกร้า แล้วตรวจว่า Badge = 2
3. Cart: ไปหน้า Cart และเช็กว่ามีสินค้า 2 ชิ้นตามที่เลือก
4. Checkout & Calculation: กรอกข้อมูลผู้ซื้อ ที่หน้า Overview ดึง Item Total มาเทียบกับผลรวมราคา 2 ชิ้น
   คำนวณ Tax 8% และเช็กว่า Item Total + Tax = Total
5. Complete & URL: กด Finish, assert URL = https://www.saucedemo.com/checkout-complete.html
   และตรวจข้อความ "Thank you for your order!"

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  use: {
    baseURL: 'https://www.saucedemo.com',   // ให้ page.goto('/') ใช้ได้
    testIdAttribute: 'data-test',           // ต้องมีถ้าจะใช้ getByTestId()
    headless: false,
  },
});

/**
 * Automated UI Test: https://www.saucedemo.com
 * Framework: Playwright Test (TypeScript)
 *
 * เงินทั้งหมดเก็บเป็น "satang/cent" (จำนวนเต็ม) เพื่อเลี่ยงปัญหา floating point
 */
import { test, expect, Page } from '@playwright/test';

const COMPLETE_URL = 'https://www.saucedemo.com/checkout-complete.html';
const USERNAME = 'standard_user';
const PASSWORD = 'secret_sauce';

// ---------------------------------------------------------------------------
// Types & money helpers (หน้าที่: แปลง/จัดรูปแบบเงิน)
// ---------------------------------------------------------------------------
interface Product {
  name: string;
  priceCents: number;
}

const fmt = (cents: number): string => (cents / 100).toFixed(2);

function parseMoneyToCents(text: string): number {
  const m = text.match(/\$\s*([0-9]+(?:\.[0-9]+)?)/);
  expect(m, `ไม่พบตัวเลขราคาในข้อความ: "${text}"`).not.toBeNull();
  return Math.round(parseFloat(m![1]) * 100);
}

// ---------------------------------------------------------------------------
// Reading DOM (หน้าที่: อ่านข้อมูลจากหน้าเว็บจริง)
// ---------------------------------------------------------------------------
async function readProducts(page: Page, containerSelector: string): Promise<Product[]> {
  const items = page.locator(containerSelector);
  await expect(items.first()).toBeVisible();
  const count = await items.count();

  const products: Product[] = [];
  for (let i = 0; i < count; i++) {
    const item = items.nth(i);
    const name = (await item.locator('[data-test="inventory-item-name"]').innerText()).trim();
    const priceText = await item.locator('[data-test="inventory-item-price"]').innerText();
    products.push({ name, priceCents: parseMoneyToCents(priceText) });
  }
  return products;
}

// ---------------------------------------------------------------------------
// Business logic (หน้าที่: หาสินค้าสูงสุด/ต่ำสุด และคำนวณราคา)
// ---------------------------------------------------------------------------
const findMostExpensive = (ps: Product[]): Product =>
  ps.reduce((a, b) => (b.priceCents > a.priceCents ? b : a));

const findCheapest = (ps: Product[]): Product =>
  ps.reduce((a, b) => (b.priceCents < a.priceCents ? b : a));

const sumPrices = (ps: Product[]): number => ps.reduce((s, p) => s + p.priceCents, 0);

/** tax = itemTotal × 8% ปัดเศษ 2 ตำแหน่งแบบ half-up (ใช้เลขจำนวนเต็มล้วน) */
type Rounding = 'half-up' | 'half-even' | 'truncate';
function calcTax(itemTotalCents: number, rounding: Rounding = 'half-up'): number {
  const raw = itemTotalCents * 8; // หน่วย 1/100 ของ cent
  const q = Math.floor(raw / 100);
  const r = raw % 100;
  if (rounding === 'truncate') return q;
  if (rounding === 'half-up') return r >= 50 ? q + 1 : q;
  if (r > 50) return q + 1;
  if (r < 50) return q;
  return q % 2 === 0 ? q : q + 1; // half-even
}

const calcTotal = (itemTotalCents: number, taxCents: number): number => itemTotalCents + taxCents;

// ---------------------------------------------------------------------------
// UI actions
// ---------------------------------------------------------------------------
async function addToCartByName(page: Page, name: string): Promise<void> {
  const item = page
    .locator('.inventory_item')
    .filter({ has: page.getByText(name, { exact: true }) });
  await item.getByRole('button', { name: 'Add to cart' }).click();
  await expect(
    item.getByRole('button', { name: 'Remove' }),
    `กด Add to cart ของ "${name}" แล้วปุ่มต้องเปลี่ยนเป็น Remove`,
  ).toBeVisible();
}

// ---------------------------------------------------------------------------
// The test
// ---------------------------------------------------------------------------
test('SauceDemo: login -> sort -> pick extremes -> checkout -> verify totals', async ({ page }) => {
  // ======================= 1. Login =======================
  await test.step('1. Login ด้วย standard_user', async () => {
    await page.goto('/');
    await page.locator('[data-test="username"]').fill(USERNAME);
    await page.locator('[data-test="password"]').fill(PASSWORD);
    await page.locator('[data-test="login-button"]').click();

    await expect(page, 'Login ต้องเข้าสู่ /inventory.html').toHaveURL(/\/inventory\.html$/);
    await expect(page.locator('[data-test="title"]'), 'หัวข้อหน้าต้องเป็น Products').toHaveText('Products');
  });

  // ======================= 2. Sorting =======================
  await test.step('2. Sort Price (high to low) และตรวจลำดับราคา', async () => {
    await page.locator('[data-test="product-sort-container"]').selectOption('hilo');
    await expect(page.locator('[data-test="active-option"]')).toHaveText('Price (high to low)');

    const products = await readProducts(page, '.inventory_item');
    const prices = products.map((p) => p.priceCents);
    expect(prices.length, 'ต้องมีสินค้าอย่างน้อย 2 ชิ้น').toBeGreaterThanOrEqual(2);

    expect(
      prices[0],
      `ราคาชิ้นที่ 1 (${products[0].name}) ต้อง >= ชิ้นที่ 2 (${products[1].name})`,
    ).toBeGreaterThanOrEqual(prices[1]);

    for (let i = 0; i < prices.length - 1; i++) {
      expect(
        prices[i],
        `ลำดับราคาผิดที่ตำแหน่ง ${i + 1}->${i + 2} (${products[i].name} vs ${products[i + 1].name})`,
      ).toBeGreaterThanOrEqual(prices[i + 1]);
    }
    expect(prices, 'ราคาทั้งหมดต้องเรียงจากมากไปน้อย').toEqual([...prices].sort((a, b) => b - a));
  });

  // ======================= 3. Multi-Item Selection =======================
  let selected: Product[] = [];
  await test.step('3. หาสินค้าแพงสุด/ถูกสุด แล้วเพิ่มลง Cart', async () => {
    const all = await readProducts(page, '.inventory_item');
    const mostExpensive = findMostExpensive(all);
    const cheapest = findCheapest(all);
    console.log(`Most expensive: ${mostExpensive.name} $${fmt(mostExpensive.priceCents)}`);
    console.log(`Cheapest      : ${cheapest.name} $${fmt(cheapest.priceCents)}`);

    expect(mostExpensive.name, 'สินค้าแพงสุดและถูกสุดต้องเป็นคนละชิ้น').not.toBe(cheapest.name);

    selected = [mostExpensive, cheapest];
    for (const p of selected) {
      await addToCartByName(page, p.name);
    }

    await expect(page.locator('[data-test="shopping-cart-badge"]'), 'Cart badge ต้องแสดง 2').toHaveText('2');
  });

  // ======================= 4. Cart Navigation & Validation =======================
  await test.step('4. เปิด Cart และตรวจสินค้า', async () => {
    await page.locator('[data-test="shopping-cart-link"]').click();
    await expect(page).toHaveURL(/\/cart\.html$/);
    await expect(page.locator('.cart_item'), 'Cart ต้องมีสินค้า 2 ชิ้น').toHaveCount(2);

    const cartProducts = await readProducts(page, '.cart_item');
    const byName = (a: Product, b: Product) => a.name.localeCompare(b.name);
    expect(
      [...cartProducts].sort(byName),
      'สินค้าใน Cart ต้องตรงกับสินค้าแพงสุด/ถูกสุดที่เลือก',
    ).toEqual([...selected].sort(byName));
  });

  // ======================= 5. Checkout & Calculation =======================
  await test.step('5.1 Checkout และกรอกข้อมูลผู้ซื้อ', async () => {
    await page.locator('[data-test="checkout"]').click();
    await expect(page).toHaveURL(/\/checkout-step-one\.html$/);
    await page.locator('[data-test="firstName"]').fill('Test');
    await page.locator('[data-test="lastName"]').fill('User');
    await page.locator('[data-test="postalCode"]').fill('10110');
    await page.locator('[data-test="continue"]').click();
    await expect(page).toHaveURL(/\/checkout-step-two\.html$/);
  });

  await test.step('5.2 ตรวจ Item Total / Tax / Total ที่หน้า Overview', async () => {
    const overview = await readProducts(page, '.cart_item');
    expect(overview.length, 'Overview ต้องมีสินค้า 2 ชิ้น').toBe(2);

    // ---- Item Total ----
    const expectedItemTotal = sumPrices(overview);
    expect(
      fmt(expectedItemTotal),
      'ราคาใน Overview ต้องตรงกับราคาที่อ่านจากหน้า Products',
    ).toBe(fmt(sumPrices(selected)));

    const uiItemTotal = parseMoneyToCents(await page.locator('[data-test="subtotal-label"]').innerText());
    expect(fmt(uiItemTotal), 'Item Total บนเว็บต้องตรงกับผลรวมราคาสินค้า').toBe(fmt(expectedItemTotal));

    // ---- Tax 8% ----
    const expectedTax = calcTax(expectedItemTotal, 'half-up');
    const uiTax = parseMoneyToCents(await page.locator('[data-test="tax-label"]').innerText());
    expect(
      fmt(uiTax),
      'Tax บนเว็บต้องเท่ากับ Item Total x 0.08 (ปัด 2 ตำแหน่ง half-up)\n' +
        `  item total = ${fmt(expectedItemTotal)}, raw tax = ${((expectedItemTotal * 8) / 10000).toFixed(4)}\n` +
        `  half-up = ${fmt(expectedTax)}, half-even = ${fmt(calcTax(expectedItemTotal, 'half-even'))}, ` +
        `truncate = ${fmt(calcTax(expectedItemTotal, 'truncate'))}, web = ${fmt(uiTax)}\n` +
        '  => ถ้าไม่ตรง แสดงว่าเว็บอาจใช้กฎปัดเศษต่างจากสูตรที่กำหนด',
    ).toBe(fmt(expectedTax));

    // ---- Total ----
    const expectedTotal = calcTotal(expectedItemTotal, expectedTax);
    const uiTotal = parseMoneyToCents(await page.locator('[data-test="total-label"]').innerText());
    expect(fmt(uiTotal), 'Total บนเว็บต้องเท่ากับ Item Total + Tax').toBe(fmt(expectedTotal));
  });

  // ======================= 6. Complete & URL =======================
  await test.step('6. Finish และตรวจ URL / ข้อความ', async () => {
    await page.locator('[data-test="finish"]').click();
    await expect(page, `URL ต้องเท่ากับ ${COMPLETE_URL}`).toHaveURL(COMPLETE_URL);
    expect(page.url(), 'URL หลัง Finish ไม่ถูกต้อง').toBe(COMPLETE_URL);
    await expect(
      page.getByText('Thank you for your order!'),
      'ต้องแสดงข้อความ Thank you for your order!',
    ).toBeVisible();
  });
});

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

const BASE = 'https://www.saucedemo.com/';
const COMPLETE_URL = 'https://www.saucedemo.com/checkout-complete.html';

interface Product { name: string; priceCents: number }

// แปลง "$29.99" -> 2999 (เก็บเป็น cent เลี่ยง floating point)
const toCents = (text: string): number => {
  const m = text.match(/\$\s*([0-9]+(?:\.[0-9]+)?)/);
  expect(m, `ไม่พบราคาในข้อความ: "${text}"`).not.toBeNull();
  return Math.round(parseFloat(m![1]) * 100);
};
const fmt = (c: number) => (c / 100).toFixed(2);

// อ่านชื่อ+ราคาจากรายการสินค้า (ใช้ CSS class ของเว็บ ไม่ใช้ data-test)
async function readProducts(page: Page, itemSelector: string): Promise<Product[]> {
  const items = page.locator(itemSelector);
  await expect(items.first()).toBeVisible();
  const n = await items.count();
  const list: Product[] = [];
  for (let i = 0; i < n; i++) {
    const it = items.nth(i);
    list.push({
      name: (await it.locator('.inventory_item_name').innerText()).trim(),
      priceCents: toCents(await it.locator('.inventory_item_price').innerText()),
    });
  }
  return list;
}

test('SauceDemo (getByRole + CSS): login -> sort -> extremes -> checkout -> totals', async ({ page }) => {
  // 1. Login
  await page.goto(BASE);
  await page.getByPlaceholder('Username').fill('standard_user');
  await page.getByPlaceholder('Password').fill('secret_sauce');
  await page.getByRole('button', { name: 'Login' }).click();
  await expect(page).toHaveURL(/\/inventory\.html$/);

  // 2. Sorting: Price (high to low)
  await page.locator('select.product_sort_container').selectOption('hilo');
  const sorted = await readProducts(page, '.inventory_item');
  expect(sorted.length).toBeGreaterThanOrEqual(2);
  expect(sorted[0].priceCents, 'ชิ้นแรกต้องแพงกว่าหรือเท่ากับชิ้นที่สอง')
    .toBeGreaterThanOrEqual(sorted[1].priceCents);
  const prices = sorted.map((p) => p.priceCents);
  expect(prices, 'ทั้งหน้าต้องเรียงจากมากไปน้อย').toEqual([...prices].sort((a, b) => b - a));

  // 3. เลือกแพงสุด + ถูกสุด (หลัง sort high->low คือชิ้นแรกกับชิ้นสุดท้าย แต่ใช้ reduce เพื่อไม่พึ่งลำดับ)
  const expensive = sorted.reduce((a, b) => (b.priceCents > a.priceCents ? b : a));
  const cheapest = sorted.reduce((a, b) => (b.priceCents < a.priceCents ? b : a));
  const selected = [expensive, cheapest];

  for (const p of selected) {
    const card = page.locator('.inventory_item').filter({ hasText: p.name });
    await card.getByRole('button', { name: 'Add to cart' }).click();
    await expect(card.getByRole('button', { name: 'Remove' })).toBeVisible();
  }
  await expect(page.locator('.shopping_cart_badge')).toHaveText('2');

  // 4. Cart
  await page.locator('.shopping_cart_link').click();
  await expect(page).toHaveURL(/\/cart\.html$/);
  await expect(page.locator('.cart_item')).toHaveCount(2);
  const inCart = await page.locator('.inventory_item_name').allInnerTexts();
  expect(inCart.sort()).toEqual(selected.map((p) => p.name).sort());

  // 5. Checkout + คำนวณ
  await page.getByRole('button', { name: 'Checkout' }).click();
  await page.getByPlaceholder('First Name').fill('Test');
  await page.getByPlaceholder('Last Name').fill('User');
  await page.getByPlaceholder('Zip/Postal Code').fill('10110');
  await page.getByRole('button', { name: 'Continue' }).click();
  await expect(page).toHaveURL(/\/checkout-step-two\.html$/);

  const overview = await readProducts(page, '.cart_item');
  const sum = overview.reduce((s, p) => s + p.priceCents, 0);

  const uiItemTotal = toCents(await page.locator('.summary_subtotal_label').innerText());
  expect(fmt(uiItemTotal), 'Item Total ต้องเท่ากับผลรวมราคา 2 ชิ้น').toBe(fmt(sum));

  // tax 8% ปัด half-up ด้วยจำนวนเต็ม: floor((sum*8 + 50) / 100)
  const expectedTax = Math.floor((sum * 8 + 50) / 100);
  const uiTax = toCents(await page.locator('.summary_tax_label').innerText());
  expect(fmt(uiTax), 'Tax ต้องเท่ากับ Item Total x 8%').toBe(fmt(expectedTax));

  const uiTotal = toCents(await page.locator('.summary_total_label').innerText());
  expect(fmt(uiTotal), 'Total ต้องเท่ากับ Item Total + Tax').toBe(fmt(sum + expectedTax));

  // 6. Finish
  await page.getByRole('button', { name: 'Finish' }).click();
  await expect(page).toHaveURL(COMPLETE_URL);
  await expect(page.getByRole('heading', { name: 'Thank you for your order!' })).toBeVisible();
});

Running 1 test using 1 worker
  ✓  SauceDemo: login -> sort -> pick extremes -> checkout -> verify totals

Most expensive: Sauce Labs Fleece Jacket $49.99
Cheapest      : Sauce Labs Onesie $7.99

  1 passed