puppeteer

https://github.com/puppeteer/puppeteer https://flaviocopes.com/selectors-api/ <예시 블로그> http://magic.wickedmiso.com/144?category=781075

puppeteer 기본 틀 (작동하니..?)

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

내가 만든 puppeteer 기본틀

const puppeteer = require("puppeteer");

function delay( timeout ) {
  return new Promise(( resolve ) => {
    setTimeout( resolve, timeout ); // 함수가 끝나고 일정간격 이후 실행
  });
}

puppeteer.launch({
    headless : false
    , args: ['--start-fullscreen']
}).then(async browser => {
    const page = await browser.newPage();

  await page.goto('https://nid.naver.com/nidlogin.login', {waitUntil : "networkidle2"});

    document.querySelector('#id').value = id;
    document.querySelector('#pw').value = pw;

  await page.waitForNavigation(); // 해당 페이지가 전부 로드된 이후 작업 진행
  await browser.close();

});

launch 속성

  headless : false    // 헤드리스모드의 사용여부를 묻는다
    , devtools : false    // 브라우저의 개발자 모드의 오픈 여부를 묻는다
    , executablePath : puppeteer.executablePath()    // 실행할 chromium 기반의 브라우저의 실행 경로를 지정한다.
    , ignoreDefaultArgs : false    // 배열이 주어진 경우 지정된 기본 인수를 필터링한다.(중요 : true사용금지)
    , timeout : 30000    // 브라우저 인스턴스가 시작될 때까지 대기하는 시간(밀리 초)
    // , setViewport : { width : 1920, height : 1080 }    // 실행될 브라우저의 화면 크기를 지정한다.
  , fullPage : false
  , dumpio : true
    , args : [ "about:blank" ]

전체화면 실행

// 둘 다 넣어줘야 함
puppeteer.launch({args: ['--start-fullscreen']})
await page.setViewport({ width : 1920, height : 1080}); 

// 이건 효과없음
 , setViewport : { width : 1920, height : 1080 }

아주 기본적인 selector

document.querySelectorAll('div') // 태그
document.querySelectorAll('.test') // 클래스
document.querySelector('#test') // id
document.querySelector('a:hover') // a태그의 속성

기본적이지는 않은 selector

document.querySelectorAll('div, span') // 여러개 선택
document.querySelectorAll('[data-example="test"]') // 속성값
document.querySelectorAll(':nth-child(4n)')

selector에 값넣기

evaluate( ) 함수에 매개변수 전달하기

  await page.evaluate((id, pw) => {
    document.querySelector('#id').value = id;
    document.querySelector('#pw').value = pw;
  }, naver_id, naver_pw);

  await page.type( "div.clearfix:nth-child(2) > input", "아이디" );
  await page.type( "div.clearfix:nth-child(3)> input", "패스워드" );

// 페이스북 아이디를 키보드로 입력한다.
    await page.keyboard.type( "페이스북 이메일 주소" );

click

await page.click( "input#email" );
await page.click('.btn_global');

키보드 입력

await page.keyboard.press( "Tab" );
await page.keyboard.press( "Enter" );
await page.keyboard.type( "페이스북 이메일 주소" );

스크린샷

await page.screenshot({ path: 'naver.png', fullPage:true });