'Screenshot testing'에 해당되는 글 1건

개요

해당 글은 Cypress를 이용한 스크린샷 테스트를 간략하게 실행해본 글입니다.

어느 정도 cypress에 대해 사용해본 입장에서 기록한 글입니다.

환경셋팅

git clone git clone https://github.com/leonardofaria/cypress-example.git

npm install

package.json에 있는 라이브러리 설치

npm run serve

테스트 서버 구동

D:\cypress-example>npm run serve

> cypress-example@1.0.0 serve
> serve public -p 8000       

UPDATE AVAILABLE The latest version of `serve` is 13.0.2

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   - Local:            http://localhost:8000      │
   │   - On Your Network:  http://10.214.134.2:8000   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │
   └──────────────────────────────────────────────────┘

http://localhost:8000 접속하여 테스트 페이지 확인

테스트 스크립트 파일 확인

cypress\integration\screenshot.spec.js

"cypress-wrapper" 요소를 찾은 다음 이미지가 이전 스크린샷과 일치하는지 확인

const routes = ['badge.html', 'button.html'];

describe('Component screenshot', () => {
  routes.forEach((route) => {
    const componentName = route.replace('.html', '');
    const testName = `${componentName} should match previous screenshot`;

    it(testName, () => {
      cy.visit(route);
  
      cy.get('.cypress-wrapper').each((element, index) => {
        const name = `${componentName}-${index}`;
  
        cy.wrap(element).matchImageSnapshot(name);
      });
    });
  });
});

테스트 진행

npm test run

명령어를 통한 헤드리스 테스트 실행

D:\cypress-example>npm test run                                

> cypress-example@1.0.0 test
> cypress "run"



====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    4.11.0                                                                             │
  │ Browser:    Electron 80 (headless)                                                             │
  │ Specs:      1 found (screenshot.spec.js)                                                       │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  screenshot.spec.js                                                              (1 of 1)
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db


  Component screenshot
    √ badge should match previous screenshot (2732ms)
    √ button should match previous screenshot (1360ms)


  2 passing (4s)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        2                                                                                │
  │ Passing:      2                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  5                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     4 seconds                                                                        │
  │ Spec Ran:     screenshot.spec.js                                                               │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Screenshots)

  -  D:\cypress-example\cypress\snapshots\screenshot.spec.js\badge-0.snap.png               (720x28)
  -  D:\cypress-example\cypress\snapshots\screenshot.spec.js\badge-1.snap.png               (720x28)
  -  D:\cypress-example\cypress\snapshots\screenshot.spec.js\button-0.snap.png              (720x44)
  -  D:\cypress-example\cypress\snapshots\screenshot.spec.js\button-1.snap.png              (720x44)
  -  D:\cypress-example\cypress\snapshots\screenshot.spec.js\button-2.snap.png              (720x46)


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ √  screenshot.spec.js                       00:04        2        2        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    √  All specs passed!                        00:04        2        2        -        -        -  


D:\cypress-example>

npm test open 명령어로 테스트 실행을 볼 수 있음

상단 메뉴 > settings > Configuration

모든 Cypress 설정을 확인할 수 있음

작업을 실행하는 브라우저를 변경 가능

상단 메뉴 > Tests

실행할 스크립트를 클릭하여 테스트 실행

헤드리스 모드에서 헤드리스 없음 모드로 실행을 전환할 때 발생하는 오류 (이미지 크기 관련)

아래 명령어(환경변수를 전달하여 모든 스냅샷을 업데이트)

를 통해 가볍게 넘겨준다

npm test open -- --env updateSnapshots=true

테스트 서버 페이지 버튼 이름 변경 후 테스트 실행

npm test open

테스트하는 요소가 이전 스크린샷과 일치하지 않아 테스트 결과 실패

아래 파일에서 어떤 것이 다른지 확인 가능함