playwright14 [Playwright] 클립 보드 허용 🎈 클립보드 테스트 하기 복사, 붙여넣기 등 클립 보드를 활용한 기능을 테스트해야하는 경우가 존재한다. 아래는 간단하게 복사 버튼을 누른 후 붙여넣기 버튼을 클릭했을 때 p 태그에 Hello world 텍스트가 보여지도록 하는 코드이다.더보기 복사 붙여넣기 브라우저를 통해서 실행해보면 정상적으로 Hello world가 출력되는 것을 확인할 수 있다.✨ 대부분의 브라우저에서는 보안상의 이유로 https 또는 localhost에서만 작동합니다. 이를 바탕으로 복사 버튼 클릭 후 붙여넣기 버튼을 클릭했을 때 텍스트가 정상적으로 보여지는지를 플레이라이트로 테스트 코드를 구성하였다.test('copy and paste', async ({ page }) => { await page.goto('htt.. 2025. 4. 6. [Playwright] 조건문, 반복문 사용 시 주의사항 🎈 조건문 사용 시 주의사항플레이라이트에서 boundingBox 함수는 요소의 좌표와 사이즈를 반환해준다. 이는 화면에 그려진 후 측정가능하기 때문에 await을 사용해야 한다.await page.locator('div').boundingBox(); boundingBox의 반환값을 보면 다음과 같다. 요소가 화면에 보이지 않는 경우 null을 반환하게 된다.Promise 이를 사용해서, 만약 width의 값이 1000이하 인지를 테스트해야한다고 해보자. boundingBox가 null일 수 있기 때문에 아래와 같이 조건문을 통해서 검증을 진행하도록 작성하였다.test('bounding box', async ({ page }) => { await page.goto('http://127.0.0.1:550.. 2025. 3. 30. [Playwright] 드래그 앤 드랍 🎈 드래그 앤 드랍드래그 앤 드랍의 경우 플레이라이트에서 함수로 제공해주고 있다.source.dragTo(target); 아래는 간단하게 소스로부터 타겟에게 드래그앤드랍하는 HTML 코드이다. 정상적으로 드랍이 된 경우 부모 div에게 reverse라는 클래스를 추가해주었다.더보기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/in.. 2025. 3. 24. [Playwright] 스텝 사용하기 🎈 스텝 사용하기test.step은 테스트 코드를 구조화하고 가독성을 높이는 기능이다. 테스트 코드의 특정 부분을 분리하고 타이틀을 달아 테스트 흐름을 명확하게 보여줍니다. 예시를 통해 스텝 사용 결과 차이를 확인해보자 아래는 select로 선택한 값과 input으로 입력한 값을 더한 결과를 p 태그에 보여주는 코드이다. 1 2 3 test.step을 사용해서 아래와 같이 코드를 구성하면 테스트 코드를 분리할 수 있다.import { expect, test } from '@playwright/test';test('Step Test', async ({ page }) => { await page.goto('http://127.0.0.1:5500/index.html');.. 2025. 3. 2. [Playwright] Select 테스트 🎈 Select Locator 탐색select 태그에 대한 Locator를 탐색할 때는 getByRole('combobox')를 사용하면 편하게 탐색할 수 있다. option을 선택할 때는 selectOption 함수를 사용한다. 1 2 3 test('Select', async ({ page }) => { await page.goto('http://127.0.0.1:5500/index.html'); await page.getByRole('combobox').selectOption('2'); await expect(page.getByRole('combobox')).toHaveValue('2');}); 📯 Option의 순서 확인일반적인 경우는 아니지만, Option을 동적으로.. 2025. 3. 1. 7. Playwright 다운로드 테스트 다운로드 파일이 정상적으로 다운받아지를 테스트하고 싶은 경우가 있다. 플레이라이트에서는 다운로드에 대한 테스트 도한 제공해준다. 🛒 waitForEvent 사용 page.waitForEvent('download')를 통해서 다운로드가 발생하는지를 캐치할 수 있다. 다운로드 test('test', async ({ page }) => { await page.goto('http://127.0.0.1:5501/index.html'); const downloadPromise = page.waitForEvent('download'); await page.getByText('다운로드').click(); const download = await downloadPromise; expect(do.. 2025. 2. 23. 이전 1 2 3 다음
