You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
const assert = require('assert') const url = 'http://***/' // テストするURL const id = 'takeda' const passwd = 'shinji' let newTab; describe('access to React Test', () => { it('01', () => { // TOPにアクセス browser.url(url) const title = browser.getTitle() assert.equal(title, 'React Test') browser.saveScreenshot('capture/01_home_first.png') }) it('02', () => { browser.click('#id_input') browser.saveScreensh
JavaScript Injection with Selenium, Puppeteer, and Marionette in Chrome and Firefox Browser automation frameworks–like Puppeteer, Selenium, Marionette, and Nightmare.js–strive to provide rich APIs for configuring and interacting with web browsers. These generally work quite well, but you’re inevitably going to end up running into API limitations if you do a lot of testing or web scraping. You migh
やりたいこと Puppeteerによるクローリングでスクリーンショットを取得する。 Resemble.jsを使って時系列による二地点の画像比較を行う。 Resemble.jsは二つの画像の比較を行った上で、差分部分のピクセルに色を付けた比較画像を出力してくれるので、差分ピクセルが一定比率を超えた場合に、Jasmineによるテストが落ちるようにしたい。 背景 「1ピクセルを笑うものは、1ピクセルに泣く。」 Webメディアを運営している会社などでは、1ピクセル程デザインがずれただけで収益が大きく変動すると言うのもよく聞く話ですね。 そこまでシビアな環境にいなくても、例えば、cssをちょこっといじりたい時に、他の画面のどこのデザインに跳ねてるのかが分からず、不安になったりしますよね。そのcssが長い年月をかけて肥大化していて、複雑怪奇に色々なところに当たっていたりするものだったりするとなおさらで
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() 表示されたダイヤログのタイプを取得
🕹 Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. This guide has recipes for automating Web Performance measurement with Puppeteer. An accompanying GitHub repository for this write-up is also available. Get a DevTools performance trace for a page load Puppeteer API: tracing.start() const puppeteer = require('puppeteer'
puppeteerはHeadless Chromeであり、GoogleChrome公式が出しているだけあり安心感があり活用シーンが増えていくと思います。 GoogleChrome/puppeteer: Headless Chrome Node API 今回は、ツイートのurlをクエリとして与えると、そのツイートを切り取って返すAPIを書きました。 akameco/capture-tweet-api cloneしてnpm startすればport 3000で動きます。 localhost:3000?url=ツイートのurlにアクセスすると、そのツイートのキャプチャが返ります。時間はかかりますが。 しかし、デモ画像の内容を見ればわかるとおり、aws lambdaにデプロイしようとしましたが以下の理由で失敗しました。 puppeteerはnode v7以上が要求されますが、aws lambdaの
GoogleChrome/puppeteer: Headless Chrome Node API というHeadless Chromeを操作するJavaScriptライブラリが出たので使ってみました。 何度も実行してロボット判定されてしまったので、実際にはHeadlessで動作確認していないが(おそらく)こんな感じで取得できるはず。 2017/09/10追記デバッグモード以外では毎回ロボット判定されてしまうため、Cookieからログインする方法に変えました。 初回ログイン時は、デバッグモードで動かし、Cookieを保存し、2回目以降はCookieからログインする。 インストール const puppeteer = require('puppeteer'); const fs = require('fs'); const cookies_path = './cookies_amazon.js
先日、毎朝8時に私の住んでいる地域の洗濯指数をSlackで送ってくれるプログラムを作りました。天気予報とか自分で見ないもので、、今日洗濯しようかどうか決めるのに役立っています。 仕組みとしては、GCPのCloud Scheduler→Pub/Sub→FirebaseのCloud Functionsの流れでPuppeteerでtenki.jpの特定のページをスクレイピングしています。Puppeteerいいですよねぇ。 ただ、最初に実装したときはPuppeteerの速度があまりにも遅すぎて、タイムアウト(30秒以上)が発生してしまう状況でした。スクレイピングしているのは1つのページだけなので、どう考えてもおかしかったです。(というかそもそも、Puppeteerのlaunchの時点でかなり時間がかかってるっぽかった)調べてみたところ、同じことを感じてる人は他にもいるようで、公式にもissueが立
Webサイトのスクリーンショットを取るCLIツールsite-checkerを作った。 インストール方法を書いていて、「Node.jsのvX.X.X以上をインストールして下さい」というのも今日的ではないなぁと感じて、実行環境のバージョンを気にせず利用できるようDockerイメージも用意した。その際、ちょっと引っかかったことを書く。 利用バージョン Puppeteer v0.10.2 Node.js v8.4.0 の公式Dockerイメージ Dockerfileの作成 最終的に作成したDockerfileは次の通り。 FROM node:8.4 MAINTAINER HeRoMo RUN echo 'deb http://ftp.jp.debian.org/debian jessie-backports main' >> /etc/apt/sources.list RUN set -ex; \
テストの自動化なんかを検証していたとき、E2Eテストってどうするんだ? Seleniumとかそういうの? などといろいろ調べていたことがあります。 JenkinsからE2Eテスト用スクリプト起動、テスト実行サーバーで走らせて、スクリーンショット取…って、サーバーに画面ねぇし…あ、Xvfbとか使えばできるんだ…めんどいな…うーん…と、もにょもにょしておりました。 Google Chromeのヘッドレスモード いろいろ調べていたところ、Chromeにヘッドレスモードというものがあるのを知りました。 この機能を使うと、GUIのない環境でもChromeが使えてしまいます。Webアプリの操作やHTMLの取得はもちろん、スクリーンショット保存やPDF保存なども可能です。 そしてこれは “ブラウザ” なので、今っぽいなんかすごいフロントエンドでもキッチリ動くところも強みですね。 Node.jsライブラリ
はじめに Puppeteerはプログラムからブラウザ(Chrome or Chromium)を操作して利用できるNode.js用のライブラリです。Puppeteerを使用することで、 Webサイトを操作する処理の自動化 スクレイピング クローリング WebサイトのPDF化 Webサイトのスクリーンショット取得 などが簡単に行えます。 Puppeteerは裏側でブラウザを起動するため、CPUやメモリなどのリソースを多く使用します。PuppeteerをAWS Lambda上で利用することで、同時実行の際のCPU負荷やメモリ使用量を気にすることなく、スケールする環境で利用できるようになります。 PuppeteerをLambdaを利用するための記事はたくさん存在しますが、古いものだと色々と手順が面倒だったり、動かなかったりするものもあります。 ここでは、2019年9月時点で、PuppeteerをL
どうも、大曲です。 3月から子会社から本社に戻ってきました。 最近では開発より組織の整備!?とか何か良く分かんないコトやっています。 良い意味の何でも屋を目指せるように頑張ります。 今回はpuppeteerを使ったスクレピングが便利だったので紹介します。 やったコト puppeteerを使って実現した処理は以下の通りです。 スクレイピング先のaタグのリンク取得 スクレイピング先で発生したリクエストの取得 全体のコードはGitHubにあります。 ブログでは書き方をいくつかピックアップして紹介します。 https://github.com/oomatomo/puppeteer-api 最近のスクレイピング事情(個人的な感想) 昔:HTMLペライチ(裏でPHPとかHTMLを生成していた) 今:AngularとかReactとかVue.js(ブラウザ側でDOMの構築..etc) 昔はHTMLさえ取得
はじめに 今回のはNode単体で実行可能なPuppeteerの長所を活かして Slackとの連係機能を足してみようと思います。 nodeの実行環境はHerokuを使用します。 ちなみに、HerokuではなくGCPに実装しようとすると地雷があり動かすことができなかったので、詳細はページ下部で見てください。 google analyticsのオーガニック検索結果が取得出来なくて皆困っているので URLを入力すると、どのキーワードで何番目に表示されてますよ〜的な事ができるようにしてみたいと思います。 この記事のゴール お手軽感ハンパないPuppeteerを、価値ある仕組みとしてユーザーへお手軽にお届けできるようにしたいわけです。 その為に、今回はユーザーがSlackを使い、Puppeteerを利用して何かできる仕組みを考えてみたいと思います。 Slackの設定 slack側のインターフェースとし
評価時期で自分のアウトプットの様子を出す必要があり、この機会にTypeScript + puppeteerでシュッとスクレイピングするの試してみるかと思い、やってみた。 完成したもの https://github.com/shibayu36/tools/blob/a7156bc03620700105cc52e54d69cac38b13f40e/script/blog-ranking.ts スクリプト内でurls, start, endを定義しておくと、特定期間の総記事数や総ブックマーク数、記事の情報を出してくれるようになった。 使い方は git clone https://github.com/shibayu36/tools.git cd tools npm install npx ts-node script/blog-ranking.ts コード /* eslint-disable @
memlab is an end-to-end testing and analysis framework for identifying JavaScript memory leaks and optimization opportunities. Online Resources: [Website and Demo] | [Documentation] | [Meta Engineering Blog Post] Features: Browser memory leak detection - Write test scenarios with the Puppeteer API, and memlab will automatically compare JavaScript heap snapshots, filter out memory leaks, and aggreg
月間100万人以上利用するサービスをSPAにしたあとSEOで苦戦したので、DynamicRenderingを入れた話DockerpuppeteerFargateDynamicRenderingrendertron TD;LD ・SEO対策をちゃんとせずにSPA化に踏み切った直後、Google検索流入が120万人/月もいたのが60万/月まで下がりました。 GoogleAnalyticsで毎週5〜10%ずつユーザーが減っていく恐怖がありつつ、 会社自体がバタバタしていたので対策が後手に回り3ヶ月放置してしまいました。 その間、全くなにもできなかったわけではなく、WEBフレームワーク(Django)が吐き出すHTMLで対策していたのですが、SEO評価がどんどん下がっていくので本腰入れてDynamicRenderingを入れることにしました。 ・弊社サービス全てで使えるようにしたので、今後はSEO
また新しい Docker イメージ作ったので紹介する。 https://hub.docker.com/r/yamitzky/puppeteer-cli Puppeteer とは? github.com Chrome Headless を Node で触るためのライブラリで、URLを見ると分かる通り、 Chrome のチームが出しているものです。 Puppeteer-CLI は? Puppeteer を CLI から動かす、 Docker イメージです。現在は、スクショを撮る機能のみ対応しています。 Chrome Headless そのものを Docker で動かすのに比べてのメリットは、 Docker での連携を前提にしていて、 標準出力にスクショ結果を吐き出すことができる ※Base64エンコードされています CSSを埋め込めるので、日本語フォントとかも行ける 今後の発展性 ※ 現在は未
2019/10/4 追記:本APIのCI/CDについて触れた続編を書きましたので、よければ併せてご覧ください。 CRMチームのyktakaha4です。 今日は、私たちが日々開発・運用しているハンズネットにおけるレガシーマイグレーションの現場をお届けします。 みなさんは、Excel、とりわけVBAはお好きでしょうか? 方々のエンジニアから親の仇のように忌避されながらもなぜだか中々無くならず、今日においても大小様々な企業で使われ続ける不思議な存在です。 嘘だとお思いでしたらInxxxxやレバxxxで「VBA」で検索してみてください。年収700万円も夢じゃないみたいですよ…? 私はExcelもVBAも好きです(でした)。 Officeの入ったWindowsがあれば使えるという可搬性に加え、 ユーザーフォームやExcel関数、CreateObjectやDeclareまで駆使すれば、控えめに言ってど
Node.jsにはPuppeteerという画面を表示せずにChromeを扱えるライブラリがあります。それを利用し、URLをパラメータとして与えるだけでスクリーンショットを画像としてブラウザで表示させることができるサーバーアプリケーションを作成しました。 実際にこのような画像が作成できます。例として下記はボード内投稿にコードを入れた場合に表示される画像です。 下記は記事の画像です。 HTML, CSSから生成しているためドロップシャドウとかもこんな感じで簡単に効かせる事ができています。 GitHubで公開していますので、とりあえず使って見たいという方は記事を読み飛ばして最後の方にあるリンクをご利用ください(こらえきれぬ涙で頬を濡らしながら) 何が便利なのか WebサービスのURLをTwitter等でシェアするだけで、URLだけでなくツイートに画像も表示されるのをよく見ると思います。 これは画
[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 も実行
これは ドリコム Advent Calendar 2020 の7日目です。 tl;dr CDPのscreencastFrameで動画を撮ってみるサンプル puppeteer[“Page”][“screenshot”]で動画撮るのはパフォーマンスに難がありそう 対象読者 puppeteerを使っていて(使ってみたくて)、動画を撮りたい人 puppeteerでE2Eテストを行っていて(行いたくて)、デバッグの手段を増やしたい人 本記事で扱うソフトウェア puppeteer: https://github.com/puppeteer/puppeteer Chrome(Chromium)を操作するAPIを提供するNode.jsライブラリです、devtools相当のことができます 今回は、v5.5.0を使用します node.js: https://nodejs.org/ ブラウザー外で動くJavaS
さてさてどれを使って良いのやら…。今回は 「何となく聞いたことあるから使ってみたい」という独断で ●Protractor ●Puppeteer ●cypress の 3 つをお試しで使ってみようと思います。 2)テスト対象のデモアプリ E2E テストの対象として、このような簡単なデモアプリを作ってみました。 ユーザー名が ringtail003 ならログインできます。パスワードは何でも通ります。ガバガバアプリです。 E2E でテストしたい内容(= シナリオ)は下記の通りです。 正常ケースのログイン/ログアウト ユーザー名 ringtail003 でログインするとプロフィールのページに遷移する プロフィールのページでログアウトする 異常ケースのログイン エラーメッセージが表示されログインできない 3)Angular のサンプルテスト掘り下げ編 実は Angular では E2E の雛形のテス
前提条件 開発環境 Windows10 Node.js 12.14.0-x64 AWS CLI VS Code AWSアカウント IAMユーザー※ ※IAMユーザーはServerlessFrameworkのリソース作成に必要な権限が付与されていること(今回はAdministratorAccessを使用)、AWS CLIに--profile serverlessで設定していることを前提とする Serverless Framework のプロジェクト作成 AWSリソースの管理にServerless Frameworkを使います。AWS Lambdaを使う上で必要な面倒くさいことを大体やってくれます。すごい。 Serverless Frameworkのインストール サービス作成コマンドを使うためにグローバルインストールします。 どうしてもグローバルに入れたくない人は、後述するファイル群を自作して
はじめに 初期のスタートアップでのリリース前の最低限のテストとしてJestとPuppeteerを使ってVisualレグレッションテストと挙動のレグレッションテストを作りました。備忘も兼ねてまとめてみます。 今回使うツール 主に使うものは以下の2点です。PuppeteerとJest自体の説明は割愛します。 jest-puppeteer 2018年3月にリリースされたJestとPuppeteerを連携するためのツールです。 https://github.com/smooth-code/jest-puppeteer/ Jestのテスト内でPuppeteerのpageオブジェクトが使えるようになります。またいくつかのmatcherが追加されます。 例 // フォームを埋める。対象のフォーム及びフィールドが見つからない場合はテストが失敗する await expect(page).toFillForm
const fs = require('fs'); const assert = require('assert'); const puppeteer = require('puppeteer'); (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); // PDF出力対象ページ await page.goto('https://www.google.co.jp/'); // PDF作成処理 await page.pdf({ path: 'google_top.pdf', }); browser.close(); console.log('PDF出力完了'); })();
masalib.hatenablog.com 管理系処理なら必須のログイン処理を作ってみました 2018/04/27の時点の最新のバージョン(V1.3)だと動かないので修正しました 設定ファイル ログイン用のモジュール ログイン処理(main処理) 参考サイト 参考サイトと違う点 今後 設定ファイル テスト用実行フォルダ/config.json { "SITE_ID": "masalib", "SITE_PW": "password" } ログインするならこれは必要ですよね git登録するならこの部分を除外設定かな ログイン用のモジュール //設定ファイルを読み込む const {SITE_ID, SITE_PW} = require('./config.json'); const cookies_path = './cookies_site.json'; /** * Cookieなしのロ
Puppeteer API Tip-Of-Tree Interactive Documentation: https://pptr.dev API Translations: 中文|Chinese Troubleshooting: troubleshooting.md Releases per Chromium version: Chromium 100.0.4889.0 - Puppeteer v13.5.0 Chromium 99.0.4844.16 - Puppeteer v13.2.0 Chromium 98.0.4758.0 - Puppeteer v13.1.0 Chromium 97.0.4692.0 - Puppeteer v12.0.0 Chromium 93.0.4577.0 - Puppeteer v10.2.0 Chromium 92.0.4512.0 - Pupp
Copyright (c) 2023, Intercom, Inc. (legal@intercom.io) with Reserved Font Name "Inter". This Font Software is licensed under the SIL Open Font License, Version 1.1.Copyright (c) 2023, Intercom, Inc. (legal@intercom.io) with Reserved Font Name "Inter". This Font Software is licensed under the SIL Open Font License, Version 1.1.
Puppeteer is a powerful Node.js browser automation library for integration testing and web scraping. However, like any complex software, it comes with plenty of potential pitfalls. In this article, I'll discuss a variety of common Puppeteer mistakes I've encountered in personal and consulting projects, as well as when monitoring the Puppeteer tag on Stack Overflow. Once you're aware of these probl
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く