PlayWright、NODEJSとFireBaseとウェブスクレーピングへの導入。

必要条件

このチュートリアルでフォローしたい場合は、次の手順を実行します.

ファイアベースとファイアベースアカウントの基礎知識
https://firebase.google.com/

JavaScriptの基礎知識

コーディングエディタ

API開発/デバッグツール.

何がウェブスクラップですか？

ウェブスクラップは、ウェブサイトからデータを抽出することを指します.この情報
収集され、フォーマット(すなわち、CSV)にエクスポートされます
ユーザ.

ヘッドレスブラウザは何ですか？

あなたは、ヘッドレスブラウザの用語を聞いたかもしれないが、まだそれを知らない
手段.インターネットが我々の背中を得たので、あなたは心配する必要はありません🙂

Headless browsers provide automated control of a web page in an environment
similar to popular web browsers, but are executed via a command-line interface
or using network communication.
wikipedia.

ここではほとんど人気のないヘッドホンブラウザー👇
Puppeteer : 操り人形は
ヘッドのないクロムを制御する高レベルAPIを提供するノードライブラリまたは
DevToolsプロトコルの上のクロムまた、フルを使用するように設定することができます
(非頭のない)クロムまたはクロム.
Playwright : PlayWrightは、開発されたノードライブラリです
マイクロソフトは、単一のAPIでクロム、FirefoxとWebKitを自動化します.劇作家
は、これまでに緑、有能なクロスブラウザーウェブオートメーションを可能にするために造られます.
信頼性と高速.

初期設定🚀

JavaScriptのFireBaseクラウド関数の初期化によって起動します.

firebase init functions

cd functions

npm install playwright

これは、クロム、FirefoxおよびWebKitの脚本家とブラウザのバイナリをインストールします.
一旦インストールされるならば、あなたはノードでplaywrightを必要とすることができます.スクリプトと自動化Web
ブラウザの相互作用.

今すぐ私たちのInstagramスクレーパーを作成することができます

ウェブ上のInstagramは反応します.そして、それは我々がどんなダイナミックな内容も見ないことを意味します
Utilのページが完全に読み込まれます.PlayWrightは、Clould機能で利用できます
ランタイム、あなたのサーバー上のクロム/Firefox/WebKitブラウザをスピンすることができます.
それはJavaScriptをレンダリングし、あなたが使用しているブラウザのようなイベントを処理します
今すぐ.
まず、関数は実際のInstagramアカウントにログインします.ページ.型法
を参照してください.一度ログイン
で、特定のユーザー名に移動し、IMGタグをレンダリングするのを待つ
その後、src属性をscrapeします.

const functions = require('firebase-functions');
const playwright = require('playwright');

exports.scrapeImages = functions.https.onRequest(async (req, res) => {
  // Randomly select a browser
  // You can also specify a single browser that you prefer
  for (const browserType of ['firefox', 'chromium', 'webkit']) {
    console.log(browserType); // To know the chosen one 😁
    const browser = await playwright[browserType].launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('https://www.instagram.com/accounts/login/');

    await page.waitForSelector('[type=submit]', {
      state: 'visible',
    });
    // You can also take screenshots of pages
    await page.screenshot({
      path: `ig-sign-in.png`,
    });
    await page.type('[name=username]', '<your-username>'); // ->
    await page.type('[type="password"]', '<your-password>'); // ->

    await page.click('[type=submit]');
    await page.waitForSelector('[placeholder=Search]', { state: 'visible' });
    await page.goto(`https://www.instagram.com/<your-username>`); // ->
    await page.waitForSelector('img', {
      state: 'visible',
    });
    await page.screenshot({ path: `profile.png` });
    // Execute code in the DOM
    const data = await page.evaluate(() => {
      const images = document.querySelectorAll('img');
      const urls = Array.from(images).map((v) => v.src);
      return urls;
    });
    await browser.close();
    console.log(data);
    // Return the data in form of json
    return res.status(200).json(data);
  }
});

Replace highlighted fields with valid credentials.

今、APIをテストし、APIを必要とすることをする必要があります
デバッグツールとInsomnia だってだから
私は今まで使用している最高のAPIツールと機能のトンを持っています.また、使用することができます
ツールPostman .
devサーバを起動します.

npm run serve

不眠症を開いて、あなたのFirebase
devサーバ.
例http://localhost:5001/playwright-faecb/us-central1/scrapeImages
上記のイメージでは、応答JSONデータ黄色で色を見ることができます
右側.それはあなたの個人イメージを指すURLの配列です
Instagramページ.

私たちが何をしているかをよりよく理解するために一歩一歩を振り回しましょう。

PlayWrightは3つの異なるブラウザータイプを提供します
同時に.

つのブラウザの種類をループします['chromium', 'firefox', 'webkit'] .

launch()
我々は、起動方法を使用して新しいブラウザを起動します.

newContext()
新しいブラウザコンテキストを作成します.エー
Browser context
ブラウザで新しいタブを作成するような大部分の操作を提供します.

goto
メソッドは指定したURLパスに移動します.

waitForSelector()
ブラウザーに存在する要素を待つかどうか.

screeshot()
現在のページのスクリーンショットを取得します.

text()
フォームフィールドを埋める能力を提供します.

click()
DOMの要素またはページをクリックすることができます.

evaluate() .
あなたはこの関数のコールバックでたくさん行うことができますしかし、我々だけです
復帰src コールバック内の各イメージの値.

browser.close()
既に知っている私たちの現在のブラウザを破壊します.

あなたはデータ(画像をダウンロード)が、我々のケースで何をしたいことができます
我々はコンソールでそれをログ出力して、JSONストリングとしてそれを返しています
200の応答は、それがどのように見えるかを参照してください.

結論

ほとんどの回悪い男は、このテクニックを不正にデータを抽出するために適用されます
ウェブサイトと私は、これを読んでいる人が彼らのうちの1つでないとかなり確信します.

Always remember to Use your code for good 🙂

コンプリートコードhttps://github.com/dnature/playwright-example
私はあなたがこの助けを見つける願っています.
ハッピーコーディング💻 🙂.
他の技術関連の記事についてはブログをチェックしてください.https://divinehycenth.com/blog