본문 바로가기

분류 전체보기84

[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.
[Typescript] Array.isArray에 대한 고찰 Array.isArray 함수는 값이 배열인지 아닌지 판별하기 위해서 자주 사용된다. 요새는 타입스크립트로 코드를 많이 작성하는데, 이전까지는 전혀 문제가 없었으나 어느날 Array.isArray를 사용후 변수에 any[] 타입이 추가되는 문제가 발생하였다. 아래와 유사한 코드인데 if문을 통과한 후 list의 타입추론에 any[]가 추가되었다.const list: (string | TypeA)[] = [];if (Array.isArray(list)) { list.map((value) => { // ... });}const list: any[] | (string | TypeA)[] 그래서 그전까지는 별생각이 없이 사용했었던 isArray함수의 타입을 처음으로 찾아보게 되었다.function is.. 2025. 2. 20.
[React] Context API 성능개선 🎈 간단 설명Context API는 리액트 라이브러리에 내장 된 API로, 중첩된 컴포넌트에서 부모 컴포넌트의 상태를 자식 컴포넌트에게 좀 더 쉽고 간편하게 전달하기 위해서 제공된다. Context의 값이 변경되는 경우 동일한 Context를 사용하는 모든 컴포넌트에서 리렌더링 되는 문제가 존재한다.   👓 Context API 성능 개선의 오해구글에서 Context API의 성능 문제 해결로 검색해보면 React.memo 또는 useCallback, useMemo를 사용하면 성능 개선이 된다는 글이 많이 보인다. 그래서 나는 React.memo 또는 useCallback, useMemo 를 사용하면, 위에서 동일한 Context를 사용하는 경우에 대한 문제를 해결할 수 있을 거라고 오해했었다. 다음.. 2025. 2. 15.
[Playwright] Locator의 메서드 Playwright에서는 Locator를 대상으로 다양한 메서드를 제공한다. 메서드를 통해 특정 액션을 수행할 수도 있고 대상이 가진 정보를 가져올 수도 있다. 아래는 자주 사용될법한 메서드에 대해서만 정리하였다. 추가적인 다양한 메서드를 제공해주니 공식문서를 참조하자. 🎈 액션(이벤트) 액션  설명blur포커스를 해제한다.click한번 클릭한다.check/uncheck체크는 토글이 아니다. 체크와 언체크가 따로 존재한다.dblclick해당 액션은 click 이벤트를 두번과 더블클릭 이벤트 한번을 발생시킨다.(두 이벤트는 모두 발생시킨다.) - 사용자에의한 더블클릭도 동일하게 작동하기 때문dragTo대상을 타겟이 되는 Locator의 위치로 드래그한다.fill텍스트 입력가능한 요소에 텍스트를 입력한다... 2025. 2. 8.

티스토리툴바