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