toHaveScreenshot

https://playwright.dev/docs/test-snapshots

Visual comparisons | Playwright

 

보통 자동화를 작성할 때 

 

1. 버튼을 누른다.

2. 특정 InputField에 입력을 한다.

3. 어떤 값 또는 Element가 나오는지 검증한다.

 

사실  보통 이런 순서일 텐데, 이러면 가끔 드는 생각은..

 

보이기만 하면 Pass네.. CSS가 깨지든 말든, 혹은 Element에 id나 textId 등 attribute가 확실하지 않다면 어떤 위치에 나오든 상관없이 Pass가 되는 코드를 볼때마다 조금 답답하긴했었는데..

 

스크린샷 하나 통짜 비교하면 편하긴 하겠다 ㅋㅋㅋ

그게 진짜 있읍니다....

 

미친거 아닌가 싶은데.. 심지어 잘돼 어디까지 CSS를 테스트 해봐야하나 싶긴한데..

 

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

const screenshotPath = path.join(__dirname, 'snapshots', 'login-section.png');

test.describe('로그인 페이지', () => {

  test.beforeEach('스크린샷 준비', async ({ page }) => {
    // 스크린샷 파일이 없는 경우에만 생성
    if (!fs.existsSync(screenshotPath)) {
      // 테스트할 페이지로 이동
      await page.goto('/login');

      // 검색 결과가 없는 상태 확인 후 스크린샷 저장
      const loginSection = page.locator('body > div').filter({ hasText: '로그인' });
      await expect(loginSection).toBeVisible();

      // 스크린샷 저장
      await loginSection.screenshot({ path: screenshotPath });
    }
  });

  test('시각적 검증 요소', async ({ page }) => {
    await page.goto('/login');
    const loginSection = page.locator('body > div').filter({ hasText: '로그인' });

    await expect(loginSection).toHaveScreenshot(path.join('snapshots', 'login-section.png'));
  });

});

 

테스트 진행 전 파일을 확인 후 없으면 스크린샷을 찍는다. 실제 테스트때 비교할 대조군

 

그리고, 두번째 expect에 내가 원래 검증하려던 요소의 toHaveScreenshot으로 찍었던 파일을 전달하면 된다...

 

가령 간단하게 진짜 text가 나오는 거라고 했을때, 해당 영역을 스크린 샷 찍고, 비교하게 된다.

 

그래서 일딴 폰트 색상만 변동을 했을 때 신기한 결과였는데 

test-results에 보면 파일들이 생기고, 

 

login-section-actual.png

login-section-deff.png

login-section-expected.png

 

이렇게 실제 playwright 내부 검증을 통해 실패하게 된다.

 

내부적으로 최대 다른 형태나 scale 등 옵션 값을 통해 얼마나 용인할건지도 가능해보인다.

 

대빵 신기한데 대빵 강력해보임..