Tổng Hợp Các Method Của Locator Trong Playwright - Hướng Dẫn Chi Tiết

// Click với modifier key
await page.locator('canvas').click({
  button: 'right',
  modifiers: ['Shift'],
  position: { x: 23, y: 32 }
});

// Fill - Cách nhanh nhất
await page.getByRole('textbox').fill('example value');

// Press sequentially - Gõ từng ký tự
await locator.pressSequentially('Hello', { delay: 100 });

// Press - Nhấn phím đặc biệt
await page.getByRole('textbox').press('Backspace');
await locator.press('Control+A'); // Shortcut

// Clear input field
await page.getByRole('textbox').clear();

// Blur - Remove focus
await locator.blur();

// Hover over element
await page.getByRole('link').hover();

// Focus vào element
await locator.focus();

// Scroll element vào view
await locator.scrollIntoViewIfNeeded();

// Check checkbox
await page.getByRole('checkbox').check();

// Uncheck
await page.getByRole('checkbox').uncheck();

// Set checked state
await locator.setChecked(true);

// Kiểm tra trạng thái
const checked = await page.getByRole('checkbox').isChecked();

// Select single option bằng value
await locator.selectOption('blue');

// Select bằng label
await locator.selectOption({ label: 'Blue' });

// Select multiple options
await locator.selectOption(['red', 'green', 'blue']);

// Select bằng index
await locator.selectOption({ index: 0 });

// Upload một file
await page.getByLabel('Upload file').setInputFiles(
  path.join(__dirname, 'myfile.pdf')
);

// Upload nhiều files
await page.getByLabel('Upload files').setInputFiles([
  path.join(__dirname, 'file1.txt'),
  path.join(__dirname, 'file2.txt')
]);

// Upload từ buffer
await page.getByLabel('Upload file').setInputFiles({
  name: 'file.txt',
  mimeType: 'text/plain',
  buffer: Buffer.from('this is test')
});

// Clear files
await page.getByLabel('Upload file').setInputFiles([]);

const text = await locator.textContent();
const inner = await locator.innerText();
const html = await locator.innerHTML();

// Lấy text của tất cả elements
const texts = await page.getByRole('link').allTextContents();

// Lấy value của input/textarea/select
const value = await page.getByRole('textbox').inputValue();

// Lấy attribute
const href = await locator.getAttribute('href');
const title = await locator.getAttribute('title');

// Lấy bounding box
const box = await locator.boundingBox();
// Returns: { x, y, width, height } hoặc null

const visible = await page.getByRole('button').isVisible();
const disabled = await page.getByRole('button').isDisabled();
const editable = await page.getByRole('textbox').isEditable();

// Lưu ý: isVisible() và isHidden() không wait
// Nên dùng expect() cho assertions
await expect(page.getByRole('button')).toBeVisible();

// Đếm số lượng matching elements
const count = await page.getByRole('listitem').count();

// Lấy bounding box coordinates
const box = await page.getByRole('button').boundingBox();
if (box) {
  await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
}

const rows = page.locator('tr');

// Filter theo text
await rows
  .filter({ hasText: 'text in column 1' })
  .filter({ has: page.getByRole('button', { name: 'column 2 button' }) })
  .screenshot();

// Filter theo điều kiện phủ định
await rows.filter({ hasNotText: 'excluded text' });
await rows.filter({ hasNot: page.locator('.hidden') });

// Filter theo visibility
await rows.filter({ visible: true });

// Lấy element đầu tiên
const firstButton = await page.getByRole('button').first();

// Lấy element cuối
const lastItem = await page.getByRole('listitem').last();

// Lấy element thứ 3 (index = 2)
const thirdItem = await page.getByRole('listitem').nth(2);

// AND - Kết hợp 2 locators
const button = page.getByRole('button').and(page.getByTitle('Subscribe'));

// OR - Match một trong hai
const newEmail = page.getByRole('button', { name: 'New' });
const dialog = page.getByText('Confirm security settings');
await expect(newEmail.or(dialog).first()).toBeVisible();

// Locator trong locator
const article = page.locator('article');
const content = article.locator('.content');

// Frame locator
const frameLocator = page.frameLocator('iframe');
await frameLocator.getByRole('button').click();

// Content frame (cho iframe)
const locator = page.locator('iframe[name="embedded"]');
const frameLocator = locator.contentFrame();
await frameLocator.getByRole('button').click();

// Wait for element state
await locator.waitFor({ state: 'visible' });
await locator.waitFor({ state: 'hidden' });
await locator.waitFor({ state: 'attached' });
await locator.waitFor({ state: 'detached' });

// Wait for element state (các state: visible, hidden, stable, enabled, disabled, editable)
await locator.waitForElementState('visible');
await locator.waitForElementState('enabled');

await page.setContent(`<div><span></span></div>`);
const div = await page.$('div');
const span = await div.waitForSelector('span', { state: 'attached' });

const source = page.locator('#source');
const target = page.locator('#target');

await source.dragTo(target);

// Với positions cụ thể
await source.dragTo(target, {
  sourcePosition: { x: 34, y: 7 },
  targetPosition: { x: 10, y: 20 }
});

// Screenshot element
await page.getByRole('link').screenshot();

// Screenshot với options
await page.getByRole('link').screenshot({
  animations: 'disabled',
  path: 'link.png',
  mask: [page.locator('.sensitive-data')],
  maskColor: '#FF0000'
});

// Execute JS trên element
const result = await page.getByTestId('myId').evaluate((element, [x, y]) => {
  return element.textContent + ' ' + x * y;
}, [7, 8]);

// Evaluate all matching elements
const moreThanTen = await locator.evaluateAll(
  (divs, min) => divs.length > min,
  10
);

// Evaluate và return JSHandle
const handle = await locator.evaluateHandle(element => element);

// Dispatch custom event
await locator.dispatchEvent('click');

// Với event init properties
await locator.dispatchEvent('dragstart', { dataTransfer });

// Basic role
await page.getByRole('button', { name: 'Submit' }).click();

// Với các options
await page.getByRole('heading', { name: 'Sign up' });
await page.getByRole('checkbox', { name: 'Subscribe' }).check();
await page.getByRole('button', { name: /submit/i }).click();

// Role với state
await page.getByRole('button', {
  name: 'Save',
  disabled: false,
  pressed: true
});

// Lấy page từ locator
const page = locator.page();

// Highlight element (debugging)
await locator.highlight();

// Get all matching locators
const allButtons = await page.getByRole('button').all();
for (const button of allButtons) {
  await button.click();
}

// Mô tả locator (cho trace/report)
const button = page.getByTestId('btn-sub').describe('Subscribe button');
await button.click();

// Select text
await locator.selectText();

// Aria snapshot
const snapshot = await page.getByRole('link').ariaSnapshot();

// 1. Chain operations
await page.getByRole('textbox')
  .fill('test')
  .press('Enter');

// 2. Reuse locators
const submitButton = page.getByRole('button', { name: 'Submit' });
await expect(submitButton).toBeVisible();
await submitButton.click();

// 3. Wait cho element trước khi interact
await locator.waitFor({ state: 'visible' });
await locator.click();

// 4. Dùng force cho edge cases
await locator.click({ force: true }); // Bypass actionability checks

// Cách 1: Frame locator
const frame = page.frameLocator('iframe');
await frame.getByRole('button').click();

// Cách 2: Content frame
const iframeLocator = page.locator('iframe[name="embedded"]');
const frame = iframeLocator.contentFrame();
await frame.getByRole('button').click();

// Wait for element appear
await page.getByText('Loading...').waitFor({ state: 'hidden' });
await page.getByText('Content loaded').waitFor({ state: 'visible' });

// Wait for text change
await expect(locator).toHaveText('New text');

// Get all và iterate
const buttons = await page.getByRole('button').all();
for (const button of buttons) {
  if (await button.isVisible()) {
    await button.click();
  }
}

// Count before processing
const count = await page.getByRole('listitem').count();
for (let i = 0; i < count; i++) {
  await page.getByRole('listitem').nth(i).click();
}