윤가영

문서 구성 (9개 섹션)

Locator 우선순위

1. getByRole()      ← 최우선 (시맨틱)
2. getByText()
3. getByLabel()
4. getByPlaceholder()
5. getByAltText()
6. getByTitle()
7. getByTestId()    ← 최후 수단
━━━━━━━━━━━━━━━━━━━━
✗ CSS selector      ← 금지
✗ ID selector       ← 금지
✗ XPath             ← 금지

3계층 아키텍처

애니메이션 안정화 패턴

바텀시트 열림
  → aria-busy="true" 감지
  → height 안정화 대기 (CSS transition 완료)
  → aria-busy="false" 확인
  → 버튼 클릭 가능

구현 시나리오

SignaturePage 대규모 리팩토링

776줄 핵심 POM을 CLAUDE.md 규칙 기반으로 4단계 전면 리팩토링. 리팩토링 결과 CLAUDE.md 모범 예시로 지정됨.

시각적 회귀 테스트 도입

PDF 렌더링 검증 수단이 없어 수동 비교에 의존하던 문제를 해결. PDF 스냅샷 캡처 → 기준 스냅샷 비교, 필드 위치 스크린샷 비교를 CI/CD 품질 게이트에 통합.

링크서명/내부결재 E2E 커버리지 확대

링크서명 플로우 전면 개선, 내부결재 비동기 대기 로직으로 flaky 해소, 외부 서버 의존을 로컬 파일 업로드로 전환하여 CI 안정성 확보.

테스트 시나리오

* 보안 정책상 실제 코드 대신 동일 패턴의 구현 예시입니다

PaymentPage POM

export class PaymentPage {
  constructor(private page: Page) {}

  async selectOption(optionName: string) {
    await this.page.click(`[data-option="${optionName}"]`);
  }

  async verifyPrice(expected: number) {
    const price = await this.page
      .locator('.total-price')
      .textContent();
    expect(Number(price?.replace(/[^0-9]/g, '')))
      .toBe(expected);
  }

  async proceedPayment() {
    await this.page.click('[data-testid="pay-button"]');
    await this.page.waitForURL('**/payment/complete');
  }
}

SMS 인증 자동화

async function getVerificationCode(phone: string) {
  const response = await request.get(
    `${TEST_API}/sms/latest?phone=${phone}`
  );
  const { code } = await response.json();
  return code;
}

// 테스트에서 사용
const code = await getVerificationCode('01012345678');
await page.fill('[data-testid="sms-code"]', code);
await page.click('[data-testid="verify-btn"]');

CI/CD 파이프라인

name: E2E Tests
on:
  pull_request:
    branches: [main]

jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: test-results
          path: test-results/

실제 동작 화면

기술적 도전

시스템 아키텍처

실제 동작 화면

* 보안 정책상 실제 코드 대신 동일 패턴의 구현 예시입니다

Lambda A: 이벤트 라우터

exports.handler = async (event) => {
  const body = JSON.parse(event.body);

  // Slack URL 검증
  if (body.type === 'url_verification') {
    return { statusCode: 200, body: body.challenge };
  }

  // 중복 이벤트 필터링
  const eventId = body.event_id;
  const isDuplicate = await checkDuplicate(eventId);
  if (isDuplicate) return { statusCode: 200 };

  const eventType = body.event?.type;

  if (eventType === 'message' && !body.event.thread_ts) {
    // 새 메시지 → 이슈 생성
    await invokeLambda('issue-creator', body.event);
  } else if (eventType === 'message' && body.event.thread_ts) {
    // 스레드 댓글 → 댓글 동기화
    await invokeLambda('comment-sync', body.event);
  }

  return { statusCode: 200 };
};

기술적 해결책

시스템 아키텍처

실제 동작 화면

* 보안 정책상 실제 코드 대신 동일 패턴의 구현 예시입니다

핵심 코드

def get_deploy_issues(fix_version: str) -> list:
    jql = (
        f'fixVersion = "{fix_version}" '
        f'AND status in (Done, "In Review") '
        f'ORDER BY team ASC'
    )
    issues = jira.search_issues(jql, maxResults=100)
    return categorize_by_team(issues)

기술적 해결책

실제 QA 활동 화면

주요 활동

성과 지표

테스트 전략

반복 이터레이션

성과

* 보안 정책상 실제 코드 대신 동일 패턴의 구현 예시입니다

StockDetail POM

class StockDetailPage {
  constructor(page) {
    this.page = page;
  }

  async navigateTo(stockCode) {
    await this.page.goto(
      `/stock/${stockCode}`
    );
    await this.page.waitForSelector(
      '[data-testid="stock-price"]'
    );
  }

  async getCurrentPrice() {
    return await this.page
      .locator('[data-testid="stock-price"]')
      .textContent();
  }

  async clickBuyButton() {
    await this.page.click(
      '[data-testid="buy-button"]'
    );
    await this.page.waitForSelector(
      '.order-modal'
    );
  }

  async placeOrder(quantity) {
    await this.page.fill(
      '[data-testid="quantity"]',
      String(quantity)
    );
    await this.page.click(
      '[data-testid="confirm-order"]'
    );
  }
}

Dockerfile

FROM mcr.microsoft.com/playwright:v1.40.0

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .

# 비디오 증적 저장 디렉토리
RUN mkdir -p /app/test-results/videos

CMD ["npx", "playwright", "test", \
     "--reporter=html,json"]

FastAPI 테스트 서버

from fastapi import FastAPI
from datetime import datetime

app = FastAPI()

@app.get("/api/test/stock/{code}")
async def get_test_stock(code: str):
    """테스트용 주식 데이터 반환"""
    return {
        "code": code,
        "price": 50000,
        "change": 2.5,
        "timestamp": datetime.now().isoformat()
    }

@app.post("/api/test/order")
async def create_test_order(order: dict):
    """테스트 주문 생성 (실제 체결 없음)"""
    return {
        "orderId": f"TEST-{datetime.now().timestamp()}",
        "status": "FILLED",
        **order
    }

테스트 시나리오 (12개 핵심 플로우)