선택자와 검증
요소를 대상으로 지정하고 상태를 검증합니다.
선택자와 검증은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
좋은 선택자가 안정적인 테스트를 만듭니다
요소를 찾는 방법에 따라 테스트의 견고성이 결정됩니다. CSS 클래스나 DOM 구조에 종속된 선택자는 디자인을 변경할 때마다 깨집니다. 의미 기반의 사용자 관점 로케이터는 사용자가 실제로 인식하는 내용을 반영하므로 리팩터링 후에도 유지됩니다.
getByRole: 권장 로케이터
getByRole은 접근성 역할과 접근 가능한 이름으로 요소를 찾습니다. 가장 견고한 로케이터이며 접근성 확인 역할도 합니다.
page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });getByLabel과 getByPlaceholder
양식 필드는 사용자가 식별하는 방식과 정확히 동일하게 연결된 레이블이나 플레이스홀더로 찾습니다.
page.getByLabel('Email address');
page.getByPlaceholder('Search products');getByText와 getByTestId
getByText는 표시된 텍스트와 일치하는 요소를 찾습니다. 의미 기반 핸들이 없으면 getByTestId를 대신 사용합니다. 이 로케이터는 의도적으로 추가한 data-testid 속성을 읽습니다.
page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">불안정한 CSS 선택자 피하기
그래도 page.locator('.css-selector')를 사용할 수는 있지만 최후의 수단으로 취급하세요. 클래스 이름과 중첩 구조는 자주 바뀌지만 역할과 레이블은 거의 바뀌지 않습니다.
// Fragile, avoid when possible:
page.locator('div.row > button.primary');웹 우선 검증
로케이터에 사용하는 Playwright의 expect는 웹 우선 방식입니다. 조건이 충족되거나 시간 제한이 초과될 때까지 자동으로 다시 시도합니다. 이것이 불안정하지 않은 검증의 핵심입니다.
await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();일반적인 검증 매처
매처는 요소나 페이지에 기대하는 상태를 설명합니다.
await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);목록의 개수 검증하기
반복되는 요소를 확인하려면 모든 요소를 찾고 개수를 검증합니다. 로케이터는 모든 요소와 일치하며, toHaveCount는 상태가 안정될 때까지 다시 시도합니다.
const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');부정 검증
.not을 사용해 항목을 삭제한 후처럼 무언가가 없거나 숨겨져 있는지 검증합니다.
await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();로케이터 필터링 및 연결하기
filter로 로케이터를 더 구체화하거나 상위 요소 내부로 범위를 제한하도록 연결하면 검증을 정확하게 유지할 수 있습니다.
const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();웹 우선 방식이 수동 폴링보다 나은 이유
웹 우선 검증은 오래된 스냅샷을 다시 읽는 것이 아니라 전체 표현식을 다시 시도합니다. 따라서 await expect(loc).toHaveText('Done')는 텍스트가 나타날 때까지 기다려 수동으로 작성한 대기에서 발생하는 경쟁 조건을 제거합니다.
빠른 확인
가장 견고한 로케이터를 선택하세요.
복습
의미 기반 로케이터인 getByRole, getByLabel, getByText를 우선 사용하고, 대체 수단으로 getByTestId를 사용합니다. 자동으로 다시 시도하는 웹 우선 매처(toBeVisible, toHaveText, toHaveCount, toHaveURL)로 검증하고, 정확성을 유지하려면 .not과 filter를 사용합니다.
자주 묻는 질문
“선택자와 검증” 강의는 무료인가요?
네 — “선택자와 검증” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“선택자와 검증”에서 뭘 배우나요?
요소를 대상으로 지정하고 상태를 검증합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“선택자와 검증” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.