테스트11 [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. [Playwright] 유의사항 🎈 테스트의 타이틀은 실행전 결정되어야 한다.테스트에 사용될 값을 랜덤하게 생성 하여 테스트해야하는 경우가 있었다. 그래서 랜덤값을 생성 후 파라미터 테스트로 진행하였다. 타이틀은 중복되면 안되기 때문에 랜덤값을 타이틀에 추가해보았다. 아래와 같이 랜덤하게 생성 된 값을 타이틀에서 활용하고 있다. 테스트 리포트에서 어떤 값으로 테스트했는지도 타이틀로 확인해보고 싶었기 때문에 괜찮은 선택이라 생각하였다.import { test, expect } from '@playwright/test'Array.from({ length: 10 }, () => Math.random()) .forEach((i) => { test(`${i} * ${i}`, async ({ page }) => { expect(.. 2025. 1. 31. 이전 1 2 다음
