반응형
Puppeteer는 Chrome 팀이 개발한 Node 라이브러리이다. Puppeteer를 이용하면 Headless 혹은 Headful한 브라우저(크롬)을 제어할 수 있는 각종 API를 제공하며, 테스트에도 사용될 수 있다.
이 블로그가 대략적인 내용을 이해하기에 쉬웠다.
이곳은 공식 문서
1. 프로젝트를 만들고 puppeteer를 설치한다.
yarn add puppeteer
2. import 를 사용하기 위해서 package.json에서 "type": "module"을 추가해준다.
{
"type": "module",
"dependencies": {
"puppeteer": "^20.3.0"
}
}
3. examples.js라는 파일을 만들고 아래와 같이 적어준다. 문법은 https://developer.chrome.com/articles/new-headless/ 에서 나와있는 new headless (정확하게 무엇인지는 모르겠지마..)을 따랐다.
버튼을 클릭하는가 클릭하지 않는가에 따라서 h2 태그로 작성한 글자 내용이 달라지게 만들어두었다. 각각 버튼을 클릭 후 0.5 초 이후의 스크린샷이 어떻게 달라지는 지를 확인할 수 있다.
//examples.js
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
headless: 'new',
// `headless: true` (default) enables old Headless;
// `headless: 'new'` enables new Headless;
// `headless: false` enables “headful” mode.
});
const page = await browser.newPage();
await page.goto('http://localhost:3000/puppeteer');
await page.screenshot({ path: '/Users/../puppeteer/1.webp' , fullPage: true });
await page.click('button[id="firstButton"]');
await new Promise(r => setTimeout(r, 500));
await page.screenshot({ path: '/Users/../puppeteer/2.webp' , fullPage: true });
await page.click('button[id="secondButton"]');
await new Promise(r => setTimeout(r, 500));
await page.screenshot({ path: '/Users/../3.webp' , fullPage: true });
// …
await browser.close();
4. examples.js 파일을 노드로 실행시킨다.
node examples.js
반응형
'ETC 코딩 > JS' 카테고리의 다른 글
Puppeteer waitforTimeout deprecated (0) | 2023.08.29 |
---|---|
[Javascript] Array를 특정 값에 따라 sort하는 함수 (0) | 2022.10.05 |
input tag 개행(줄바꿈) 안 될 때는 textarea tag로 (0) | 2022.04.22 |
소숫점 아래에서 반올림 함수 (0) | 2022.01.21 |
[JS] 데이터 n개씩 묶어주는 키 추가하기 (0) | 2021.12.10 |