🎈 드래그 앤 드랍
드래그 앤 드랍의 경우 플레이라이트에서 함수로 제공해주고 있다.
source.dragTo(target);
아래는 간단하게 소스로부터 타겟에게 드래그앤드랍하는 HTML 코드이다. 정상적으로 드랍이 된 경우 부모 div에게 reverse라는 클래스를 추가해주었다.
더보기
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
flex-direction: column;
}
.container.reverse {
flex-direction: column-reverse;
}
.container div {
width: 100px;
height: 100px;
border: 1px solid #111;
}
.div1 {
background: red;
}
.div2 {
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div id="source" class="div1" draggable="true"></div>
<div id="target" class="div2"></div>
</div>
<script>
document.querySelector('.div2').addEventListener('dragover', function(e) {
e.preventDefault();
});
document.querySelector('.div2').addEventListener('drop', function(e) {
e.preventDefault();
document.querySelector('.container').classList.add('reverse');
});
</script>
</body>
</html>
드래그 앤 드랍 후 div에 reverse 클래스가 부여되는지를 테스트코드로 작성해보았다. dragTo 함수를 통해 간단하게 작성할 수 있다.
import { expect, test } from '@playwright/test';
test('Drag And Drop', async ({ page }) => {
await page.goto('http://127.0.0.1:5500/index.html');
const source = page.locator('#source');
const target = page.locator('#target');
await source.dragTo(target);
await expect(page.locator('.reverse')).toBeVisible();
});
📯 드래그
dragTo는 드래그 앤 드랍을 사용할 때 사용할 수 있는 함수이다. 드랍을 사용하지 않고 드래그만 하는 경우에는 사용할 수 없다.
dragTo보다 좀더 정교하게 컨트롤하고 싶거나 또는 드래그만 하고 싶은 경우에는 마우스 다운, 이동, 업 이벤트를 모두 수동으로 동작시켜주어야 한다.
await page.mouse.down();
await page.mouse.move();
await page.mouse.up();
✨ down 함수에는 좌표를 전달할 수 없다. 즉, 마우스를 먼저 이동시킨 후 다운 이벤트를 트리거만 할 수 있다.
그래서 마우스를 먼저 이동시켜주어야 하는데, 마우스를 이동시킬때는 2가지 방법을 사용할 수 있다.
- 메인 프레임의 뷰포트를 기준으로 좌표값만큼 마우스를 이동
- 특정 Locator를 대상으로해서 이동
첫번째 방법은 page.mouse.move() 를 사용한다. down은 좌표를 전달할 수 없지만, move는 이동할 위치를 전달할 수 있다.
await page.mouse.move(x좌표, y좌표);
두번째 방법은 locator.hover() 를 사용한다. 원하는 대상으로 좌표계산없이 좀 더 쉽게 이동할 수 있다.
page.locator('div1').hover();
이를 통해서 dragTo를 사용하지 않고 드래그 앤 드랍을 수동으로 작동해보자. 동일하게 테스트에 통과하는것을 확인할 수 있다.
test('Drag And Drop', async ({ page }) => {
await page.goto('http://127.0.0.1:5500/index.html');
await page.locator('.div1').hover();
await page.mouse.down();
await page.locator('.div2').hover();
await page.mouse.up();
await expect(page.locator('.reverse')).toBeVisible();
});
✨ hover함수를 통해 직접 좌표를 계산할 필요 없이 간단하게 dragTo 기능을 수동으로 구현할 수 있다.
✨ 만약 드랍을 사용하지 않는다면 move()를 통해서 특정 좌표로 이동하면 된다.
'테스트 > Playwright' 카테고리의 다른 글
| [Playwright] 클립 보드 허용 (0) | 2025.04.06 |
|---|---|
| [Playwright] 조건문, 반복문 사용 시 주의사항 (0) | 2025.03.30 |
| [Playwright] 스텝 사용하기 (0) | 2025.03.02 |
| [Playwright] Select 테스트 (0) | 2025.03.01 |
| [Playwright] Locator의 메서드 (0) | 2025.02.08 |
