Golongがサーバーブラウザーのスクリーンショットを実現

私が最近開発作業にgolangを使用していたとき、360テクニカルパブリックアカウントによって公開された記事に触発されました。golangを使用してヘッドレスブラウザーを操作し、クローラー、スクリーンショット、自動テストなどの機能を実現できるかどうかを考えました。調査とテストの結果、golangの実装も適切な選択肢であることがわかりました。

背景

360 Technology Public Accountはかつて記事「サーバーブラウザーのスクリーンショット」を公開しました。これは、非常に操作しやすいSelenium(Python SDK)に基づくサーバー側のスクリーンショットテクノロジーを詳細に説明しています。

著者はPython + Seleniumを使用して、クローラーと簡単な自動テスト機能を実装しました。これには、上記の記事で使用したテクノロジーとコンポーネントが含まれます。初心者は、この記事の実践的な指導を通じて、サーバー側のスクリーンショット機能を完全に実装できると思います。

ただし、Seleniumに基づくスクリーンショットの実装には、次の欠点があります。

  • SeleniumまたはPhantomJSをインストールする必要があります

  • PhantomJSがメンテナンスを停止しました

  • Seleniumを実行するにはChromedriverが必要です

  • chromedriverには、chromeのバージョンに関する特定の要件があります

  • スクリーンショットを撮るときは、html2canvas JSライブラリを使用する必要があります

全体的な環境の構築(さまざまなソフトウェア間のバージョンのマッチングを含む)は、適応とテストに多くの時間と労力を必要とすることがわかります。そのため、元の記事の著者は、上記の記事の最後に「統合されたDocker」ソリューションも提供しており、上記の環境をドッキングすると、環境の展開の問題を解決できます。

golangに基づくソリューションは、上記の問題を完全に解決できます。このソリューションのランタイム環境の要件は、Chromeブラウザのみをインストールする必要があることです。

ヘッドレスブラウザーはブラウザーレスフォームであり、ブラウザーを開かなくても、HTMLの取得、JavaScriptの実行、ターゲットWebページのレンダリング、Cookieの取得など、ブラウザーがサポートするすべての機能を使用できます。この記事では主にヘッドレスクロムを使用していますが、下記の「ブラウザ」とはヘッドレスクロムを指します。メインフレームワークgolangプログラムでヘッドレスクロムを簡単に使用するには、いくつかのオープンソースフレームワークが必要です。ヘッドレスクロムインタラクションを実装する多くのライブラリがあります。比較した後、私はchromedpを選択しました。chromedpの主な機能は次のとおりです。

  • ブラウザを駆動するためのより高速で簡単な方法を提供します
  • 豊富な基盤となるAPIインターフェイスを提供します(CDPプロトコル-Chromeデバッグプロトコルに基づく)
  • SeleniumのWebElementアクションに似た、柔軟な上位APIインターフェース(アクションとタスク)を提供します
  • ブラウザ自体を除いて、外部の依存関係はありません(Selenium、PhantomJSなど)。
  • 「一度コンパイルして、どこでもコピーして、どこでも実行する」(golangの機能に基づく)

インストールを実装する

go get -u github.com/chromedp/chromedp

スクリーンショットの実装コード

package main

コンパイルと実行後、コード内のURLスクリーンショットの効果は次のとおりです

image.gif

PDFのエクスポートこのフレームワークでは、次のメソッドを呼び出すだけで、URLが指すWEBページをPDFファイルとして簡単にエクスポートすることもできます(ブラウザーの「PDFとして印刷」機能を呼び出します)。

// 导出指定元素为PDF

360.cn Webサイトを例にとると、エクスポートされたPDFの効果が下の図に示されています

画像

次の方法を使用して、フルスクリーンの写真をキャプチャします

func main() {

360.cn Webサイトを例にとると、全画面画像を傍受した場合の影響を以下に示します。

画像

他のデバイスのシミュレーション Chromedpは複数のデバイスのシミュレーションをサポートします(ブラウザーのユーザーエージェントの方法を変更することにより)。次のコードは、iPhone7をシミュレートするリクエストを実装します。

func main() {

効果は以下の通りです

画像

結合された操作 chromedp自体は、ユーザーが実行するWEB操作アクションを結合するためのActionsおよびTasksデータ構造を提供します。詳細については、githubホームページで以下の例を確認できます。ここでは繰り返されません。最後に書く

golangとchromedpフレームワークを使用して、クロムのCDPインターフェイスの助けを借りて、ほとんどすべてのブラウザー操作をヘッドレスクロムに実装できます。

2.1の例では、40行未満のコードを使用してサーバーブラウザーのスクリーンショット機能を実装しました。同時に、Chromeブラウザ、golang SDK、およびchromedp自体のコードを除いて、他のコードやツールへの参照はありません。

上記のテスト結果に基づいて、開発を継続できます。

  • 他の製品プロジェクト用の便利で用途の広いサーバーページ[スクリーンショット/ PDFエクスポート]ツール。アプリケーションシナリオ:
  • フロントエンドは美しいスタイルのチャートを開発しました。これを写真またはPDFとしてメールの添付ファイルとしてエクスポートし、ユーザーに送信して表示する必要があります。
  • ユーザーがシステムにログインしてデータを表示せずに、重要なインジケーターとチャートを定期的にユーザーのメールボックスに送信する
  • WEB製品のテストを自動化するための効率的な[WEB自動テストプラットフォーム]を開発します。アプリケーションシナリオ:
  • オンライン環境のアップグレード後、テストケースとテストの主要機能を自動的に実行します(ログイン、追加、テストデータの表示、インターフェイスの戻りデータの確認など)。

サービスの推奨

元の記事を公開0件 ・いい ね0件 訪問数338

おすすめ

転載: blog.csdn.net/weixin_47143210/article/details/105659098