Xử lý nâng cao: iframe, tab, upload/download, dialog

// Định vị iframe rồi tìm phần tử BÊN TRONG nó
const frame = page.frameLocator('#payment-iframe');
await frame.getByLabel('Số thẻ').fill('4242424242424242');
await frame.getByRole('button', { name: 'Thanh toán' }).click();

page.frameLocator('#outer').frameLocator('#inner').getByRole('button');

// Đăng ký chờ popup TRƯỚC khi click
const popupPromise = page.waitForEvent('popup');
await page.getByRole('link', { name: 'Mở trang điều khoản' }).click();
const popup = await popupPromise;

// Giờ thao tác trên tab mới
await popup.waitForLoadState();
await expect(popup).toHaveTitle(/Điều khoản/);
await popup.close();

// Cách phổ biến: set vào <input type="file">
await page.getByLabel('Ảnh đại diện').setInputFiles('fixtures/avatar.png');

// Nhiều file
await page.getByLabel('Tài liệu').setInputFiles([
  'fixtures/a.pdf', 'fixtures/b.pdf',
]);

// Xóa lựa chọn
await page.getByLabel('Ảnh đại diện').setInputFiles([]);

// Tạo file trong bộ nhớ (không cần file thật trên đĩa)
await page.getByLabel('Tệp').setInputFiles({
  name: 'data.txt',
  mimeType: 'text/plain',
  buffer: Buffer.from('nội dung file'),
});

const chooserPromise = page.waitForEvent('filechooser');
await page.getByRole('button', { name: 'Chọn ảnh' }).click();
const chooser = await chooserPromise;
await chooser.setFiles('fixtures/avatar.png');

const downloadPromise = page.waitForEvent('download');
await page.getByRole('button', { name: 'Tải báo cáo' }).click();
const download = await downloadPromise;

// Tên file gợi ý từ server
expect(download.suggestedFilename()).toBe('report.xlsx');

// Lưu ra đường dẫn mong muốn
await download.saveAs('downloads/report.xlsx');

// Hoặc đọc nội dung để kiểm tra
const path = await download.path();

// Chấp nhận confirm
page.on('dialog', async dialog => {
  expect(dialog.type()).toBe('confirm');
  expect(dialog.message()).toBe('Bạn chắc chắn muốn xóa?');
  await dialog.accept();
});
await page.getByRole('button', { name: 'Xóa' }).click();

// Nhập giá trị cho prompt
page.once('dialog', d => d.accept('Tên mới'));

// Từ chối
page.once('dialog', d => d.dismiss());

// Cách đơn giản
await page.getByText('Thẻ A').dragTo(page.getByTestId('cột-đích'));

// Kiểm soát chi tiết (cho UI nhạy cảm với từng bước chuột)
const source = page.getByText('Thẻ A');
await source.hover();
await page.mouse.down();
await page.getByTestId('cột-đích').hover();
await page.mouse.up();

await page.getByRole('button', { name: 'Tài khoản' }).hover();
await expect(page.getByRole('menu')).toBeVisible();
await page.getByRole('menuitem', { name: 'Cài đặt' }).click();

// Trong config: project mobile dùng device preset (đã thấy ở bài cấu hình)
{ name: 'mobile', use: { ...devices['Pixel 7'] } }

// Cấp quyền (vị trí, camera...) và set toạ độ
test.use({
  permissions: ['geolocation'],
  geolocation: { latitude: 10.762622, longitude: 106.660172 }, // TP.HCM
  locale: 'vi-VN',
  timezoneId: 'Asia/Ho_Chi_Minh',
});

await page.screenshot({ path: 'full.png', fullPage: true });
await page.getByRole('article').screenshot({ path: 'card.png' }); // chỉ một phần tử