jest-image-snapshot을 활용한 디자인 검수자동화를 해보자

Kim BeomSeo·2018년 11월 24일

automation test jest jest image snapshot puppeteer 검수자동화 자동화 테스트

회사를 옮기고 나서

프론트엔드개발자로서의 기본이 되야할

웹디자인에 맞춰서 페이지를 그려내는 작업을 하게됐다.

디자인에 맞춰서 css를 그리는것이 생각보다 어려울뿐만 아니라

기기종별 내장폰트유무로 달라지는 폰트차이등 신경써야할것이 생각보다 많았다.

특히 인라인요소는 사람을 미치게 한다.

완성되고나면 디자이너분이 꼼꼼하게 검수를 해주시지만.....

2603E750589594DF10 (1).jpg
(용의눈으로... 아 아닙니다..)

검수하는 시간도 꽤나 걸릴뿐만 아니라

특히 틀린그림찾기에도 미숙한 나 때문에 디자이너분의 시간이 뺏긴다는 사실에 부끄러워졌다.

게다가 검수하고 수정사항요청받을때 마다 왠지 나의 얼굴이 붉혀짐은 덤...

적어도 이 부분은 적은코드로 자동화할 수 있는 방법이 있지 않을까 싶어서 관련된 라이브러리를 찾아보았다.

그리고... 찾아냈다.

이것을 진행하려면 여러개의 라이브러리가 필요하다.

필자는 타입스크립트 러버로서 타입스크립트 기준으로 진행할것이다.

yarn add jest ts-jest typescript puppeteer jest-image-snapshot @types/jest @types/jest-image-snapshot @types/puppeteer -D

yarn tsc --init
yarn ts-jest config:init


//tsconfig.json
{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6",   
    // ....
}

tsconfig의 target은 es6로 진행해야한다.

그리고 별도의 테스트폴더에서 테스트코드로 기본설정을 작성해보자

/// inspection.test.ts

import {Browser, Page, launch} from 'puppeteer';
import {toMatchImageSnapshot} from 'jest-image-snapshot';

expect.extends({toMatchImageSnapshot});

describe('some page',() => {
  let browser: Browser;
  let page: Page;
  beforeAll(async done => {
    browser = await launch();
    done();
  });
  beforeEach(async done => {
    page = await browser.newPage();
    done();
  });
  afterEach(async done => {
    await page.close();
    done();
  });
  afterAll(async done => {
    await browser.close();
    browser = null;
    done();
  });
});

beforeAll,afterAll에는 자신의 사이트를 열고 닫는 코드가 있어야한다.
하지만 일단 간단하게 코드만 보여주기 위해 사이트는 구글로 진행하겠다.
사이트를 검수한다고 가정해보고 구글의 스크린샷을 찍어보자.

/// inspection.test.ts

import {Browser, Page, launch} from 'puppeteer';


describe('some page',() => {
  // 생략

  it("main", async () => {
    await page.goto("https://www.google.com");
    const png = await page.screenshot();
    expect(png).toMatchImageSnapshot();
  });
});

자 테스트 실행!

yarn jest

짜잔!

테스트파일이 있는 폴더에 image_snapshots폴더가 생기고 결과물이 저장된다.

이것을 디자인시안파일이라고 가정하고 진행하자.
실제로는 디자인시안이미지를 이 이미지파일이름으로 바꾸고 교체하면된다.

하지만 같은페이지를 계속찍어봐야 우리가 원하는 검수비교가 된건지 알수가 없기에 행동을 추가해보자

//생략
describe('some page',() => {
  // 생략
  it("main", async () => {
    await page.goto("https://www.google.com");
    await page.type("input[type='text']", "test"); // 추가작성할 부분!
    const png = await page.screenshot();
    expect(png).toMatchImageSnapshot();
  });
});