- hello-world.js
- package.json
- package-lock.json
- node_modules/

constpuppeteer=require('puppeteer');(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();awaitpage.goto('https://example.com');awaitpage.screenshot({path:'example.png'});awaitbrowser.close();})();

constoptions={headless:false,// ヘッドレスをオフにslowMo:100// 動作を遅く};constbrowser=awaitpuppeteer.launch(options);

//XPathconstelems=awaitpage.$x('//div[@id="form"]');// page.$x()の返り値は配列（XPathが複数該当する場合は最初の要素を返す）

//セレクタconstelem=awaitpage.$("#form");// page.$()の返り値は単数要素constelems=awaitpage.$$("a.red-link");// page.$$()の返り値は配列

constelem=awaitpage.$("a.major-link");//  page.$()の返り値は単数要素awaitelem.click();// elemに格納されている要素をクリックconstelems=awaitpage.$$("a.major-link");// page.$$()の返り値は配列awaitelems[0].click();// elemsの0番目の要素をクリック

document.querySelector("input.gNO89b");// セレクターで1つ要素を指定document.querySelectorAll("input");// セレクターで複数要素を指定$x('//button[contains(text(), "検索")]');// XPathで複数要素を指定

constxpath='//section/div/p[contains(@class, "main-sentence")]';constelems=awaitpage.$x(xpath);constjsHandle=awaitelems[0].getProperty('textContent'));consttext=awaitjsHandle.jsonValue();// textにxpathで指定した要素の文字列が入る

constdata=[{id:1,name:"John",score:90},{id:2,name:"Paul",score:80},{id:3,name:"Ringo",score:91},{id:4,name:"George",score:100}]constcsvWriter=createObjectCsvWriter({path:"output/csv/result.csv",header:[{id:'id',title:'No.'},{id:'name',title:'氏名'},{id:'score',title:'点数'}],encoding:'utf8',append:false,});csvWriter.writeRecords(data).then(()=>{console.log('Done');})

No.,氏名,点数
1,John,90
2,Paul,80
3,Ringo,91
4,George,100

constpuppeteer=require('puppeteer')constfs=require('fs')require('dotenv').config()const{createObjectCsvWriter}=require('csv-writer')constOUTPUT_PATH="retty"letBROWSERconstVIEWPORT={width:1280,height:1024}constxpath={searchResult:{restaurantLinks:'//a[contains(@class, "restaurant__block-link")]',nextPageLink:'//li[contains(@class, "pager__item--current")]/following-sibling::li[1]/a',nextPageItem:'//li[contains(@class, "pager__item--current")]/following-sibling::li[1]'},restaurantDetail:{restaurantInformation:'//*[@id="restaurant-info"]/dl[1]',}}constselector={searchResult:{hitCount:'.search-result__hit-count'},restaurantDetail:{lastPageLink:'#js-search-result > div > section > ul > li:last-child > a',pagerCurrent:'li.pager__item.pager__item--current'}};(async()=>{/**** setup ****/constoptions=process.env.HF?{headless:false,slowMo:100}:{}BROWSER=awaitpuppeteer.launch(options)letpage=awaitBROWSER.newPage()letnewPageawaitpage.setViewport({width:VIEWPORT.width,height:VIEWPORT.height})/**** setup ****/letdata=[]consturl="https://retty.me/restaurant-search/search-result/?budget_meal_type=2&max_budget=9&min_budget=6&latlng=35.633923%2C139.715775&free_word_area=%E7%9B%AE%E9%BB%92%E9%A7%85&station_id=1371"awaitpage.goto(url,{waitUntil:"domcontentloaded"})constlastPageNum=awaitgetTextBySelector(page,(selector.restaurantDetail.lastPageLink))consthitCount=awaitgetTextBySelector(page,selector.searchResult.hitCount)console.log("総ページ数: "+lastPageNum+", 総件数: "+hitCount)letcurrentPageNumberwhile(true){currentPageNumber=awaitgetTextBySelector(page,selector.restaurantDetail.pagerCurrent)letrestaurantsList=awaitpage.$x(xpath.searchResult.restaurantLinks)for(leti=0;i<restaurantsList.length;++i){console.log(currentPageNumber+"ページ目【"+(i+1)+"件目】")awaitrestaurantsList[i].click()newPage=awaitgetNewPage(page)awaitnewPage.waitForXPath(xpath.restaurantDetail.restaurantInformation)/***** retrieve page contents *****/constdataArray=awaitPromise.all([20*(currentPageNumber-1)+i+1,getName(newPage,getTableInfoXPath("店名")+'/ruby/span',getTableInfoXPath("店名")+'/ruby/rt'),getTextByXPath(newPage,getTableInfoXPath("予約")),getTextByXPath(newPage,getTableInfoXPath("住所")+'/div/a'),getTextByXPath(newPage,getTableInfoXPath("定休日")),getTextByXPath(newPage,getTableInfoXPath("ジャンル")+'/ul/li'),getTextByXPath(newPage,getTableInfoXPath("座席")),getTextByXPath(newPage,getTableInfoXPath("営業時間")),newPage.url()])console.log(dataArray[1])// restaurant name/***** retrieve page contents *****/data.push({id:dataArray[0],name:dataArray[1],phone:dataArray[2],address:dataArray[3],holiday:dataArray[4],genre:dataArray[5],chairs:dataArray[6],hours:dataArray[7],url:dataArray[8]})awaitnewPage.close()}awaitcsvWrite(data,currentPageNumber)constnextPageLinkHandle=awaitpage.$x(xpath.searchResult.nextPageLink)letnextPageLink=nextPageLinkHandle[0]constnextPageItemHandle=awaitpage.$x(xpath.searchResult.nextPageItem)letnextPagerItem=nextPageItemHandle[0]if(nextPageLink==null){if(nextPagerItem==null){break}else{// 最後のページャーの前に...があるとき// 例：最後のページが37で、36ページにいるとき→ 35 36 ... 37nextPageLink=awaitpage.$(selector.restaurantDetail.lastPageLink)}}awaitPromise.all([page.waitForNavigation({waitUntil:"domcontentloaded"}),nextPageLink.click()])}BROWSER.close()})()/**
 * 新しく開いたページを取得
 * @param {page} page もともと開いていたページ
 * @returns {page} 別タブで開いたページ
 */asyncfunctiongetNewPage(page){constpageTarget=awaitpage.target()constnewTarget=awaitBROWSER.waitForTarget(target=>target.opener()===pageTarget)constnewPage=awaitnewTarget.page()awaitnewPage.setViewport({width:VIEWPORT.width,height:VIEWPORT.height})awaitnewPage.waitForSelector('body')returnnewPage}/**
 * 渡したデータをcsvに出力するメソッド。ページ数を渡すことで、ページごとに区別してcsvを出力できる。
 * @param {Object.<string, string>} data csvに書き込まれるデータ。csvのヘッダと対応するkeyと、実際に書き込まれるvalueを持ったobjectになっている。
 * @param {number} pageNumber 現在のページ数
 */asyncfunctioncsvWrite(data,pageNumber){if(!fs.existsSync(OUTPUT_PATH)){fs.mkdirSync(OUTPUT_PATH)}varexec=require('child_process').execexec(`touch ${OUTPUT_PATH}/page${pageNumber}.csv`,function(err,stdout,stderr){　　if(err){console.log(err)}})constcsvfilepath=`${OUTPUT_PATH}/page${pageNumber}.csv`constcsvWriter=createObjectCsvWriter({path:csvfilepath,header:[{id:'id',title:'No.'},{id:'name',title:'店舗名'},{id:'phone',title:'電話番号'},{id:'address',title:'住所'},{id:'holiday',title:'定休日'},{id:'genre',title:'ジャンル'},{id:'chairs',title:'座席・設備'},{id:'hours',title:'営業時間'},{id:'url',title:'URL'}],encoding:'utf8',append:false,})csvWriter.writeRecords(data).then(()=>{console.log('...Done')})}/**
 * セレクターで指定した要素のテキストを取得できる。
 * @param {page} page 
 * @param {string} paramSelector 
 * @returns {string} 改行と空白を取り除いた要素のテキスト。要素を取得できなかった時は空文字が返る。
 */asyncfunctiongetTextBySelector(page,paramSelector){constelement=awaitpage.$(paramSelector)lettext=""if(element){text=await(awaitelement.getProperty('textContent')).jsonValue()text=text.replace(/[\s　]/g,"")}returntext}/**
 * XPathで指定した要素のテキストを取得できる。
 * @param page 
 * @param {string} xpath 取得したい要素のxpath。
 * @returns {string} 改行と空白を取り除いた要素のテキスト。要素を取得できなかった時は空文字が返る。
 */asyncfunctiongetTextByXPath(page,xpath){constelements=awaitpage.$x(xpath)lettext=""if(elements[0]){text=await(awaitelements[0].getProperty('textContent')).jsonValue()text=text.replace(/[\s　]/g,"")}returntext}asyncfunctiongetName(page,nameXpath,rubyXpath){letname=awaitgetTextByXPath(page,nameXpath)constnameRuby=awaitgetTextByXPath(page,rubyXpath)name+='('+nameRuby+')'returnname}functiongetTableInfoXPath(infoName){return`//dt[contains(text(), "${infoName}")]/following-sibling::dd`}