프런트 엔드 테스트 도구 비교 Puppeteer #01 환경 구축

이 기사에서 할 일

Puppeteer의 환경을 구축하고 Headless-Chrome이 작동하는지 확인할 때까지.

자기소개

주식회사 Creaith의 우에다입니다.
직원 소궁 하지만 프런트 엔드 테스트 도구는 puppeteer가 최고라고 말하면
동료의 모토키 가 「selenium에서도 같은 일을 한다」라고 말하기 때문에.
직원의 소궁이 기사를 쓰고 나는 그것을 지켜 보았습니다.
그래 전력으로 지켜볼 뿐입니다.
물론 대결이므로 잃으면, 일련 씨, 나도 그것에 휘말려 고뇨고

여러가지 비교해 가 Puppeteer를 활용할 수 있게 될 수 있을 때까지를 연재해 가고 싶습니다.
비교 대상: 프런트 엔드 테스트 도구 비교 Selenium #01 환경 구축

Puppeteer란?

「파페테아~아」는 어쨌든 환경 구축이 메타쿠소에 편합니다

얼마 전 Google 크롬에 헤드리스 기능이 추가되어 CLI에서 브라우저를 사용할 수 있습니다.
그것을 사용해 SPA의 렌더 후의 상태에 대해서 테스트할 수 있습니다만, 환경 구축이 상궤를 벗어날 정도로 편하게 됩니다.

ChromeDevTools 개발 팀이 유지 보수 중입니다

Chrome 이외의 브라우저는 무리

Redux의 Action도 가로 채기 할 수 있습니다

도로 늪화하기 쉬운 E2E 테스트 환경에 적합 ... 하즈

SPA와의 합성도 좋기 때문에 디펙트가 될 가능성 메타 젠장 높네요

우선 환경 구축

로컬에서 puppeteer가 움직이는 환경을 만들어갑니다.
공식 문서 을 바탕으로 바삭하게 움직일 때까지

전제 조건

사용하는 기술
버전 번호


macOS HighSierra
10.13.3

Homebrew
1.5.3

nodebrew
0.9.8

node
v8.9.4

npm
5.6.0


공식에 따르면

Usage
Caution: Puppeteer requires at least Node v6.4.0, but the examples below use async/await which is only supported in Node v7.6.0 or greater.

와 Node의 버젼은 v6.4.0 이상이 필요하고, async await 를 사용하려면 v7.6.0 이상이 필요합니다. 그래서 Node의 버전은 v7.6.0 이상으로 해 둡시다.

작업 디렉토리에 puppeteer 설치

$ mkdir puppeteer && cd puppeteer
$ npm i --save puppeteer

이것만으로 로컬에서 움직일 준비가 되었습니다. 간단하네요!

puppeteer 실행

간단한 테스트를 해보겠습니다.https://example.com로 이동하여 스크린 샷을 찍는 것만으로 테스트 해보십시오.

테스트용 파일 만들기

테스트용 파일 script.js 를 작성해, 다음과 같이 편집한다.

script.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox'
    ]
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  browser.close();
})();

테스트 실행

script.js 에 테스트 코드를 작성한 후 명령을 두드려 테스트를 실행합니다.

$ node script.js

스크린 샷은 puppeteer/example.png라는 이름으로 저장됩니다.

다음에...

아직 무엇을 할지 아직 결정하지 않았지만
본래라면 여기에서 시나리오 테스트를 만들고
결과 표시까지 자동화
CI 테스트에서 사용할 수 있도록 원하는 곳입니다.

18/03/29 추가

계속 게시했습니다.
프런트 엔드 테스트 도구 비교 Puppeteer #02 테스트

Creaith 멤버

이 문서의 저자 : 우에다, 소궁
기타 회원: 시무라 , 모토키