カテゴリー: puppeteer

今回は、ヘッドレスモードでも巡回させています。

動画で使ったソースは以下

const puppeteer = require('puppeteer');
(async () => {
  //const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1920, height: 1080 }, args: ['--start-maximized'] })
  const browser = await puppeteer.launch({ headless: true, defaultViewport: { width: 1920, height: 1080 }, args: ['--start-maximized'] })
  const page = await browser.newPage()
  
//  const navigationPromise = page.waitForNavigation()
  
//  await navigationPromise
  
  await page.goto('http://localhost:3000/users')
  
  await page.setViewport({ width: 1316, height: 632 })
  
  await page.waitForSelector('table > tbody > tr:nth-child(6) > td:nth-child(4) > a')
  await page.screenshot({path: 'test01-1.png'});
  await page.click('table > tbody > tr:nth-child(6) > td:nth-child(4) > a')
  
  await page.waitForSelector('body > a:nth-child(4)')
  await page.screenshot({path: 'test01-2.png'});
  await page.click('body > a:nth-child(4)')
  await page.screenshot({path: 'test01-3.png'});
  
  await browser.close()
})()

前回の動画のソースに、スクリーンショットを出力する部分を追加しております。

あと上のソースはヘッドレスモードのソースになっていて、表示させながら巡回したい時は

  const browser = await puppeteer.launch({ headless: true　.......

のtrue の部分を falseにすればOK!

本家

https://github.com/GoogleChrome/puppeteer

動画中にインストールしたChrome用アドオン

https://chrome.google.com/webstore/detail/katalon-recorder/ljdobmomdgdljniojadhoplhkpialdid/related

https://chrome.google.com/webstore/detail/puppeteer-exporter-for-ka/idgpmhfldhpaoiflfleanildmnojchhd/related?utm_source=chrome-ntp-icon

https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda/related

インストール手順（Ubuntu,Debianの場合）

#npmのインストール
sudo apt install npm

#作業ディレクトリにて
npm install puppeteer

動画中に上記アドオンを使って作成し手直ししたソース１

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1920, height: 1080 }, args: ['--start-maximized'] })
  const page = await browser.newPage()
  
//  const navigationPromise = page.waitForNavigation()
  
//  await navigationPromise
  
  await page.goto('http://localhost:3000/users')
  
  await page.setViewport({ width: 1316, height: 632 })
  
  await page.waitForSelector('table > tbody > tr:nth-child(6) > td:nth-child(4) > a')
  await page.click('table > tbody > tr:nth-child(6) > td:nth-child(4) > a')
  
  await page.waitForSelector('body > a:nth-child(4)')
  await page.click('body > a:nth-child(4)')
  
  await browser.close()
})()


動画中に作成したソースその２

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1920, height: 1080 }, args: ['--start-maximized'] });
    const page = await browser.newPage();
    let element, formElement, tabs;

    // Original Katalon Recorder info - Command: open, Target: http://localhost:3000/users, Value: 
	await page.goto(`http://localhost:3000/users`, { waitUntil: 'networkidle0' });

	// Original Katalon Recorder info - Command: click, Target: xpath=(.//*[normalize-space(text()) and normalize-space(.)='Show'])[3]/following::a[1], Value: 
	element = await page.$x(`(.//*[normalize-space(text()) and normalize-space(.)='Show'])[3]/following::a[1]`);
	await element[0].click();

	// Original Katalon Recorder info - Command: click, Target: link=Back, Value: 
	element = await page.$x(`//a[contains(text(),'Back')]`);
	await element[0].click();
	await page.waitForNavigation();
    await browser.close();
})();