문득 생각했기 때문에( ˘ω˘)

헤드리스 크롬 puppeteer에서 페이지로드

querySelector에서 대상 DOM의 텍스트 내용 얻기

json으로 반환

의 3개의 흐름이 될까.
하는 것은 간단합니다.

막상 구현

web-to-json.js

const puppeteer = require('puppeteer');

const runPuppeteer = async (pageUrl, querySelector) => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox'] });

  const page = await browser.newPage();

  await page.goto(pageUrl);

  const list = await page.$$(querySelector);

  // mapにするとエラーになるので気をつける
  const listTexts = [];
  for (let i = 0; i < list.length; i++) {
    const textContentProp = await list[i].getProperty('textContent');
    const textContent = await textContentProp.jsonValue();

    listTexts.push(textContent);
  }

  await browser.close();

  return listTexts;
};

이런 느낌일까요?
검색하려는 URL과 항목의 위치를 ​​지정하는 querySelector를 설정하여 대상 텍스트를 검색합니다.
목록 데이터로 반환합니다.

yahoo 뉴스 목록을 얻으십시오.

여기 부분을 얻으려고합니다.

run_yahoo.js

runPuppeteer("https://www.yahoo.co.jp/", "ul.emphasis li")
  .then(console.log)
  .catch(console.error);

/*
[ '正恩氏の訪露調整か 高官協議NEW',
  '飼育員 トラに襲われ心肺停止写真',
  'ノーベル経済学賞に米の2氏写真',
  '純喫茶閉店へ 妻と歩んだ50年写真NEW',
  '接客で魅了 26歳エースの奮闘写真NEW',
  '高橋大輔が3位 素直にヤバい写真',
  'WIN5 払戻金が過去最低を記録写真',
  'まばたきせず 北川景子の4分写真' ]
*/

잘 얻을 수있었습니다

Qiita의 동적 항목을 가져옵니다.

yahoo의 경우는 서버 사이드 렌더링 되고 있는 것도 있어, DOM의 캐릭터 라인만 있으면 취득하는 것이 가능했습니다.
그래서, 다음은 Qiita의 페이지 로드 후에 동적으로 작성되고 있는 부분을 대상으로 해 보겠습니다.
(HyperApp에서 화면을 읽은 후에 DOM을 구축하고있는 것 같기 때문에 페이지 소스를 열고 시도해도 대상 DOM이 존재하지 않는 것 같습니다.)
이번에는, 「좋아요」 된 수의 일람을 취득해 보려고 생각합니다.



run_qiita.js

runPuppeteer("https://qiita.com/", ".tr-Item_likeCount")
  .then(console.log)
  .catch(console.error);

/*
[ '777',
  '63',
  '149',
  '79',
  '38',
  '39',
  '32',
  '33',
  '37',
  '23',
  '71',
  '33',
  '418',
  '37',
  '15',
  '18',
  '15',
  '56',
  '15',
  '17' ]
*/

이것도 잘 얻을 수있었습니다