🎈 클립보드 테스트 하기
복사, 붙여넣기 등 클립 보드를 활용한 기능을 테스트해야하는 경우가 존재한다.
아래는 간단하게 복사 버튼을 누른 후 붙여넣기 버튼을 클릭했을 때 p 태그에 Hello world 텍스트가 보여지도록 하는 코드이다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
li {
width: 500px;
display: none;
}
</style>
<title>Document</title>
</head>
<body>
<button id="copy">복사</button>
<button id="paste">붙여넣기</button>
<p></p>
<script>
document.getElementById('copy').addEventListener('click', function() {
navigator.clipboard.writeText('Hello world');
});
document.getElementById('paste').addEventListener('click', function() {
navigator.clipboard.readText().then(function(text) {
document.querySelector('p').innerText = text;
});
});
</script>
</body>
</html>
브라우저를 통해서 실행해보면 정상적으로 Hello world가 출력되는 것을 확인할 수 있다.
✨ 대부분의 브라우저에서는 보안상의 이유로 https 또는 localhost에서만 작동합니다.
이를 바탕으로 복사 버튼 클릭 후 붙여넣기 버튼을 클릭했을 때 텍스트가 정상적으로 보여지는지를 플레이라이트로 테스트 코드를 구성하였다.
test('copy and paste', async ({ page }) => {
await page.goto('http://127.0.0.1:5500/index.html');
await page.getByText('복사').click();
await page.getByText('붙여넣기').click();
await expect(page.getByText('Hello world')).toBeVisible();
});
테스트 코드를 실행 하기 전, 실제 html 화면상에서 버튼을 클릭해보면 정상적으로 작동하는 것을 확인하였기 때문에 테스트 코드에서도 정상 작동할 것이라 생각하였다.
하지만 테스트 코드를 실행해보면 정상적으로 출력되지 않는 것을 확인할 수 있다.
📯 클립보드 사용 허용하기
보안상의 이유로 브라우저에서는 여러가지 기능에 대한 접근 권한을 제한하고 있다. 클립보드에 대한 권한 또한 마찬가지로 제한이 되고 있다.
그래서 클립보드에 대한 권한을 허용하지 않으면 기본적으로는 차단되어 있기 때문에 위의 테스트 코드가 실패하게 된다.
권한을 부여하는 것은 간단하다. 아래와 같이 클립보드의 읽기, 쓰기에 대한 권한을 추가하면 된다.
test('Permissions', ({ context }) => {
await context.grantPermissions(['clipboard-read', 'clipboard-write']);
});
아래의 주소에서는 브라우저의 허용 가능한 권한을 확인할 수 있다.
https://playwright.dev/docs/api/class-browsercontext#browser-context-grant-permissions
'테스트 > Playwright' 카테고리의 다른 글
| [Playwright] 조건문, 반복문 사용 시 주의사항 (0) | 2025.03.30 |
|---|---|
| [Playwright] 드래그 앤 드랍 (0) | 2025.03.24 |
| [Playwright] 스텝 사용하기 (0) | 2025.03.02 |
| [Playwright] Select 테스트 (0) | 2025.03.01 |
| [Playwright] Locator의 메서드 (0) | 2025.02.08 |
