複数のURLのステータスコードを調べるには 複数のURLのステータスコードを調べるにはconst urlsに調べるURLを入れてpage.gotoから_statusでステータスコードを取得する。 const puppeteer = require('puppeteer'); const DL = { waitUntil: 'domcontentloaded' }; const urls = [ 'https://iwb.jp/s/foo.html', 'https://iwb.jp/s/bar.html', 'https://iwb.jp/s/404.html', ] puppeteer.launch().then(async browser => { const page = await browser.newPage(); let len = urls.length; for (con
意外と情報がなく、意外とはまったため。 今回のソースはこちら（github) 準備 公式がasync/awaitが多いので一応予習 それに伴いnode.jsは8系（LTS基準） 適当なディレクトリを作る npm init npm i puppeteer エラーを吐くindex.htmlの作成 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test page</title> </head> <body> <img src="http://placeholder.via/50x50" alt=""> <img src="hoge.png" alt=""> <script> console.log('hoge') console.log(hoge) </script> </body> </html> c
Pupeteerでクローリング処理を作成した時の注意事項として、 全ての処理が終了した時にbrowser.close() を呼び出さないと処理が終了しません。 //ページ内のatagのhrefを全部取得 async function getAtagHref(url) { let outputs = []; const puppeteer = require('puppeteer'); const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(url, {waitUntil: "domcontentloaded"}); //ここでエラーが発生して終了 throw new Error('無理やりエラー!'); outputs = await page.$$eva
概要 puppeteerを利用してスクレイピングする際、使用頻度が低ければ毎回puppeteerからchromeを起動すれば良いのですが、使用頻度が高かったり並列処理を行わせようとすると、起動する分だけchromeのプロセスが立ち上がる事になり、リソースを逼迫します。 また上記の問題により、一つのchromeを使い回すとしても、工夫をしないとページのプロセスが異常に溜まってしまったり、ページがクラッシュしてそれ以降そのページでスクレイピングができなくなるという事象が発生したりします。 上記、対策を重ね最近やっと安定稼働するようになったので、そのやり方を共有します。 細々と書いていますが、やっている事は問題があったら愚直に再起動させているというだけです。 puppeteerの起動 以下ログが多分に含まれていますが、単純に起動させるだけです。 初回起動させた後は後述するpage作成に失敗した時
テストの自動化なんかを検証していたとき、E2Eテストってどうするんだ？ Seleniumとかそういうの？ などといろいろ調べていたことがあります。 JenkinsからE2Eテスト用スクリプト起動、テスト実行サーバーで走らせて、スクリーンショット取…って、サーバーに画面ねぇし…あ、Xvfbとか使えばできるんだ…めんどいな…うーん…と、もにょもにょしておりました。 Google Chromeのヘッドレスモード いろいろ調べていたところ、Chromeにヘッドレスモードというものがあるのを知りました。 この機能を使うと、GUIのない環境でもChromeが使えてしまいます。Webアプリの操作やHTMLの取得はもちろん、スクリーンショット保存やPDF保存なども可能です。 そしてこれは “ブラウザ” なので、今っぽいなんかすごいフロントエンドでもキッチリ動くところも強みですね。 Node.jsライブラリ
こんにちは、薦田です（@toshiya_komoda）。 今回はChromeブラウザのブラウザテスト自動化ツールであるPuppeteerに関するTipsを紹介します。 Puppeteerによるフルページスクリーンショット Puppeteerは、Chrome DevTools ProtocolのNode.jsクライアントであり、Chrome DevToolsチームがメンテナンスしています。 その主な用途の1つにブラウザ自動テストが挙げられます。 PuppeteerはChromeの操作に特化しており、操作対象がChromeに限定されるもののSeleniumにはない便利なAPIを利用できます。 Puppeteerで利用できる便利なAPIの1つに、フルページスクリーンショットがあります。 フルページスクリーンショットとは、ウェブページの上端から下端までを1つなぎの画像としてスクリーンショットを撮っ
web上の情報を抽出するスクレイピング技術ですが、いままでphantomJSで行っていましたが、chromeがヘッドレスブラウザに対応したとのことで、そのnodeライブラリであるpuppeteerで実践してみました。 環境構築 とりあえずお試しということで、dockerで構築しました。 構成はnode.jsのdockerイメージにpuppeteerを追加するかたちです。 下記2サイトの手順を大幅に参考にさせていただきました。 Docker コンテナ上で Puppeteer を動かす Puppeteer をDockerコンテナで利用する ディレクトリ構成はこんな感じ。 / ├ app/ │ └ script/ │ └ app.js │ └ data/ ├ docker-compose.yml ├ Dockerfile └ Package.json FROM node:9.2.0 RUN a
Puppeteer？ 読み方は「ぱぺてぃあ」。 Node.jsのライブラリでChromeを操作しDOMの要素を取得、ステータスコードを取得、レスポンスタイムを計測・・等々できます。 ※Chromeのデベロッパーツールで見れる情報は（たぶん）全てpuppeteerで取得できる Sample 「サイト内の各ページのタイトルが予測した値になっているか？」という自動テストをPuppeteerを利用して処理してみます。 大まかな流れは下記のようになります。 1. テストデータをCSVファイルから読み込み 2. 1行ずつループし、取得した値と予測した値を比較 3. 結果表示 Code $ tree -I node_modules . ├── package.json └── src ├── data │ └── title.test.csv ├── lib │ └── output.js
const puppeteer = require('puppeteer') const dotenv = require('dotenv') dotenv.config() const BRANCH_CODE = process.env.BRANCH_CODE const ACCOUNT_NUMBER = process.env.ACCOUNT_NUMBER const PASSWORD = process.env.PASSWORD; (async () => { // validate .env if (!BRANCH_CODE || !ACCOUNT_NUMBER || !PASSWORD) { console.log('Invalid Try. Make sure to create a file ".env" and write your BRANCH_CODE / ACCOUN
はじめまして。yamaimo (@yarnaimodev) です。Qiita 初投稿...というかネット上にちゃんとした記事を上げるの自体初めてな気がします。 1998 年生まれで、プログラミングとか Web デザインは独学で 3 年ぐらいやってます。TypeScript / Firebase / Node.js / React あたりが特に好きです。 この前 coliss で紹介された Can't Unsee を試してみたら 1 回目が 7,630 点、2 回目が 7,930 点でした。1 小規模ですが Mastodon インスタンスを管理してます。あと Helix キーボード をこの前組み立てた2んですがキー配列を変えたのがなかなか覚えられなくて死んでます。 開発環境は基本的に WSL + Hyper + fish shell と VSCode です。 今回 Puppeteer を使っ
こんにちは。フロントエンドエキスパートチームの穴井（@pirosikick）です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいです！ フロントエンドエキスパートチームでは、サイボウズの各プロダクトが抱えるWebフロントエンドの課題を解決するのが仕事の一つです。 blog.cybozu.io 最近の取り組みとして、Puppeteerで不要なCSSを消した事例を紹介します。 このブログは、6/19に福岡で開催した「Google I/O '19のWebをまとめる会」で登壇したときの内容を詳細に説明しつつ、アップデートした部分もあるので、発表見たぞ、スライド見たぞという方も見ていただけますと幸いです。 speakerdeck.com きっかけ とあるプロダクトのCS
GMOアドマーケティングのy.a.です。 PuppeteerはHeadless Chrome使うのを便利にするNode ライブラリです。 https://developers.google.com/web/tools/puppeteer/ （引用元：Puppeteer | Tools for Web Developer https://developers.google.com/web/tools/puppeteer/） ですのでスクレイピングなり、なにかWebページのテストを自動化したい場合に、比較的手軽に色々できます。 そこでPuppeteerに興味を持った方へ、なるべく簡潔にPuppeteerで出来ることをいくつか紹介したいと思います。 ※なお実行環境にNode.jsがインストールされていることが前提です。 インストール
この記事は、LIFULL Advent Calendar 2019の19日目（2019-12-19）の記事です。 はじめに 先日、LIFULLのSETグループから新しいOSSツールが発表されました Visual Testingに最適な画像差分検知ツール「Gazo-san」をOSS化しました この発表に触発され普段はバックエンド業務が多いのですが、 headless browser触って準備しておこうと思いPuppeteerの記事を書くことにしました この記事で作成したものはこちらに。何かの参考になればと思います。 https://github.com/hirokawai/endroll ちなみに、「Gazo-san」に関しては後日 「LIFULLその2 Advent Calendar 2019」カレンダーで記事が公開されるようで楽しみにしています。 puppeteerで動画 とはいえ、キャ
[puppeteer] ヘッドレスブラウザの操作でスクレイピング、クローリング 2018.05.14 Javascript Javascript, スクレイピング, テスト puppeteer とは GitHub – GoogleChrome/puppeteer: Headless Chrome Node API puppeteer とは、GUIを操作することなく、プログラムからAPIでブラウザ(Chrome)を制御できる Node.js で作られた ライブラリ です。ヘッドレス(GUIなし)でも制御できるので高速です。 Node.jsのライブラリとして提供され、npm からインストールすることで puppeteer から操作することになる最新の Chromium がインストールされるので、環境構築も簡単です。 内部では Chromium が動くことになるので、Javascript も実行
要約 ヘッドレス Chrome は Chrome 59 でリリースされています。これは、ヘッドレス環境で Chrome ブラウザを実行する方法です。つまり、Chrome なしで Chrome を実行することになります。Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォーム機能をすべてコマンドラインにもたらします。 なぜこれが有用なのでしょうか？ ヘッドレス ブラウザは、可視 UI シェルが必要ない自動テストやサーバー環境に最適なツールです。たとえば、実際のウェブページに対してテストを実行したり、その PDF を作成したり、ブラウザが URL をレンダリングする方法を確認したりできます。 ヘッドレスの開始（CLI） ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くことです。Chrome 59 以降がインス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く