ヘッドレスブラウザ上人形遣い

：この記事はで再現された猿2048ウェブサイト⇨ https://www.mk2048.com/blog/blog.php?id=h22a2ijbaa

著者フェリックスアリゴールドのドレス・データの経験、技術チームについて

私たちが毎日使うステップブラウザは次のとおりです。対話、ウェブページを開き、ブラウザを起動します。そして、无头浏览器それは、上記のプロセスブラウザを実行するために、当社の使用スクリプトを参照し、実世界のブラウザの使用シナリオをシミュレートすることができます。

ヘッドレスブラウザで、我々は以下を含むがこれらに限定されない、行うことができるようになります：

Webページのスクリーンショットは、画像やPDFとして保存されます
1ページのアプリケーション（SPA）の実行とレンダリング（非同期リクエストを処理することは困難で、従来の単一ページのアプリケーションの問題を解決するためのHTTPクローラーのクロールを）つかみます
等の自動提出フォーム、UI自動テスト、シミュレートされたキーボード入力を行います
私たちは、パフォーマンスの問題の分析に役立つブラウザといくつかのデバッグツールが付属して分析ツール
最新のヘッドレスブラウザ環境でテストを行い、最新のブラウザの機能を使用します
爬虫類は、あなたがやりたい書きます -

含むがこれらに限定されない多くのヘッドレスブラウザ、：

Webkitのに基づいてPhantomJS、
GeckoベースのSlimerJS、
HtmlUnit、ベースRhnio
トライデントに基づいてTrifleJS、
Webkitのに基づいて、スプラッシュ

本稿では、Googleのヘッドレスブラウザ（ヘッドレスクローム）について説明し、彼はベースのクロームデベロッパーツールのプロトコルを高さの多くをパッケージ化するブラウザインタフェースを制御する私たちを助けるために用意されています。

Simpleコード・サンプル

使用するためにasync/ awaitなどの新機能を、あなたは、Node v7.6.0以降を使用する必要があります。

[スタート/ブラウザを閉じ、ページを開きます

    // 启动浏览器
    const browser = await puppeteer.launch({
        // 关闭无头模式，方便我们看到这个无头浏览器执行的过程
        // headless: false,
        timeout: 30000, // 默认超时为30秒，设置为0则表示不设置超时
    });

    // 打开空白页面
    const page = await browser.newPage();

    // 进行交互
    // ...

    // 关闭浏览器
    // await browser.close();

設定したウィンドウサイズページ

    // 设置浏览器视窗
    page.setViewport({
        width: 1376,
        height: 768,
    });

URLを入力します。

    // 地址栏输入网页地址
    await page.goto('https://google.com/', {
        // 配置项
        // waitUntil: 'networkidle', // 等待网络状态为空闲的时候才继续执行
    });

イメージとしてページを保存

Webページを開き、ローカルにスクリーンショットを保存します。

await page.screenshot({
    path: 'path/to/saved.png',
});

完全なコード例

PDFとしてページを保存

Webページを開き、ローカルでPDFを保存します。

await page.pdf({
     path: 'path/to/saved.pdf',
    format: 'A4', // 保存尺寸
});

完全なコード例

スクリプトの実行

オープンなWebページのホスティング環境を得るために、我々は使用することができますPage.evaluate方法を：

// 获取视窗信息
const dimensions = await page.evaluate(() => {
    return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight,
        deviceScaleFactor: window.devicePixelRatio
    };
});
console.log('视窗信息:', dimensions);

// 获取 html
// 获取上下文句柄
const htmlHandle = await page.$('html');

// 执行计算
const html = await page.evaluate(body => body.outerHTML, htmlHandle);

// 销毁句柄
await htmlHandle.dispose();

console.log('html:', html);

Page.$それは我々が使用されるように理解することができdocument.querySelector、かつPage.$$対応document.querySelectorAll。

完全なコード例

オートフォームを送信します

Googleのホームページを開き、キーワードを入力し、検索を入力します。

// 地址栏输入网页地址
await page.goto('https://google.com/', {
    waitUntil: 'networkidle', // 等待网络状态为空闲的时候才继续执行
});

// 聚焦搜索框
// await page.click('#lst-ib');
await page.focus('#lst-ib');

// 输入搜索关键字
await page.type('辣子鸡', {
   delay: 1000, // 控制 keypress 也就是每个字母输入的间隔
});

// 回车
await page.press('Enter');

完全なコード例

複雑なポイントコードのサンプル

リンクのすべての単純な行為は、その後、我々はさらに2つの具体的な例を見て、複雑な相互作用のシリーズです。

1ページのアプリケーションをグラブ：アナログ空腹まだお持ち帰り受注

従来のクローラは、HTTPプロトコルに基づいており、アナログのUserAgentは、通常の使用を取得するためにHTTPリクエストを送信するコンテンツは、HTMLコンテンツをつかむ必要が出て解析ストレートのhtmlページのうち、サービスの側面をレンダリングするとき、この方法は非常に便利です。

しかし、チェックで単一ページのアプリケーション（SPA）の顔、または経験したログは、この爬虫類は比較的弱くなります。

完全にWebページをクロールインタラクティブな操作を使用するようにヘッドレスブラウザを使用していないので、初期ページは、ホストブラウザ環境のレンダリングを使用することが十分に可能であるが完了し、もはやこの1ページのアプリケーションを気にする必要がありますのフロントエンドに関与する必要が初期化されますHTTPリクエスト。

ヘッドレスブラウザは、クリックを数多く提供して入力し、他の命令、完全ヒトクリック、タイピングや他のコマンドをシミュレートする、あなたは、もはやハッハッハああ、に定期的に書き込みを心配する必要はありません

もちろん、いくつかのシナリオでは、伝統的なHTTPクローラを使用して（通常の試合を書くこと）は非常に効率的です。

ここでは、もはやこれらの違いのより詳細な比較ではない、とだけ、次の例のように、人間とコンピュータの相互作用の完全なシミュレーションを示しています。モバイル版空腹エースのお持ち帰りを使用します。

の効果を見てください：

コードは、比較的長いに付着していない、キーは数行です。

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

console.log('启动浏览器');
const browser = await puppeteer.launch();

console.log('打开页面');
const page = await browser.newPage();

// 模拟移动端设备
await page.emulate(iPhone6);

console.log('地址栏输入网页地址');
await page.goto(url);

console.log('等待页面准备好');
await page.waitForSelector('.search-wrapper .search');

console.log('点击搜索框');
await page.tap('.search-wrapper .search');

await page.type('麦当劳', {
    delay: 200, // 每个字母之间输入的间隔
});

console.log('回车开始搜索');
await page.tap('button');

console.log('等待搜素结果渲染出来');
await page.waitForSelector('[class^="index-container"]');

console.log('找到搜索到的第一家外卖店！');
await page.tap('[class^="index-container"]');


console.log('等待菜单渲染出来');
await page.waitForSelector('[class^="fooddetails-food-panel"]');


console.log('直接选一个菜品吧');
await page.tap('[class^="fooddetails-cart-button"]');

// console.log('===为了看清楚，傲娇地等两秒===');
await page.waitFor(2000);
await page.tap('[class^=submit-btn-submitbutton]');

// 关闭浏览器
await browser.close();

重要なステップは以下のとおりです。

ロードページ
DOMは、クリックがレンダリングされた後にクリックする必要がありますのを待ちます
それをクリックする必要があり、その後、レンダリングクリックDOMの次のステップを待ち続け

いくつかのキーコマンド：

page.tap（またはpage.click）クリック
page.waitForSelector指定された要素のための待ち時間を意味することがあった場合は、直ちに後者のパラメータで、実行継続、ページに表示されselector、セレクタ、および我々が使用document.querySelector受け取った同じパラメータを
page.waitForあなたは後ろに渡すことができselectorセレクター、function機能またはtimeoutとして、ミリ秒page.waitFor(2000)の手段は、2秒待ってから続行し、この例で、主な機能は、一時停止操作を実証することです、

少数の命令が受け入れられ、上記selectorパラメータとして選択、ここではいくつかの追加の方法は、次のとおりです。

page.$(selector)そして、我々は使用document.querySelector(selector)一貫返しますElementHandle要素ハンドルを
page.$$(selector)そして、我々は使用document.querySelectorAll(selector)一貫返します配列を

ブラウザのコンテキストで頭を持って、我々は、あるメソッドの要素を選択します。

const body = document.querySelector('body');
const bodyInnerHTML = body.innerHTML;
console.log('bodyInnerHTML: ', bodyInnerHTML);

ヘッドレスブラウザでは、まず、ハンドルを介して情報環境を取得した後、ハンドルが破壊され、ハンドルを取得する必要があります。

// 获取 html
// 获取上下文句柄
const bodyHandle = await page.$('body');
// 执行计算
const bodyInnerHTML = await page.evaluate(dom => dom.innerHTML, bodyHandle);
// 销毁句柄
await bodyHandle.dispose();
console.log('bodyInnerHTML:', bodyInnerHTML);

また、あなたが使用することができますpage.$eval：

const bodyInnerHTML = await page.$eval('body', dom => dom.innerHTML);
console.log('bodyInnerHTML: ', bodyInnerHTML);

page.evaluateスクリプトを実行するブラウザ環境では意味、それは二番目のパラメータハンドラとして渡された、とすることができpage.$eval、選択したDOM要素に対して操作を実行します。

完全なコード例

輸出バルクウェブサイト：チューリングブックをダウンロード

私はチューリングコミュニティたくさんの本を買うために、以前サポートにプッシュmobiする形式kindleまたはプッシュpdfメールを読むためのフォーマットを、しばしばだけに読んだページに滞在することができ、これらのチャネルは閉じ押します。

私にとっては非常に便利ではありませんが、オンラインこれらの本を読んでの効果は、（タグの数が多いと、単に優れたタイポグラフィを抽出していない）をレンダリングするサーバであり、当然のことながら、最良の方法は、直接オンライン読み込まれ、PDFまたは画像として保存A。

ヘッドレスモードブラウザでは、私は簡単なダウンロードに購入した本を書いたpdfローカルスクリプト、サポート一括ダウンロード書籍が購入しました。

、受信アカウントのパスワードを使用して、パスを保存し、例えば：

$ node ./demo/download-ituring-books.js '用户名' '密码' './books'

注意：現在、ヘッドレスモードでサポートするので、クロールを確認する必要があるとし、その後、国家元首、実行するためにこのステップ意志最初のエラー：puppeteerPage.pdf()Page.pdf()

このスクリプトを起動するときに、私たちは、ヘッドレスモードを維持する必要があります。

const browser = await puppeteer.launch({
    // 关闭无头模式，方便我们看到这个无头浏览器执行的过程
    // 注意若调用了 Page.pdf 即保存为 pdf，则需要保持为无头模式
    // headless: false,
});

結果の実装を見てください：

私の本棚には、20冊の以上の書籍がこのような何かをダウンロードした後、があります。

完全なコード例

ヘッドレスブラウザは、他に何をすることができますか？

白は、様々なオペレーティング・マニュアルをシミュレートすることが可能であるヘッドレスブラウザは、ブラウザで頭を持っています。それは自然に人間の生活の多くである、（実際には、人間を押し、すべての記事ページを開き、こうした上記のプロセスのPDFをダウンロードするようにしてくださいするヘッドレスブラウザを使用することができるctrl+pか、command+pローカルの自動化プロセスに保存されます）。

物事が解決することができ、自動化ツールを使用しているので、私たちは繰り返し、人間の労働を無駄にしてはならない、と加えて、我々はまた、行うことができます。

このように自動的に、フォームの自動提出ダウンロードなどの自動化ツール
指定された操作を実行して、正しいDOM構造やテーマをテスト自動化されたUIを記録し、そして後に、検査やテーマがDOM構造と一致した（UIがアサート）
毎週テーマ、定期点検やページを作ったタイミング監視ツールのタイミングは、アラームメッセージで、利用可能な状態にある重要な交通路であり、
伝統的なHTTPクローラなど爬虫類の場所をクロール、あなたは何をするレンダリング機能をヘッドレスブラウザに合うことができます
等

興味がある学生は、列の焦点を合わせるか「qingsheng.lqs ####アリババ-inc.com'.replaceにあなたの履歴書を送信することができます（」####「」@「）、参加する崇高な理想を持つ人々を歓迎〜

オリジナル住所：https://github.com/ProtoTeam/blog/blob/master/201710/2.md