Playwright 자동화 테스트에서 인증 관리하기 🔐

Playwright를 활용한 효율적인 테스트 자동화: 인증 관리와 Page Object Model 구현 🚀

안녕하세요! 오늘은 Playwright를 사용한 E2E 테스트에서 인증(로그인) 처리를 효율적으로 관리하는 방법과 Page Object Model 패턴을 활용한 구현에 대해 알아보겠습니다.

구현 코드

1. Auth 클래스 (인증 관리)

import { Page } from "@playwright/test";
import path from "path";
import fs from "fs";
import { LoginPage } from "../pages/LoginPage";

export class Auth {
  private static authFile = path.join(__dirname, "../../auth.json");

  static async ensureLogin(page: Page) {
    if (fs.existsSync(this.authFile)) {
      try {
        const storageState = JSON.parse(
          fs.readFileSync(this.authFile, "utf-8")
        );
        if (storageState.cookies && Array.isArray(storageState.cookies)) {
          await page.context().addCookies(storageState.cookies);
        } else {
          throw new Error("유효하지 않은 쿠키 데이터");
        }
      } catch (error) {
        console.log("인증 파일 읽기 실패:", error);
        fs.unlinkSync(this.authFile);
        await this.performLogin(page);
      }
    } else {
      await this.performLogin(page);
    }
  }

  private static async performLogin(page: Page) {
    console.log("로그인 수행 중...");
    const loginPage = new LoginPage(page);
    await loginPage.navigate();
    await loginPage.login("****", "****"); // 보안상 마스킹
    await page.context().storageState({ path: this.authFile });
    console.log("로그인 완료!");
  }
}

2. LoginPage 클래스 (Page Object Model)

import { Page } from "@playwright/test";

export class LoginPage {
  private page: Page;
  readonly loginUrl = "Url"; // 보안상 URL 마스킹

  constructor(page: Page) {
    this.page = page;
  }

  async navigate() {
    await this.page.goto(this.loginUrl);
  }

  async login(username: string, password: string) {
    await this.page.getByLabel("아이디", { exact: true }).fill(username);
    await this.page.getByLabel("비밀번호").fill(password);
    await this.page.getByRole("button", { name: "로그인" }).click();
  }
}

주요 기능 설명

Auth 클래스의 핵심 기능

1. 세션 관리

   • 로그인 상태를 auth.json 파일에 저장
   • 저장된 쿠키를 재사용하여 불필요한 로그인 방지

2. 자동 로그인 처리

   • 저장된 세션이 없거나 유효하지 않은 경우 자동 로그인
   • 예외 상황 처리 및 에러 로깅

LoginPage 클래스의 특징

1. Page Object Model 패턴

   • 페이지 관련 동작을 캡슐화
   • 재사용 가능한 컴포넌트로 구현

2. Playwright 선택자 활용

   • getByLabel, getByRole 등 접근성을 고려한 선택자 사용
   • 유지보수가 용이한 요소 선택 방식

사용 방법

// 테스트 코드에서 사용 예시
test('마이 페이지 테스트', async ({ page }) => {
    await Auth.ensureLogin(page);
    // 이후 테스트 로직 수행
});

구현의 장점

1. 효율성

   • 세션 재사용으로 테스트 실행 시간 단축
   • 불필요한 로그인 프로세스 최소화

2. 유지보수성

   • 로그인 로직 중앙 집중화
   • UI 변경 시 수정 포인트 최소화

3. 안정성

   • 체계적인 예외 처리
   • 세션 관리 자동화

4. 보안

   • 민감 정보 분리 관리
   • 환경별 설정 가능

주의사항 및 베스트 프랙티스

1. 보안

   • auth.json 파일은 .gitignore에 추가
   • 민감 정보는 환경 변수로 관리

2. 세션 관리

   • 정기적인 세션 갱신 고려
   • 테스트 환경별 설정 분리

3. 코드 관리

   • 일관된 에러 처리 방식 적용
   • 명확한 로깅 메시지 사용

개선 가능한 부분

1. 에러 처리 강화

   • 더 상세한 예외 처리
   • 재시도 메커니즘 구현

2. 검증 로직 추가

   • 로그인 성공 여부 확인
   • 세션 유효성 검증

3. 설정 관리

   • 환경 변수 활용 확대
   • 설정 파일 분리

이러한 구조화된 접근 방식을 통해 테스트 자동화의 안정성과 유지보수성을 크게 향상시킬 수 있습니다. Playwright의 강력한 기능과 현대적인 테스트 패턴을 결합하여 효율적인 테스트 자동화를 구현해보세요! 🎯

#Playwright #테스트자동화 #PageObjectModel #TypeScript #QA #자동화테스트