タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
本記事はNRIネットコム Advent Calendar 2021 19日目の記事です。 🎄 18日目 ▶▶ 本記事 ▶▶ 20日目 🎅 はじめまして、Webディレクター／フロントエンドエンジニアの高木です。 今回はヘッドレスブラウザ*1「Puppeteer」を使ったスクリーンショット取得自動化についてご紹介します。 少しの手間で大きな時短になるので、ぜひお試しください！ この記事について 背景 対象読者 必要環境 環境の準備 使い方（基礎編） サイト全ページのスクリーンショットを取得する 使い方（応用編） 特定の操作をしたときのスクリーンショットを取得する 特定の要素をトリミングした状態でスクリーンショットを取得する 注意事項 終わりに この記事について 背景 Webディレクターの業務の中では、既存サイトの整理を行うことがままあると思います。 先日、「サイト全体のパーツを棚卸ししたい
Migrating Puppeteer to TypeScript | Blog | Chrome for Developers
We're big fans of TypeScript on the DevTools team—so much so that new code in DevTools is being authored in it and we're in the middle of a big migration of the entire codebase to being type-checked by TypeScript. You can find out more about that migration in our talk at Chrome Dev Summit 2020. It therefore made perfect sense to look at migrating Puppeteer's codebase to TypeScript, too. Planning t
いわゆる「ぐぐれかす」をPuppeteerで作って練習したときのメモ インストール済みのChrome for Macを使うには？ puppeteer標準でChromiumブラウザがくっついてくるが、Chromiumダウンロードめっちゃ時間がかかるので、とりあえず手元にChromeをインストール済みなら、それを使って自動操作をしたい。 puppeteer-core を使って、手持ちのChromeのゲストセッションを開くには？と調べたら、issueで質問 してる人がいて、「公式Docに書いてるでしょ」って書いてたｗ Macだったら const launchChrome = puppeteer.launch({ // MacにインストールされているChromeを使う。 executablePath: '/Applications/Google Chrome.app/Contents/MacOS/
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/
Puppeteer で Basic 認証が掛かったページにアクセスする方法をまとめてみた - Beeeat’s log
先日 Jest + Puppeteer の導入が完了した．その過程で Basic 認証が掛かったページに対して E2E テストを実行する必要があった．そのため，Basic 認証が掛かったページにアクセスする方法を調べ，対応したのだが，想定よりも時間が掛かったためまとめておく． 設定方法 調べた所，2つの方法を見つけた． page.authenticate を利用する方法 公式ドキュメントにある page.authenticate を使って Basic 認証のユーザとパスワードをセットし， page.goto でページにアクセスする． await page.authenticate({username: 'Basic 認証のユーザ名', password: 'Basic 認証のパスワード'}); await page.goto('Basic 認証が掛かったページのURL', {waitUnt
この記事ではPuppeteerでボタンをクリックする方法をHTMLのパターン別に解説します。 慣れていない方も理解しやすいようにコードの解説、コピペ用のサンプルコードもつけています。 Puppeteerでの文字入力や画面遷移の方法はPuppeteerの基本的な動かし方でも解説しています。 Puppeteerでボタンをクリックする書き方 （事前準備）デベロッパーツールでボタンのHTMLタグを確認する 上の画像の『submit』ボタンのように、inputタグでtype属性が付いているボタンはpuppeteerのpage.click()で押すことができます。 まずはCSSを確認しましょう。ブラウザがChromeの場合はデベロッパーツールでCSSを確認できます。 デベロッパーツールはWindowsはキーボードの『F12』、Macは『Command+option+i』で起動します。 マウスカーソルの
Getting to Know Puppeteer Using Practical Examples July 13, 2019 17 min read An overview, concrete guide and kinda cheat sheet for the popular browser automation library, based on Node.js, which provides a high-level API over the Chrome DevTools Protocol. Puppeteer is a project from the Google Chrome team which enables us to control a Chrome (or any other Chrome DevTools Protocol based browser) an
[追記] Windows 11では、inuxのGUIアプリをシームレスに利用できる「WSLg」という機能が追加されます。Puppeteerに内蔵されているchromiumも X環境を構築しなくても起動できるようになります。 puppeteer内蔵のchromiumも headless:false で普通に開く。 個人的にはこれが特にありがたいかな。 VcXsrvを使うより気軽に使えてデバッグしやすくなった。 イメージビューアーなんかもWSLから開けるのよい。 ちょっとしたことだけど、作業効率は上がりそう。 pic.twitter.com/6EwQbCu3jt — 清水正行 (@_shimizu) July 4, 2021 以下、元の記事。 WSL2でPuppeteerを使うための環境設定メモです。 ■wsl2(Ubunte)にpuppeteerをインストールする とりあえず、wslにpup
puppeteerのoptionsのメモ、とくにwaitUntilの値をよく忘れる Puppeteerで次ページへの遷移を待つ PuppeteerのwaitForNavigationで正しくページ遷移を待つ Puppeteer備忘録（Nuxt.js, ElementUI対応？） Chromeの起動パラメーターを調整する。 Run Puppeteer with Minimal Settings にあるように、Chromeの起動パラメーターを最小限の設定にすることが出来る。 --no-sandboxが効果がありそうだが、セキュリティ上のリスクもあるので、サイトによって使い分けが必要。 いろいろ試してみたが実感するほど差はなかったので、やみくも付けるのではなく、都度試しながらした方が良さそう。 const puppeteer = require('puppeteer'); const optio
この記事は個人ブログと同じ内容です http://ratatatat30.hatenablog.jp/entry/2021/06/13/114921 sekitats です。 さて、back check では E2Eテストツール Autify が導入されました。 1日触ってみたので所感を書きたいと思います。 よかった点 まず、海外発サービスかと思いきや、日本人が作った感のある馴染みやすいUIが良い。 シナリオ作成では、ブラウザでの操作をそのままレコーディングしてテストシナリオとして保存できるのが画期的だ。すぐに使い方を覚えることができた。 これであれば誰でもテストシナリオを書くことができるだろう。 そして、何よりクロスブラウザテストをサポートしているところが嬉しい。これだけで導入するだけの価値はある。 また、AI技術を使って変更の差分を検出するなど、きめ細かなサポートが素晴らしい。 ダミー
Node.jsでPuppeteerを使いChromeを実行して画面キャプチャを撮る | 株式会社ピース｜PEACE Inc.
Puppeteer(https://github.com/puppeteer/puppeteer)とは、Chromeを制御するための高レベルAPIを提供するノードライブラリです。 Puppeteerを使用してChromeをヘッドレスモード（GUIのない状態）で実行し画面キャプチャを画像として保存します。 （Puppeteerはデフォルトでヘッドレスで実行されますが、ヘッドレスではないChromeを実行することもできます。）
GitHub - yuiseki/twiseki: puppeteerでtwitterをスクレイピングするやつ
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
Puppeteer はてなブログで誰を購読中かわけわからなくなったら…購読中のブログ一覧と読者一覧 - LemonteaのUnity部屋
こんにちは。レモンティーです。 今回ははてなブログの読者リストと購読中のブログリストのお話です。 はてなブログはSNSではないので購読中の一覧を楽に見る機能はありません。そのためそこそこ数が増えてくるともうわけがわからなくなってせっかく購読していても読みたいものが埋もれていたりしますが手動で管理するのは非常に面倒です。そこで今回は例によってPuppetterで購読中のブログと読者のhatenaIdの一覧をつくります。サムネ一括変更↓の時も言いましたがエラーがでたユーザーはスキップしていくので歯抜けはログを見ながら自分で埋める必要があります。 www.sawalemontea.com 準備 概要 メイン部分 読者一覧 購読中一覧 一方向を探す おしまい 準備 PuppeteerだけでOKです。 npm i puppeteer 概要 読者一覧をsubscribers.txtに、購読中のブログ一
puppeteerを使うときは、別途インストールされたchromiumを操作する場合が多いのですが、ログインしてのスクレイピングなどを行うときは普段使っているchromeを操作したい場合があるのでそのやり方のメモです。 ※Chromeの実行ファイルの位置(パス)や、ユーザーデータディレクトリのパスは環境によって変わるのでパスを確認してコードを修正してください。 ローカルにインストールされているchromeを使う const puppeteer = require('puppeteer-core'); (async () => { const browserSet = { headless: false, executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\Chrome.exe', } const browser
const downloadPath = './download'; await page._client.send('Page.setDownloadBehavior', { behavior : 'allow', downloadPath: downloadPath }); await page.goto('https://www.google.co.jp/chrome/', {waitUntil: 'networkidle0'}); await page.waitForSelector('#js-download-hero'); await page.click('#js-download-hero'); await page.click('#js-accept-install'); let filename = await ((async () => { let filename;
Puppeteerにはまだまだ負けられないcheerio-httpcliの底力を見せる時が来た - Qiita
昨今のWEBスクレイピングといえばSPAなどの動的更新WEBサイトの増加もあってPuppeteerが主流になっていますが、かつて一世を風靡した（言いすぎ）cheerio-httpcliというスクレイピングライブラリもあるのをご存知でしょうか。 静的HTMLを解析してjQueryのように要素を検索・操作するいわゆる古いタイプのライブラリではありますが、まだまだ現役でやれるところを見せるべく、目玉機能をいくつか引っさげてバージョン0.8.0へと進化したのでこの場を借りて紹介させていただきます。 Puppeteer使いの方にも役立つ情報もあるのでぜひぜひ最後までご覧ください。 ちなみに、cheerio-httpcliについての紹介記事は過去に何度かQiitaで紹介しているので「cheerio-httpcli？なにそれおいしいの？🤔」的な人はそちらもご覧になるとより分かりやすいと思います。 過去
JSer.info #472 - Safari Technology Preview 99リリース。 Release Notes for Safari Technology Preview 99 | WebKit Safari Technology Preview 99ではAdobe Flashのサポートが削除されています。 また、今までは-webkit- prefixがついていましたが、CSSのimage-set()構文がサポートされました。 AVA 3.1.0がリリースされました。 Release 3.1.0 · avajs/ava TypeScriptをサポートするために@ava/typescriptというパッケージが追加されています。 仕組み的には、内部的にTypeScriptファイルをコンパイルするのではなく、コンパイル済みのファイルを読み込むようにパスを変更する仕組み的になって
How to Run Puppeteer and Headless Chrome in a Docker Container
How to Run Puppeteer and Headless Chrome in a Docker Container Puppeteer is a Node.js library which lets you interact with the Chrome web browser. Recent releases also include Firefox support. Puppeteer is commonly used to automate testing, archive webpage data, and generate screenshots of live web content. It lets you control Chrome via a clear API, giving you the ability to navigate to pages, cl
Cloud Functions for Firebase と Puppeteer でスクレイピング - Qiita
はじめに Cloud Functions for FirebaseとPuppeteerを使ってブラウザ操作を自動化したので、そのときやったことを書いていきます。 なぜCloud Functions for Firebase？ 最初はGCPの純粋なCloud Functionsを使うことを考えていたのですが、Cloud Functions for Firebaseの方が定期実行や開発・デプロイ方法がわかりやすいように感じたのでこちらを採用しました。 定期実行 GCPの場合：Pub/Sub を使用して Cloud ファンクションをトリガーする Cloud Functions for Firebaseの場合：関数のスケジュール設定 GCPで定期実行をさせる場合はこちらの公式サイトのように、関数定義とスケジュールの定義が別々になるようで、わかりにくいと感じました。 対してCloud Functio
I'm trying to test amending text in an editable input which contains the title of the current record - and I want to able to test editing such text, replacing it with something else. I know I can use await page.type('#inputID', 'blah'); to insert "blah" into the textbox (which in my case, having existing text, only appends "blah"), however, I cannot find any page methods1 that allow deleting or re
Google Cloud Functions と Puppeteer で動的ウェブページを実行してコンテンツを返す API を作る - Qiita
Help us understand the problem. What are the problem?
Migrating from Capybara to Puppeteer — Engineering Blog - Wealthfront
A little over 9 months ago, Wealthfront converted 100% of our end-to-end tests from Selenium (via Capybara) to Puppeteer. The process involved converting hundreds of tests that provide coverage for just about all of Wealthfront’s product offerings on the website. This blog post will cover why we migrated away from Selenium, the process we used to convert the tests, and the result of the completed
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
簡単3ステップ！Puppeteerによるスクショ取得自動化実践 - NRIネットコムBlog
puppeteer-coreとMacにインストール済みのChromeを使って自動操作 - Qiita
【サンプルあり】Puppeteerでボタンをクリックする方法 | ノード・ラボ
Getting to Know Puppeteer Using Practical Examples
WSL2でPuppeteer(headless:false)を動かすためのメモ書き
Hurry Puppeteer とのろいの子 - Qiita
Autify を使ってみた所感と Puppeteer と Playwright - ROXX開発者ブログ
puppeteerで普段使っているChromeを自動操縦する。
Puppeteerでファイルダウンロード - Qiita
2020-01-27のJS: Safari TP 99(Remove Flash)、AVA 3.1.0(TypeScript) playwright(Cross Browser Puppeteer)
How to delete existing text from input using Puppeteer?
ameblo.jp/marimokkori2005
fabcross.jp
kashio.lo.gob.jp
blog.428lab.net
finance.yahoo.co.jp
detail.chiebukuro.yahoo.co.jp