Fixtures

Fixtures는 테스트를 위한 환경을 설정 또는 테스트에 필요한 것을 제공하기 위해 해야 할 것들을 셋업(setup) 할때 사용.

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

export const test = base.extend<{ loggedInPage: Page }>({

    loggedInPage: async ({ page }, use) => {

        // 테스트 전 해야 할 것 (Ex. login)
        await page.goto('/login', { waitUntil: 'networkidle', timeout: 120000 });
        await page.waitForTimeout(6000);
        await page.getByPlaceholder('이메일 입력').fill('test@email.com');
        await page.locator("[type=submit]").click();
        await expect(page).toHaveURL('/dashboard');
        
        // 테스트에 로그인 된 페이지 제공
        await use(page);
        
        // use가 끝나고 와서 로그아웃 또는 테스트 종료 시 해야할 업무들
        await page.context().clearCookies();

    }
});

 

가령 위에 예제로 내가 해둔 페이지로 

Fixutres를 만들었는데,  로그인 된 페이지를 테스트 마다 써야 하다보니, login 페이지에 접속해서 로그인을 한다. 

그리고 테스트가 끝나면 쿠키를 clear 하는데 뭐 이건 로그아웃 버튼 눌러도 되지 않을까..

 

여튼 가져다 쓸때는 loggedInPage를 Param으로 전달해서 해당 페이지에 goto 또는 locator 등 을 사용해서 테스트를 하면 된다.

import { test } from '../../../fixtures/login';
import { Page, expect } from '@playwright/test';

test('Dashboard', async ({ loggedInPage }: { loggedInPage: Page }) => {
    try {
        await loggedInPage.goto('/', { waitUntil: 'networkidle', timeout: 120000 });
        await expect(loggedInPage.getByText('abc@email.com', { exact: true })).toBeVisible();

    } catch (error) {
        console.error('페이지 접속 실패:', error);
    }
});

 

playwright test:ui를 통해, 확인하면 Before Hooks라고해서 테스트 전에 실행되는 것을 볼 수 있다.

 

그리고 실제 테스트가 끝나고 난 뒤 use다음에 써져 있는 코드는 After Hooks로 테스트가 끝나고 실행된다.

 

 

https://playwright.dev/docs/test-fixtures#using-a-fixture

Fixtures | Playwright

 

자세하게는 역시 공식 페이지 참고

 

 

사실 Cypress에서 개념으로 따지면 before나 beforeEach에 넣어두고 쓰는 command 같은 너낌으로 쓰는?

 

뭐 물론 세세하게 따지면 좀 다르지만, 기능상으로는 같이 쓸 수 있는?

 

물론 cypress에 fixtures는 테스트 mockup 이나 데이터 파일 등을 관리하는데 ㄲㄲ...