ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar | DevelopersIO
ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar ヘッドレスChromeでシンプルに自動テストを行う Google Chromeのバージョン59から標準搭載された、ヘッドレスモード（GUIがないモード）。コマンドラインからヘッドレスブラウザを立ち上げることができ、スクリーンショットの撮影を行ったりDOMを出力したりすることができます。自動化の可能性に満ち溢れた機能です。 ヘッドレスChromeの導入については、次の公式ドキュメントが詳しいです。 ヘッドレス Chrome ことはじめ | Web | Google Developers ドキュメントを読んでいただくと分かると思いますが、様々なことが可能なため指示の記述が少し冗長な面があります。 そこでヘッドレスChromeを用いた自動化処理
Puppeteer (Chrome の自動操作ライブラリ) を Python に移植してpyppeteerという名前で公開しました - Blank File
Puppeteer というJavaScriptでchromeを自動操作するライブラリが最近話題になっていました。 私もPythonでSeleniumの代わりに使えるものがほしかったので、puppeteerをPythonに移植し、pyppeteerという名前で公開しました。 Puppeteerについては下記Qiitaの投稿が参考になるかと思います。 –headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について - Qiita 使用上の注意 まだ作ったばかり＆テスト不十分なのでバグがあると思います。 なので試す時は「うまく動いたらラッキー」くらいの人柱精神でお願いします。 特にwindowsでは全くテストしていないので動かないかもしれません。 一応自分でwdomのテストに使ってみましたが、Webページのテストに使う分には意外と大丈夫です。
ChromeのヘッドレスモードをMacOSXで試してみた - Qiita
マストドンで盛り上がる最中、 こっそり一部で盛り上がってたChromeのヘッドレスモード MacOSXで少し試してみたいと思います。 開発中の機能ということで、仕様の変更もあると思いますが、2017/4/16段階ではちゃんと以下のやり方で動作してます:) 準備 Google Chrome Canaryをインストール 開発段階にある機能がのってるchromeです。ささっと入れちゃいます。 nodejsインストール(v6.3以上) ちなみに今回試したのはv7.9.0 シェルにCanaryバイナリへのエイリアスを作成します(僕は.zshrcに追加しました/bashの人は.bash_profileかな) alias chrome-c='/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary'
Chrome, Firefox, IEのCopy & Paste実装方法 - Qiita
Ctrl + Cでクリップボードに任意の値をコピーしたい場合に、Chrome, Firefox, IEでどう実装するかまとめました。 クリップボードを操作するにはFlashを使うのがベタですが、その場合必ずFlashのボタンを押さないとクリップボードにアクセスできません。 今回はCtrl + Cでクリップボードにコピーしたいということで、HTML5のClipboard APIやIEのwindow.clipboardDataを使って実装します。 Chrome, Firefoxの場合 HTML5のClipboard APIを使います。 クリップボードイベント(copy, paste, cut)発生時のみ使用可能で、任意のタイミングでのクリップボード操作はできません。 まだドラフト版のAPIなので色々と制約があるみたいですが、基本的なCopy & PasteはChrome, Firefox両方と
ElectronでChrome Extension使えるようにするまでのハマりどころ - Qiita
そんなに使わないのでいつも流し見していたのだけど、どうしてもReact Dev ToolをElectronに入れたくなって本気出したら詰んだ。 ドキュメントはこのあたり。両方読まないとはまりがち。 https://github.com/electron/electron/blob/master/docs/tutorial/devtools-extension.md https://github.com/electron/electron/blob/master/docs/api/browser-window.md#browserwindowadddevtoolsextensionpath 最終形のjsはこんな具合 const {BrowserWindow} = electron; const os = require('os') const path = require('path') c
CSSアニメーションを使いこなすために知っておきたい5つのこと - Qiita
はじめに keyframesを使ったCSSアニメーションは描画パフォーマンスが良く、ヌルヌルな動きが簡単に実装できます。 最近旧IEのサポートが切られたこともあり、今後は触る機会もより増えてくるかと思います。 そこでCSSアニメーションをガリガリ使っていく上で、これは覚えておきたい！と思ったことをまとめてみました。何かの参考にでもなれば幸いです。 基本的なプロパティや使い方などは省略します サンプルコードではprefixを省略しています 5つとは単に私が思いついた数なので、深い意味はありません 目次 はじめに 複雑なイージングはChrome Devtoolsで簡単に実装できる イージングはkeyframesの中で細かく再定義できる カンマ区切りでシーケンシャルに表現する コマ送りアニメーションにはsteps()が便利 アニメーションのcallback（イベント）を取得する 終わりに 複雑な
Electronの中華フォントを克服したかった | Airwalker's Blog
Electronでは楽にアプリを作れるのは良いのですが、日本語についてはいわゆる中華フォントが表示されてしまうという問題がありました。 これを解決する方法を見つけた、という記事を元々書こうとしていたんですが、つい最近リリースされたv0.36.0で内部のChromeのバージョンが47に上がったせいか、きちんと日本語フォントで表示されるようになっていました。(たぶんChrome 47と同じくMS P ゴシック) とはいえ、webViewの中身のフォントを外部から変えるといった用途には使えるので一応書き残しておきます。 ローカルのHTMLファイルをロードするようなElectronアプリの場合、通常通りCSSでfont-familyを指定してやればもちろんフォントを変更できます。一方、webViewタグを使って外部ページをロードする場合、当然ながら元のサイト側でフォントが指定されることになりま
SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
Unity WebGL x WebSocket で複数クライアント間の大量のオブジェクトを簡単に同期できる仕組みを作ってみた - 凹みTips
はじめに まだ実験中なのですが、Unity WebGL x WebSocket で大量のクライアント間で大量のオブジェクトを同期できる仕組みを作っています。UNET や Photon によって近いうちに対応されると思うのですが、現状では使えないのと、制限なく扱えたりチューニング次第で速く出来る可能性があるので作ってみようと思いました。 昨日、技術デモを公開しまして、最大で同時に 30 〜 40 人ほどの方に同時に遊んでもらいました。皆様ありがとうございました！200 オブジェクトくらいならフレーム落ちすること無くサクサク動いたと思うので、現状の仕組みや知見などを備忘録も兼ねて共有できればと思います。 開発環境 Mac OS X 10.10.1 Unity 5.0.0b18 デモ いつ止めるかは未定ですが、以下から遊ぶことが出来ます。 hecom.in - このウェブサイトは販売用です！ -
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
