《Playwright 学习笔记》
Actions 交互动作
Text Input 文本输入;
locator.fill()
: 聚焦元素，并出发带有输入文本的input事件。
适用于<input>、<textarea>和[contenteditable]元素。
//Text input
await page.getByRole('textbox').fill('Peter');
//Date input
await page.getByLabel('Birth date').fill('2020-02-02');
//Time input
await page.getByLabel('Appointment time').fill('13:15');
//Local datetime input
await page.getByLabel('Local time').fill('2020-03-02T05:15');
Checkboxes and radio buttons 复选框和单选按钮
locator.check()
: 选中或取消复选框/单选按钮；
可用于input[type=checkbox]、input[type=raio]和[role=checkbox]元素。
//check the checkbox 勾选复选框
await page.getByLabel('I agree to the terms above').check();
//Assert the checked state 断言复选框状态
expect(page.getByLabel('Subscribe to newsletter')).toBeChecked();
//Select the radio button
await page.getByLabel('XL').check();
Select options 选择器
locator.selectOption()
: 选取选择器中一个或多个选项，可以指定value和label进行选择。
//根据value或label匹配，进行单选
await page.getByLabel('Choose a color').selectOption('blue');
//label匹配，进行单选
await page.getByLabel('Choose a color').selectOption({label:'Blue'});
//多选
await page.getByLabel('Choose multiple colors').selectOption(['red','green','blue']);
鼠标点击
locator.click()
: 执行一次点击动作
//普通点击
await page.getByRole('button').click();
//双击
await page.getByText('Item').dbclick();
//右键点击
await page.getByText('Item').click({button:'right'});
//Shift+点击
await page.getByText('Item').click({modifiers:['Shift']});
//鼠标悬浮
await page.getByText('Item').hover();
//点击左上角
await page.getByText('Item').click({position:{x:0,y:0}});
强制点击
: 使用强制点击来透过覆盖层点击到下层元素。
await page.getByRole('button').click({force:true});
编程触发点击
: 如果你不考虑通过模拟点击，你可以直接使用locator.dispatchEvent()来直接触发元素的点击事件。
await page.getByRole('button').dispatchEvent('click');
逐字输入
locator.pressSequentially()
: 模拟键盘真实逐字输入文字。
//逐字逐字输入
await page.locator('#area').pressSequentially('Hello World!');
键盘事件
locator.press()
: 聚焦指定元素，并输入键盘字符。
//回车键
await page.getByText('Submit').press('Enter');
//Ctrl+右
await page.getByRole('textbox').press('Control+ArrowRight');
//$符号
await page.getByRole('textbox').press('$');
文件上传
locator.setInputFiles()
: 只能应用与filetype的input元素；
传递空数组的话，会清空选择文件。
//选取单个文件
await page.getByLabel('Upload file').setInputFiles(path.join(__dirname, 'myfile.pdf'));
//选取多个文件
await page.getByLabel('Upload file').setInputFiles([
path.join(__dirname,'file1.txt'),
path.join(__dirname,'file2.txt'),
]);
//清空选择文件
await page.getByLabel('Upload file').setInputFiles([]);
//从内存缓冲区上传
await page.getByLabel('Upload file').setInputFiles({
name:'file.txt',
mimeType:'text/plain',
buffer:Buffer.from('this is test')
});
如果上传文件的元素不在当前页面（需要后续动态加载），你可以使用page.on('filechooser')事件或基于你交互动作之后的异步等待方法。
//点击按钮前先等待文件选择器加载
const fileChooserPromise = page.waitForEvent('filechooser');
await page.getByLabel('Upload file').click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles(path.join(__dirname, 'myfile.pdf'));
获取焦点
locator.focus()
await page.getByLabel('Password').focus();
拖动与放置
locator.dragTo()
: 悬浮到被拖动的元素；
按下鼠标左键；
移动鼠标到目的元素；
放开鼠标左键。
await page.locator('#item-to-be-dragged').dragTo(page.locator('#item-to-drop-at'));
