《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'));