Playwright Assertion 파해치기 - Typescript

Playwright에서 TypeScript를 사용할 때, Playwright의 내장 expect 라이브러리가 제공하는 다양한 assertion이 있습니다

 

 

기본 assertion

• 기본 값이나 조건을 확인

 

import { expect } from '@playwright/test';

// 기본 값에 대한 어설션
expect(5).toBe(5);
expect('Hello').toEqual('Hello');
expect(true).toBeTruthy();
expect(null).toBeNull();
expect([1, 2, 3]).toContain(2);

 

페이지 및 로케이터 assertion

• Playwright는 웹 요소에 대한 특화 (ex. 페이지내용, 가시성, 요소속성)

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

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

    // 로케이터 어설션
    const button = page.locator('button#submit');
    
    // 가시성 확인
    await expect(button).toBeVisible();
    
    // 요소 텍스트 확인
    await expect(button).toHaveText('Submit');
    
    // 요소가 보이지 않는지 확인
    await expect(button).not.toBeVisible();
    
    // 속성 값 확인
    await expect(button).toHaveAttribute('type', 'submit');
    
    // 요소가 활성화 또는 비활성화되어 있는지 확인
    await expect(button).toBeEnabled();
    await expect(button).toBeDisabled();
    
    // 요소 개수 확인
    const items = page.locator('.list-item');
    await expect(items).toHaveCount(3);

    // 특정 텍스트를 포함하는지 확인
    await expect(page.locator('h1')).toContainText('Welcome');
});

 

 

페이지 URL 및 제목에 대한 assertion

• Playwright는 현재 페이지의 URL과 제목 확인

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

test('URL 및 제목 어설션', async ({ page }) => {
    await page.goto('https://example.com');
    
    // 페이지 URL 확인
    await expect(page).toHaveURL('https://example.com/');
    
    // 페이지 제목 확인
    await expect(page).toHaveTitle('Example Domain');
});

 

네트워크 요청에 대한 assertion

• 특정 네트워크 이벤트(예: 특정 요청에 대한 응답)를 기다리는데 특화

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

test('네트워크 요청 어설션', async ({ page }) => {
    await page.goto('https://example.com');

    // 응답 대기
    const response = await page.waitForResponse('https://example.com/api/data');
    expect(response.status()).toBe(200);
});

 

심화

특정요소 기다려서 확인하기

 

특정 속성(attribute)이 특정 값으로 설정될 때까지 5초동안 기다리기 

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

test('특정 속성이 설정될 때까지 기다리기', async ({ page }) => {
    await page.goto('https://example.com');

    // 특정 요소의 속성이 특정 값이 될 때까지 기다리기 (최대 5초)
    const button = page.locator('button#submit');
    await expect(button).toHaveAttribute('data-status', 'loaded', { timeout: 5000 });
});

 

 

Playwright assertion 개요:

• toBe(value: any): 값이 일치하는지 확인
• toEqual(value: any): 객체 간의 깊은 동등성을 확인
• toBeTruthy(): 값이 참인지 확인
• toBeNull(): 값이 null인지 확인
• toContain(substring: string): 값에 특정 하위 문자열이 포함되어 있는지 확인
• toHaveText(text: string | RegExp): 요소에 특정 텍스트가 포함되어 있는지 확인.
• toHaveAttribute(attribute: string, value: string): 요소가 특정 속성을 가진 값이 있는지 확인
• toHaveURL(url: string | RegExp): 페이지의 URL이 일치하는지 확인
• toHaveTitle(title: string | RegExp): 페이지의 제목이 일치하는지 확인
• toBeVisible(): 요소가 보이는지 확인
• toBeHidden(): 요소가 숨겨져 있는지 확인
• toBeEnabled() / toBeDisabled(): 요소가 활성화/비활성화 상태인지 확인
• toBeChecked(): 체크박스나 라디오 버튼이 체크되었는지 확인
• toBeFocused(): 요소에 포커스가 있는지 확인
• toBeEditable(): 요소가 편집 가능한지 확인
• toHaveCount(count: number): 요소의 개수를 확인