Web 制作をしているとページの表示確認やコンポーネントの洗い出しなどで、大量にキャプチャを撮ってきたい時があります。 しかしブラウザのエクステンションで1枚ずつ撮るのも面倒です。 そこで PhantomJS と CasperJS を使うとキャプチャを自動化することができるということなので、先達たちの情報を参考に、キャプチャしたいURLと想定するデバイスを CSV で管理して、楽にキャプチャがとれるものを作成しました。 PhantomJS と CasperJS とは PhantomJS ですが、グラフィカルな画面のないブラウザで「ヘッドレスブラウザ」と呼ばれるブラウザです。コマンドラインからブラウザの機能を使うことができ、フォームの操作やページの要素を取得することができます。よく CI ツールと組み合わせて自動テストを行ったり Web スクレイピングで使われたりします。 PhantomJS
CircleCI で、とあるプロジェクトの CI 環境を作りました。このプロジェクトは、PHP 7 で開発しているのですが、まだ CircleCI 公式では PHP 7 がサポートされていません。 そこで、Docker を使って、PHP 7 + PhantomJS 環境を構築しました。 構成 PHPUnit と Codeception のテストを実行する環境を構築します。 コンテナの構成は、下記のようになります。 PHP 7 コンテナ PhantomJS コンテナ PostgreSQL コンテナ * 2 これらのコンテナは、docker-compose でまとめて構築、実行します。 PHP 7 コンテナ PHP 7 + Apache のコンテナです。Docker Hub オフィシャルの php:7.0-apache ベースにして、Laravel 5.1 実行に必要な拡張の追加や設定を行った
AWS Lambdaはサーバ不要のプログラムの実行エンジンです。インフラ側はAWSが管理するのですが、実行原理が解っていると思いの外に自由度が高いです。Shellやコマンドを同梱させれば動くし、依存するライブラリがなければAmazon Linux上でビルドして同梱させれば良いのです。その実例の1つに、Lambda+PhantomJSがあります。PhantomJSは、ブラウザ不要で画面描画ができるツールです。リンクのクリックやボタンの押下・フォームに入力も出来るので、ログインが必要なページの情報を取ってくるということやスクリーンショットを取るといったことも可能です。LambdaとPhantomJSを組み合わせてお手軽スクレイピングをしてみましょう。 プロジェクトの用意 Github上にビルド済みのライブラリ込のプロジェクト（phantom-lambda-template）があるので、それを使
これまで VanillaJS / jQuery で頑張ってたプロジェクトに React 入れて、Reactは最高！などと言っていたのだけど、E2Eテストが落ちている事に気づいた。 落ちたテストで画面キャプチャしたりして調べた結果、Reactコンポーネントを描画するところで落ちていた。 どうやらPhantomJS1系で見られる現象のようだった。 e2e - CasperJS で Reactjs のサイトをテスト - Qiita E2EテストにはCasperJSを使っていた。 Casper の dependencies は "phantomjs": ">=1.8.2" となっている。 PhantomJS の謎な挙動にはユニットテストでも散々苦しめられていた。 既に polyfill 幾つか入れて対処していたのだけど、良い機会なので別の道を模索してみよう、という話になった。 頑張ってPhanto
This page has moved... Click here if you are not redirected.
My website has a test suite with visual regression tests; screenshot different webpages and compare against a set of expected images: https://github.com/twolfson/twolfson.com/tree/3.40.0/test/perceptual-tests/expected_screenshots This weekend, I switched it from PhantomJS to node-webkit and am happy with the results: Benefits node_modules/ always work (e.g. no process is undefined issues) node_mod
概要 Nightmare segment.io社の「俺が考えた最強のe2e API」を備えたphantom.jsラッパー。スクレイパーにも使える。 casper.jsみたいなもん。試してみた。 インストール お使いのプロジェクトで npm install nightmare してください URLを開く Nightmare = require 'nightmare' new Nightmare() .goto 'http://localhost:3000' .evaluate (-> location.href), (url) -> console.log url .run() .evalueate は第一引数関数でクライアントでevalした結果を、第二引数のコールバックとしてもらってくる。 mochaのテストならこんな感じ test/nightmare_example.coffee Nig
JavaScriptは基本非同期で、callbackだったりevent drivenだったりする。最近はPromiseやgenerator (yield, async/await) も出てきてるが、此れも非同期だから、非同期処理を待つ事は考慮に入れなければならない。testを書く時も、当然個々のtest caseが、ほぼ確実に非同期に成る。 Gruntに於ける非同期処理 Gruntには非同期を待たせる仕組みがある。grunt.registerTask() のcallback内で使へるthisの、async() methodで、非同期処理の終了を通知する為の関数が得られる。全てが終わった時に此れを呼んでやれば好い。done() の引数はError若しくはnull/undefinedだ。 // Gruntfile.js module.exports = function(grunt) { gr
2. 自己紹介 • 礒部正幸（いそべ まさゆき） • 職業： ソフトウェアエンジニア • 現在： アドファイブ（株） 代表 http://www.adfive.net – 現体制： 代表１名 + 外注数名 : お問い合わせ – 自社製品： モバイルO2Oアプリ/オウンドメディア/アドサーバ – 受託業務： システムコンサルティング/システム開発/データ分析 • 東工大卒 （B：情報工学科、M：計算工学専攻） • インターネット活動 – TwitterID: @chiral – （ブログ：アドファイブ日記） http://d.hatena.ne.jp/isobe1978/ • 「機械学習ハッカソン」主催： http://mlhackathon.connpass.com/ • 近年作ったスクレイピング利用システム – パケットデータから閲覧Webページの画面キャプチャ再構成 （PhantomJ
最近Goodpatchに入社した、フロントエンドエンジニアのmigiです。 Goodpatch内のHTML5やiOS・Androidアプリ開発についてや業務中の疑問を共有する場としてのフロントエンド定例、そこで出た内容の一部を皆さまに共有する「CodePatch」の第二回目をお送りします！ 前回の記事「【CodePatch #01】グッドパッチのフロントエンド定例で話題になった技術を不定期で配信してみます。」には多くの反応をいただきまして誠にありがとうございました！ 自分たちが興味を持っている技術に対して全国数千万人(推定)のフロントエンド愛好家の皆さまにも同じく興味を持っていただけたようでとても嬉しく思います。 それでは今回もさっそく、今週のフロントエンド定例で話題に上がった話をご紹介していきます！ PhantomJSとは、JavaScriptで操作を行う、画面を持たないWebブラウザで
今業務でやってるプロジェクト、ジョインした時点では 普通のソーシャルゲーム 規模はそこそこ大きい MVCフレームワークなどは使ってない テスト0 運用中 フロントはこんな感じでした。 これはヤバいと思い開発の合間合間にテストを書いていったのですが、 その時にやったことの記録です。 使ったもの Mocha chai Sinon.js testem PhantomJS CasperJS DOMのテストもしたかったので実行環境はブラウザにしています。 Jasmineでも良かったのですがアサーションも自分で選びたかったので Mochaを使いました。 どのくらい書いたか 結論から言うと共通のメソッドやコンポーネントだけしか書いてません。 そもそもテストを書く事を全く考慮されていないコードで、 DOMと密結合しまくりだったり if (result) { resultDom += '<div class
ハマったとこ、先人の知恵のまとめ。 提供されるモジュール群は5つ phantom: そのもの FileSystem: ファイルに出力したり、依存ファイルの存在確認したり System: コマンドラインから引数取りたいなら WebPage: きっと主役なrequire('webpage').create()するやつ WebServer: まだ使わない方がよさそう おおまかな使い方は2パターン pageを使いまわす オーソドックスなやつかと。 PhantomJSのサンプルといえば！的な。 var page = require('webpage').create(); page.open('http://example.com', function(){ // do something.. page.evaluate(function(){ // do something... }); phan
PhantomJSとは PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG. http://phantomjs.org/ PhantomJSはJavaScript APIで動くヘッドレスWebKitです。 PhantomJSはDOMハンドリング、CSSセレクタ、Canvas、SVGなどネイティブにサポートしており、高速に動作します。 ものすごく簡単にいうと、ターミナルで動く画面をもたないブラウザですね。 主な利用シーンは以下のとおりです。 Webテスト ページオートメーション スクリーンキャプチャ ネ
PhantomJS: Download and Install ここにバイナリがおいてあるのでダウンロードして展開してパスを通すだけで大丈夫。qt とか webkit をインストールする必要すらなくて超簡単。 古いシステムなどでソースから入れたい場合は PhantomJS: Build Instructions に従う。以下のステップだけでいいらしい sudo yum install gcc gcc-c++ make git openssl-devel freetype-devel fontconfig-devel git clone git://github.com/ariya/phantomjs.git cd phantomjs git checkout 1.9 ./build.sh ソースから入れる場合も同様に qt などは必要なくて、build.sh を叩くだけでいいそうだ。簡単。
2013-09-12 続・Casper.JSのススメ 前回；Casper.JSのススメCasperJSで受け入れテスト書くかって話になったので、チームの皆さんにおはなしした。 ↓少し削っているのでちぐはぐな気がする。 Casper導入資料 from Yuuki Tan-nai あとは口頭での説明だったので、その内容をざっくりまとめる。①casperjsコマンド $ casperjs test test/suite/ --direct --log-level=debug --fail-fast --pre=test/common/casper_pre.coffee --includes=test/common/casper_inc.coffee --xunit=log.xml testサブコマンドが必要。オプションは以下のとおり。 --pre: 全ファイルの実行前に一度だけ実行されるスク
Capybara.javascript_driver = :poltergeist Capybara.register_driver :poltergeist do |app| Capybara::Poltergeist::Driver.new(app, :js_errors => false, :timeout => 60) end とすればよいとわかった。各オプションについて以下に説明する。 :js_errors :js_errors => falseにしたのはCapybara::Poltergeist::JavascriptError: というエラーを防ぐため。JSのエラーはよくあることなのだが、エラーが出るたびにCapybaraを止めるのは時間の無駄。ということで、JSのエラーは無視することにした。 :timeout Timeoutはデフォルトでは30秒。しかし、ログインのような時
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
ウェブアプリケーションのJSのテストするのにCasperJS使ったら便利だった． CasperJSはPhantomJSにテスト用ユーティリティがついて便利になったやつ． JS，MVCできれいに書いてると，Modelの単体テストとかできるけど，昔ながらの感じだと，ここをクリックしたらこれが表示されること，みたいなテストを書くことになる．けどライブラリとかいろいろあってどれを使えばよいか分からなくて敷居が高い．CasperJSを使ったらこれだけで完結してテスト書ける． PhantomJSは単なるブラウザだけど，CasperJSはテストのフレームワークとか，DOMのテスト関数とかがついてる． 非同期なタスクの実行の仕組みも入ってて，casper.thenっていうのを順番に書いていくと，順番に呼んでくれて，click()して，casper.thenしたら，ページ遷移したら次のページに移動してる．ス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
