Firebase FunctionsとPuppeteerでスクレイピングの定期実行するのを作ってみた
作ったものフロント側は全く作ってないんですが、私が住んでいるバンクーバーのFront End Developerの平均給与をいくつかのサイトからスクレイピングしてFirebaseのデータベースへ格納するといったとてもシンプルなものを作りました。日本ではどれぐらいあるのかわからないんですが、こっちだとポジションの平均給与がユーザーからの自己申請で出てます。調べてて思ったんですが、サイトによってすごくばらつきがありました。 後々フロント側を作って公開しようと思います🚀 Firebase FunctionsFirebase Functionsっていつも個人的には読んでるんですが、正式にはCloud Functions for Firebaseです。Google Cloud Platformのサービスの一つCloud FunctionsをFirebaseと連携させる感じですね。基本的にはFire
Learn Playwright & Puppeteer | Checkly
Tips, tricks, and in-depth guides from the trenches. Learn how to use the popular open-source browser automation frameworks, Playwright and Puppeteer. This guide provides detailed information and examples how you can write high-quality scripts for testing and synthetic monitoring. Getting Started Have a look at how Playwright & Puppeteer work, what similarities they share, as well as the noticeabl
netlify-lambda で puppeteer を起動する
ローカル環境で netlify lambda のエミュレータを動かす - mizdev を読んでることが前提 tldr netlify-lambda は aws lambda なので、AWS 用にビルドされた chrome が使える ローカル開発環境では素の puppeteer にフォールバックする コード yarn add puppeteer chrome-aws-lambda webpack.config.js の externals でビルドしないように指定。 // webpack.config.js externals: { puppeteer: "puppeteer", "chrome-aws-lambda": "chrome-aws-lambda", lambdafs: "lambdafs", }, (functions/api.js にビルドしていたのを functions/
GitLab CIとPuppeteerを使ってはてなブログのデザインを継続的にデプロイする - pixiv inside - pixiv inside
こんにちは！ピクシブ福岡オフィスでエンジニアをしている@tasshiです。 今回はpixiv insideリニューアルのデプロイ環境についてお話ししたいと思います。 pixiv insideについて 「pixiv inside（ピクシブ インサイド）」は、ピクシブ株式会社の日常を伝えるためのオウンドメディアです。 2014年に「pixiv engineering blog」としてスタートし、2017年に現在の「pixiv inside」になりました。 WordPressからはてなブログへ pixiv insideでは2020年1月にセルフホスティングのWordPressからはてなブログへと移行し、新デザインへのリニューアルを行っています。 デザインリニューアルではデザイナーさんの作ったデザインを元にして、エンジニアがJavaScript, CSSなどのデザインリソースを実装します。 その後
Puppeteer Sandbox | Headless Chrome Playground
Embed a button to share your Puppeteer script. The embed code below are designed to be used in README files, documentation sites, and anything that renders as an html file. You can also just share a link to this page. Markdown [](https://puppeteersandbox.com/) HTML <a href="https://puppeteersandbox.com/"><img src="https:/
Puppeteerで不要なCSSを消す - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの穴井（@pirosikick）です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいです！ フロントエンドエキスパートチームでは、サイボウズの各プロダクトが抱えるWebフロントエンドの課題を解決するのが仕事の一つです。 blog.cybozu.io 最近の取り組みとして、Puppeteerで不要なCSSを消した事例を紹介します。 このブログは、6/19に福岡で開催した「Google I/O '19のWebをまとめる会」で登壇したときの内容を詳細に説明しつつ、アップデートした部分もあるので、発表見たぞ、スライド見たぞという方も見ていただけますと幸いです。 speakerdeck.com きっかけ とあるプロダクトのCS
puppeteerでステータスコード系エラーとconsoleのエラーを拾う | isoppp.com
意外と情報がなく、意外とはまったため。 今回のソースはこちら（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
puppeteerでダイヤログを扱う方法 | <HelloWorld/>
puppeteerでJavaScriptによるダイヤログを扱う方法です。 class: Dialog class: Dialog | puppeteer ダイヤログを扱う際はDialogクラスを使います。 使い方はDialogクラスを呼び出し、ダイヤログが出現した際の処理をセットしておきます。 以下は簡単な例です。 page.on('dialog', async dialog => { await dialog.accept(); }); Dialogクラスのメソッド dialog.accept() ダイヤログが表示された時に、trueを実行する。 dialog.dismiss() ダイヤログが表示された時に、falseを実行する。 dialog.message() ダイヤログが表示された時の、ダイヤログメッセージを取得する。 dialog.type() 表示されたダイヤログのタイプを取得
FirebaseのCloud Functionでpuppeteerを動かす解説 - Kesinの知見置き場
先日、GAEとCloud Functionsでpuppeteerを動かすコードを紹介しているエントリが公開されました。 cloud.google.com puppeteer、というかChromeを動かすためには実は様々な依存ライブラリをインストールする必要があるのですが、Cloud Functionでは環境そのもののカスタマイズはできなかったので今まではpuppeteerを動かすことはできませんでした。 GAEとCloud Functionでnodejs 8が使えるようになったのと同時に、実行環境のベースのイメージが新しくなった（Ubuntu 18.04とのこと）のでpuppeteerが使えるようになったようです。 ちょっと試してみる分には、先程の記事のソースコードがgithubにアップされているので自分のGCPのプロジェクトにデプロイすることで動くことが確認できると思います。 ただFir
Puppeteerによるフルページスクリーンショットを画像遅延読み込みに対応させる - DeNA Testing Blog
こんにちは、薦田です（@toshiya_komoda）。 今回はChromeブラウザのブラウザテスト自動化ツールであるPuppeteerに関するTipsを紹介します。 Puppeteerによるフルページスクリーンショット Puppeteerは、Chrome DevTools ProtocolのNode.jsクライアントであり、Chrome DevToolsチームがメンテナンスしています。 その主な用途の1つにブラウザ自動テストが挙げられます。 PuppeteerはChromeの操作に特化しており、操作対象がChromeに限定されるもののSeleniumにはない便利なAPIを利用できます。 Puppeteerで利用できる便利なAPIの1つに、フルページスクリーンショットがあります。 フルページスクリーンショットとは、ウェブページの上端から下端までを1つなぎの画像としてスクリーンショットを撮っ
Lighthouseのバッチ実行と結果レポートをいい感じでやるためのパッケージを作りました - 迷ったらカレー
nightharborというパッケージを作りました。対象ページのリストを読み込み、ひたすらlighthouseを実行して、それらの結果をレポーティングためのものです。名前はlighthouse(灯台)が稼働してそうなとこ、という安直な感じでつけました。 github.com lighthouseって？？？ 本題の前に、lighthouseについて軽くお話しします。ご存知の方も多いかとおもいますが、Googleが提供しているサイトパフォーマンス計測ツールです。サイトパフォーマンスをスコア化して表示してくれるだけでなく、読み込むまでにどれくらい時間がかかったのか、ページ速度を遅くしている要因が何なのか、どうすれば改善できるのか、などいろいろ丁寧に教えてくれるステキツールです。Chromeの開発者ツールにある Audits から使うことができます。ブラウザからの使い方は こちらなどをご覧いただけ
E2EテストをPhantomJSから、Puppeteer + Headless Chromeへ移行しました - LCL Engineers' Blog
Webエンジニアの森脇です。LCLでは、以前より「Capybara + PhantomJS」でE2Eテストを行っていましたが、「Puppeteer + Headless Chrome」へ変更しました。 元々は、軽くPuppeteerを触ってみるだけのつもりでしたが、できが良く本格的にE2Eテストへ導入することにしました。 本記事では、変更の経緯や、PuppeteerでE2Eテストを実装する上でのTIPSを紹介します。なお、Capybara + PhantomJSを利用したE2Eテストは、以下の記事でご紹介しております。 techblog.lclco.com 変更の経緯 PhantomJSは古めのWebkitをベースにしているため、一部のCSSがうまく適用されず、Headless Chromeへ移行を以前より考えていました。そんな中、PhantomJSの開発が終了したこともあり、移行すること
見てるページを全部保存するという行ない - Diary
見てるページを全部保存するという行ない をもうずっとしていて、以下のような user.js でページを全部保存してます。 // ==UserScript== // @name 見たサイト全部保存 // @namespace http://tampermonkey.net/ // @version 0.1 // @author You // @match http://*/* // @match https://*/* // @grant GM_xmlhttpRequest // @noframes // ==/UserScript== if(!!document.querySelector('title')){ const title = document.querySelector("title").textContent; const url = location.href; GM_x
puppeteer + express + mocha で快適 TDD している話 - ジンジャー研究室
TDD という用語を使うとテストおじさんがやってきて、それはそうじゃないとか色々言い出すと思うんだけど、それが趣旨ではないので勘弁して欲しい。予防線ここまで。 Puppeteer でテスト Puppeteer が世間的にも個人的にもブームだ。ヘッドレス Chrome を操ってクローリングしたりスクリーンショットを撮ったり色々出来る。 github.com で、あれこれと遊んでいるうちにテストに使えるんじゃね？ということに気づいたので実践してみたら快適だったという話。ブラウザ操作してテストというのは昔から Selenium というのがあり、こちらはクロスブラウザで出来たりするんだけどまあ大掛かりでだるさを感じてしまう。メリットデメリットの比較はさておき、どうせならナウいやつを使ってみたい。よし使おう。 何をテストするか 普段から画面を見ながら開発しているので、どこに何が表示されているべきとい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - addyosmani/puppeteer-webperf: Automating Web Performance testing with Puppeteer 🎪
GitHub - argos-ci/jest-puppeteer: Run tests using Jest & Puppeteer 🎪✨
GitHub - stevenvachon/broken-link-checker: Find broken links, missing images, etc within your HTML.
PuppeteerでいらないCSSを消す
Add puppeteer-screenshot by styfle · Pull Request #207 · vercel/now-examples
GitHub - puppeteer/examples: Use case-driven examples for using Puppeteer and headless chrome
