puppeteer、新型headless chrome!

puppeteer

puppeteerはグーグルが開発したHeadless Chromeで、puppeteerの出現により、業界内の多くの自動化テストライブラリがメンテナンスを停止し、例えばPhantomJS、Selenium IDE for Firefoxである.

puppeteerは何に使いますか?

政府はいくつかの機能を提供しています.

ページ生成pdf

spa/ssr類のウェブサイト

に登ります

フォームの自動提出、ユーザー操作のシミュレーション、uiテストなど

自動化試験環境

を提供する.

Webページのパフォーマンスの問題を分析し、chrome timeline

に基づいて
実はこのようなブラウザに対して、フロントエンドの監視、定期的にページの異常を照会するなど、私たちができることはたくさんあります.このような思想が生んだpage-monitor.主な機能は、ユーザーの入力をシミュレートできるブラウザに基づいています.何ができるかはあなたの想像に頼っています.

コードでpuppeteerを紹介します

ページ生成pdf

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://open.toutiao.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

puppeteerはnode v 6に基づく.4.0ですがawait/asyncの構文にはnode v 7が必要です.6.0以上がサポートされています.npm i puppeteerでコマンドラインで効果を見ることができます.コードはすべてapiで何も言うことはありません.必要なのはopenですtoutiao.comの下の文章の内容はすべて非同期インタフェースの要求で、puppeteerはどのように内容を取得しますか?
page.gotoのコンフィギュレーションアイテムwaitUntil:networkidle 2は、500 msまで待機するリクエスト数が2つを超えない.実は正確に内容を得る保証はありません.その待ち時間を長く書けばいいです.await page.waitFor(2000);

デバッグ

puppeteerはheadlessモードのみではなく、puppeteerのuiインタフェース:puppeteer.launch({headless: false)を開き、puppeteerが実行する動作puppeteer.launch({headless: false, slowMo: 250})を遅くすると、簡単にデバッグできます.

‘callを打つ?’page.on('console', msg => console.log('PAGE LOG:', msg.text()));イベントリスニングは、ページのロゴを簡単に表示します.

爬虫類

ここでトップ記事のタイトルを登ります.

(async () => {
  const browser = await puppeteer.launch({headless: false, slowMo: 250});
  const page = (await browser.pages())[0];
  page.on('console', msg => console.log('PAGE LOG:', msg.text()));
  await page.goto('https://open.toutiao.com');

  await page.evaluate(() => console.log(`url is ${location.href}`));

  const newsTitle = await page.evaluate((sel) => {
    const $els = document.querySelectorAll(sel);
    return Array.from($els).map((v) => {
        console.log(v.innerText); //  page.on 'console'  
        return v.innerText
    })
  }, 'section h3');
  console.log(newsTitle) //  。
  await page.screenshot({path: 'toutiao.png'}); //  
  await browser.close();
})();

ユーザー操作のシミュレーション

この機能の用途はとても多くて、例えば自動登録、e 2 eテスト、ブラシ賛、切符を奪うなど、もちろん検証コードをスキップできれば.

github上陸

シミュレーションユーザー名とパスワードを入力します.

    await page.goto('https://github.com/login');
    await page.click('#login_field');
    await page.type('username');

    await page.click('#password');
    await page.type('password');

    await page.click('#login > form > div.auth-form-body.mt-3 > input.btn.btn-primary.btn-block');

    await page.waitForNavigation();

puppetterはpageを提供した.focus,page.click,page.type,page.$eval(domプロパティの取得)などのapiは、マウスの位置、ボタンの押下、tap、ページのジャンプなど、多くのユーザーが操作できるapiをプログラムでシミュレートすることができます.
このシミュレーションにログインすると、puppeteerはこのapiを親切に提供しました--!page.type('#mytextarea', 'World', {delay: 100}); // Types slower, like a user

uiテスト

以前共有したtestcafeは、puppeteerのapiによく似ています.testcafeは自動化テストフレームワークで、puppeteerとは異なる点は、mocha断言ライブラリを統合していることです.puppeteerとtestcafeは、自動化されたテスト環境を提供しています.puppeteerはe 2 eのテストをするには自分で断言ライブラリを選ぶ必要がありますが、上品ではありません.

要求ブロック/シミュレーション要求

puppeteerはtestcafeより良い点はリクエストブロックをサポートすることであり、当初testcafeでリクエストが発行されたかどうかをテストし、多くのブラックテクノロジーが使われたかどうかを覚え、issueを提案したことがある.

const puppeteer = require('puppeteer');

puppeteer.launch({headless: false, slowMo: 250}).then(async browser => {
  const page = await browser.newPage();
  await page.setRequestInterception(true);
  page.on('console', msg => console.log('PAGE LOG:', msg.text()));
  page.on('request', interceptedRequest => {
    if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))
      interceptedRequest.abort();
    else
      interceptedRequest.continue();
  });
  await page.goto('https://open.toutiao.com');
//   await browser.close();
});

request,responseイベントが提供され、要求をブロックすることができ、まずこのスイッチawait page.setRequestInterception(true);を開く必要がある.ここでの例は、pngリクエストとjpgリクエストをすべて停止することです.ブロックできることはたくさんあります.例えば、爬虫類はブロック要求を通じていくつかのデータをキャプチャし、いくつかのものを処理することができます.

環境の変更

puppeteerはpageを通過することができる.setViewport,page.setuUserAgentは、アクセス環境を変更します.

await page.setViewport({
  width: 1920,
  height: 1080
});

await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36');

puppeteer/DeviceDescriptorsは、次のような環境をパッケージ化しています.

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone); // emulate Viewport，UserAgent 。 setUserAgent 。
  await page.goto('https://www.google.com');
  // other actions...
  await browser.close();
});

パフォーマンステスト

traceを生成できます.jsonのファイルは、chromeコンソールの解析のために使用され、await page.metrics()はまた、いくつかの性能テストのデータを与えることができます.

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.tracing.start({path: 'trace.json'})
    await page.goto('https://open.toutiao.com')
    await page.tracing.stop()
    const metrics = await page.metrics()
    console.log(metrics)
    await browser.close();
})();
// output
{ Timestamp: 27888.820538,
  Documents: 2,
  Frames: 1,
  JSEventListeners: 58,
  Nodes: 171,
  LayoutCount: 20,
  RecalcStyleCount: 26,
  LayoutDuration: 0.042335,
  RecalcStyleDuration: 0.010091,
  ScriptDuration: 0.124838,
  TaskDuration: 0.000039,
  JSHeapUsedSize: 6388448,
  JSHeapTotalSize: 10334208 }