[240106] TIL

playwright 기본 사용 방법

코드 실행

 yarn playwright test stock.spec.ts

[Installation

Playwright](https://playwright.dev/docs/intro)

Action

Navigation

await page.goto("http://playwright.dev/");

[Page

Playwright](https://playwright.dev/docs/api/class-page#page-goto)

• 기본 리소스 응답을 반환

Interactions

// Create a locator
const getStarted = page.getByRole("link", { name: "Get started" });

// Click it
await getStarted.click();

Action	Description
locator.check()	Check the input checkbox
locator.click()	Click the element
locator.uncheck()	Uncheck the input checkbox
locator.hover()	Hover mouse over the element
locator.fill()	Fill the form field, input text
locator.focus()	Focus the element
locator.press()	Press single key
locator.setInputFiles()	Pick files to upload
locator.selectOption()	Select option in the drop down

locator

// 1. 기본적인 locator 사용법
test("locator 예제", async ({ page }) => {
  // text로 찾기
  page.locator("text=로그인");

  // CSS 선택자로 찾기
  page.locator(".login-button");
  page.locator("#username");

  // role로 찾기 (접근성 관련)
  page.locator("role=button");

  // XPath로 찾기
  page.locator("xpath=//button");
});

• 체이닝 가능
• 다양한 방식으로 요소 찾기 가능

Assertions

// Playwright 테스트 예제
test("로그인 페이지 테스트", async ({ page }) => {
  await page.goto("https://example.com/login");

  // assertions 예시들:

  // 1. 제목이 "로그인"이어야 한다
  await expect(page.locator("h1")).toHaveText("로그인");

  // 2. 로그인 버튼이 페이지에 존재해야 한다
  await expect(page.locator('button[type="submit"]')).toBeVisible();

  // 3. 이메일 입력란이 비어있어야 한다
  await expect(page.locator('input[type="email"]')).toBeEmpty();
});

Assertion	Description
expect(locator).toBeChecked()	Checkbox is checked
expect(locator).toBeEnabled()	Control is enabled
expect(locator).toBeVisible()	Element is visible
expect(locator).toContainText()	Element contains text
expect(locator).toHaveAttribute()	Element has attribute
expect(locator).toHaveCount()	List of elements has given length
expect(locator).toHaveText()	Element matches text
expect(locator).toHaveValue()	Input element has value
expect(page).toHaveTitle()	Page has title
expect(page).toHaveURL()	Page has URL

Test lsolation

각 테스트가 서로 영향을 주지 않고 완전히 독립적으로 실행되는 것을 의미

test.describe("로그인 상태 테스트", () => {
  test("로그인 테스트", async ({ page }) => {
    await page.goto("/login");
    await page.fill('input[name="email"]', "test@example.com");
    await page.fill('input[name="password"]', "password");
    await page.click('button[type="submit"]');
  });

  test("비로그인 상태 테스트", async ({ page }) => {
    await page.goto("/profile");
    // 이전 테스트에서 로그인했지만
    // 이 테스트는 새로운 컨텍스트에서 시작되므로
    // 로그인되지 않은 상태입니다
    await expect(page.locator(".login-required")).toBeVisible();
  });
});

→ 각 격리된 환경에서 테스트

test.describe

// 🙅‍♂️ describe 없이 작성
test("로그인 성공", async ({ page }) => {
  /* ... */
});
test("로그인 실패", async ({ page }) => {
  /* ... */
});
test("회원가입 성공", async ({ page }) => {
  /* ... */
});
test("회원가입 실패", async ({ page }) => {
  /* ... */
});

// 👍 describe로 구조화
test.describe("로그인", () => {
  test("성공", async ({ page }) => {
    /* ... */
  });
  test("실패", async ({ page }) => {
    /* ... */
  });
});

test.describe("회원가입", () => {
  test("성공", async ({ page }) => {
    /* ... */
  });
  test("실패", async ({ page }) => {
    /* ... */
  });
});

→ 특별한 기능보다는 가독성과 유지보수를 위한 구조화 도구

Using Test Hooks

테스트 전/후에 특정 코드를 실행할 수 있게 해주는 기능

테스트 설정이나 정리 작업에 사용

import { test, expect } from "@playwright/test";

test.describe("쇼핑몰 테스트", () => {
  // 1. beforeAll: 모든 테스트 시작 전 한 번만 실행
  test.beforeAll(async () => {
    // 예: 테스트 데이터 세팅
    await setupTestDatabase();
  });

  // 2. beforeEach: 각 테스트 시작 전마다 실행
  test.beforeEach(async ({ page }) => {
    // 예: 로그인 상태로 시작
    await page.goto("/login");
    await page.fill("#email", "test@example.com");
    await page.fill("#password", "password");
    await page.click('button[type="submit"]');
  });

  // 테스트 케이스들
  test("장바구니 추가", async ({ page }) => {
    // 이미 로그인된 상태에서 시작
    await page.goto("/products");
    await page.click(".add-to-cart");
  });

  // 3. afterEach: 각 테스트 종료 후마다 실행
  test.afterEach(async ({ page }) => {
    // 예: 장바구니 비우기
    await page.goto("/cart");
    await page.click(".clear-cart");
  });

  // 4. afterAll: 모든 테스트 종료 후 한 번만 실행
  test.afterAll(async () => {
    // 예: 테스트 데이터 정리
    await cleanupTestDatabase();
  });
});

소데클 프로젝트

• 자세한 내용 노션에서 확인

기타

• 요가
• 말해보카