[ Playwright ] Playwright 액션 완전 정리: 폼 입력부터 드래그 앤 드롭까지

Playwright는 단순히 “클릭하고 끝내는 테스트 도구”가 아니다.
실제 사용자가 웹사이트를 이용하는 방식 그대로, 텍스트 입력, 버튼 클릭, 파일 업로드, 드래그 앤 드롭까지 정교하게 시뮬레이션할 수 있다.

이번 글에서는 Playwright에서 제공하는 다양한 액션 메서드를 소개하며, 실무에서 어떻게 활용할 수 있는지를 설명한다.

---

텍스트 입력

텍스트 입력은 locator.fill() 메서드로 간단하게 처리할 수 있다.
이 메서드는 해당 요소에 포커스를 주고, 텍스트를 입력하는 이벤트를 자동으로 트리거한다.

await page.getByRole('textbox').fill('Peter');

 

날짜, 시간 등의 입력도 동일한 방식으로 가능하다:

 

await page.getByLabel('Birth date').fill('2020-02-02'); 
await page.getByLabel('Appointment time').fill('13:15'); 
await page.getByLabel('Local time').fill('2020-03-02T05:15');

 

🧠 Cypress에서는 cy.get().type()을 주로 사용하지만, Playwright의 fill()은 더 자연스럽고 단순한 사용법을 제공한다.

---

체크박스와 라디오 버튼

체크박스나 라디오 버튼은 locator.check() 또는 locator.uncheck()로 처리한다.

 

await page.getByLabel('I agree to the terms above').check(); 
expect(page.getByLabel('Subscribe to newsletter')).toBeChecked(); 
await page.getByLabel('XL').check();

 

선택 여부를 검증하는 것도 쉽게 할 수 있다.

---

<select> 옵션 선택

selectOption() 메서드를 사용하면 <select> 태그의 옵션을 선택할 수 있다.
옵션의 값(value) 또는 레이블(label)을 기준으로 선택 가능하며, 다중 선택도 지원한다.

await page.getByLabel('Choose a color').selectOption('blue'); 
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' }); 
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

---

마우스 클릭 및 포인터 이벤트

Playwright의 click() 메서드는 사람의 클릭과 거의 동일하게 동작한다.
이 외에도 더블클릭, 우클릭, 키보드 조합 클릭 등 다양한 변형이 가능하다.

 

await page.getByRole('button').click(); // 기본 클릭 
await page.getByText('Item').dblclick(); // 더블클릭 
await page.getByText('Item').click({ button: 'right' }); // 우클릭 
await page.getByText('Item').click({ modifiers: ['Shift'] }); // Shift + 클릭

 

macOS에서의 Meta + Click (Windows/Linux의 Ctrl + Click)도 다음과 같이 처리한다.

 

await page.getByText('Item').click({ modifiers: ['ControlOrMeta'] });

 

클릭 위치나 스크롤 등의 조건도 자동으로 처리된다.
필요 시 강제로 클릭을 실행할 수도 있다.

await page.getByRole('button').click({ force: true }); // 강제 클릭 
await page.getByRole('button').dispatchEvent('click'); // 코드 상 클릭 이벤트 트리거

 

---

키 입력

기본적으로는 fill()을 사용하지만,
특정 키 조합이나 키 입력 이벤트를 테스트하고자 할 때는 press() 또는 pressSequentially()를 사용할 수 있다.

await page.getByRole('textbox').press('Enter'); // Enter 키 입력 
await page.getByRole('textbox').press('Control+ArrowRight'); // 단축키 입력 
await page.locator('#name').press('Shift+A'); // 대문자 A 입력

 

여러 글자를 하나씩 입력하려면:

await page.locator('#area').pressSequentially('Hello World!');

---

파일 업로드

setInputFiles() 메서드를 사용하면 <input type="file"> 요소에 파일을 첨부할 수 있다.
단일 파일, 다중 파일, 디렉토리, 메모리 버퍼 등 다양한 방식으로 업로드 가능하다.

await page.getByLabel('Upload file').setInputFiles('myfile.pdf'); 
await page.getByLabel('Upload files').setInputFiles([ 'file1.txt', '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.waitForEvent('filechooser')를 사용할 수 있다.

---

포커스 처리

동적 페이지에서 포커스를 이용해 로직이 실행되는 경우, focus()를 통해 해당 요소에 포커스를 줄 수 있다.

 

await page.getByLabel('Password').focus();

---

드래그 앤 드롭

Playwright는 dragTo() 메서드로 드래그 앤 드롭도 간단하게 처리할 수 있다.

 

await page.locator('#item-to-be-dragged').dragTo(page.locator('#item-to-drop-at'));

 

더 정교한 제어가 필요할 경우에는 mouse.down(), mouse.move(), mouse.up() 같은 저수준 API를 사용할 수 있다.

await page.locator('#drag').hover(); 
await page.mouse.down(); 
await page.locator('#drop').hover(); 
await page.mouse.up();

⚠️ dragover 이벤트를 강제로 발생시키려면 hover()를 두 번 호출해야 할 수도 있다.

---

스크롤

Playwright는 대부분의 경우 자동으로 요소가 보이도록 스크롤을 처리한다.
하지만 무한 스크롤 리스트처럼 수동 조작이 필요한 경우 다음과 같이 처리할 수 있다.

await page.getByText('Footer text').scrollIntoViewIfNeeded(); // 요소가 보일 때까지 스크롤

 

보다 정밀하게 제어하고 싶다면 다음 방법도 있다.

await page.getByTestId('scrolling-container').hover(); 
await page.mouse.wheel(0, 100); // 마우스 휠로 스크롤 
await page.getByTestId('scrolling-container').evaluate(e => e.scrollTop += 100); // 코드로 스크롤

---

마무리

Playwright의 액션 API는 단순히 클릭이나 입력에 그치지 않는다.
실제 사용자가 웹사이트를 사용하는 방식 그대로를 시뮬레이션할 수 있게 설계되어 있다.

• fill(), click()으로 직관적인 기본 동작
• press(), hover(), setInputFiles() 등 세밀한 제어
• drag & drop, file upload, scroll 등 복잡한 인터랙션도 간단하게 처리
• Cypress보다 풍부하고 유연한 액션 메서드 제공

 

---

 

 

공식 문서

 

https://playwright.dev/docs/input