Next2D | Rendering Engine, NoCode Tool, Underlying Framework.2D entertainment development made easy! Fast! Comfortable!
Puppeteer +Lighthouse +GitHubActionsで認証付きWebアプリのWebperfを定期計測
Puppeteer + Lighthouse + GitHub Actions を使って Web アプリのフロントエンドパフォーマンスを定期計測するプロジェクトを作ってみたら良い感じだったので紹介です。 何を作った？ このように GitHub Actions 上で 認証付きの Web アプリに対して Puppeteer 介し Lighthouse を定期実行し、結果を Datadog に送信するプロジェクトを作りました。 実際にそのプロジェクトの計測値を使った Datadog のダッシュボードはこちらです。 Webperf の主要指標をページ別に時系列で表示しています。 サンプルプロジェクトはこちらにあります。 以降で実装について簡単に解説します。 Puppeteer + Lighthouse によるパフォーマンス計測 Puppeteer + Lighthouse によるパフォーマンス計測
SeleniumとWebDriverの最新事情～標準化が進み、さらに強力なテストツールへ！ その影でSelenium IDEは……
illustration by iwasawa これまでのSelenium さて、最新事情に触れる前に、本記事をご覧の皆様は既によくご存知かとは思いますが、あらためてSeleniumとは何か、そして現在の形に至るまでの道をおさらいしておきましょう。 Seleniumは、Webブラウザの自動操作ライブラリです。人間がWebブラウザでやるような手作業を、自動的に再現できます。単純作業の自動化に利用できるほか、一般的な自動テストフレームワークと組み合わせることでEnd to End（E2E）テストの自動化を実現できます。Webアプリケーションのテスト作業で苦労されている方にとっては福音のようなライブラリですが、自動テストコードや実行環境の維持・実行時間などが大がかりになりがちで、利用コストは高めです。回帰テストの自動化など、繰り返し利用が多い用途への適用が特に効果的でしょう。 Seleniumの
Figma: The Collaborative Interface Design Tool
Downloads Get the desktop, mobile, and font installer apps
Markdown風テキストでダイアグラムが描けるWebツール - Qiita
MarkDownDiagram Markdown風のテキストで、ER図やブロックダイアグラムのようなチャートを描けるツールです。 こちらにインスパイアされて、もうちょっと汎用的にダイアグラムを描けるツールを作りました。 もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った 特徴としては Webブラウザのみでローカルで動作 配置はマウスでドラッグして編集できる CSSで色や装飾を制御可能 といったあたりです。 githubからclone/ダウンロードして使えます。 オンラインで試すのはこちらでどうぞ。 ローカルでブラウザのみで動作します。index.htmlをブラウザで開いてください。 Chrome推奨ですが、Safari,Firefoxでも動作します。タッチIFは未対応。 機能 テキストでブロックを記述し、ブロック間を線で繋ぐ描画 ブロックをマウ
ブラウザでビジュアルテストをするreftest-runnerを作った
概要 reftest-runnerというブラウザで描画内容やレイアウトといった表示結果をテストするためのライブラリを作りました。 要素技術としてはブラウザ、WebDriver API、レンダリングキャプチャ、画像Diffという感じです。 azu/reftest-runner 時間が無い人向け 以下のスライドに簡単にreftest-runnerやreftestとはなにか、どういうユースケースがあるのかが書いてあります。 reftest-runner-overview.pdf reftestとは reftest(Referrence Test)とは、2つのHTMLの表示結果(スクリーンショット)を比較することで表示結果が意図したものかをテストする方法です。 用意するHTMLとして以下の2種類を1セットとして用意して利用します。 テスト用HTML テストしたい機能を使って実装したHTML リファ
リモートワークにおけるチームワークの課題を解決できる「Remotty」を無期限・無制限・無料で提供開始
リモートワークにおけるチームワークの課題を解決できる「Remotty」を無期限・無制限・無料で提供開始 2015年04月16日 株式会社ソニックガーデン（本社：東京都渋谷区、代表取締役社長：倉貫義人）は、離れた場所で働くチームでも同じオフィスにいるような気軽なコミュニケーションを実現することで、リモートワークにおけるチームワークの課題を解決できるツール「Remotty」の提供を開始しました。 本日から「Remotty」のすべての機能が、どなたでもご利用いただくことができるようになりました。リモートワークで協働作業に取り組むチームのために作られたコミュニケーションツールです。無料で何人でも無期限に使えるので、お気軽にお試しください。 「Remotty」https://www.remotty.net/ 背景：リモートワークにおけるチームワークの課題 少子高齢化社会において、在宅勤務をはじめとす
ChromeでもFirefoxでもIEでも！キャプチャ拡張機能の決定版「FireShot」が素敵だった - ウェブ企画ラボ
Chormeをメインブラウザとして使っていますが、キャプチャを取るのにしっくりくる拡張機能が無く不便でした。 でも、ついに見つけました！キャプチャをとるのに便利なChoromeの拡張機能「FireShot」を！ 今回は「Fireshot」を実際使ってみて便利だと思った点と簡単な使い方についてご紹介いたします。 「FireShot」の便利なところ 1.キャプチャの選択範囲を事前に選べる！ Fireshotはキャプチャできる範囲を事前に選ぶことができます。 選べるのは以下の4通り。 ページ全体をキャプチャ 見える範囲をキャプチャ 選択された範囲をキャプチャ ブラウザウインドウをキャプチャ 事前に選べるのでキャプチャした後に画像を切り抜く手間が省けます。 また、「選択された範囲をキャプチャ」や「ブラウザウインドウをキャプチャ」(ブラウザの枠ごとキャプチャすること)は他の拡張機能でなかなか見かけな
サイトに来た人のブラウザ画面をリアルタイム閲覧できる「SiteSupport」 - GIGAZINE
訪れたユーザーがページのどこをどう見て、どのように移動し、どのあたりで詰まるのか、そういった各種行動を把握するためにユーザーのデスクトップ自体をリアルタイムにリモートデスクトップっぽく見ることを可能にするというのがこの「SiteSupport」です。 SiteSupport - Remote Desktop for Web Apps http://sitesupport.com/ ブラウザのセッションを共有し、特別なソフトウェアをインストールする必要性は一切無し。JavaScriptのウィジェットをサイトに設置すればユーザーのデスクトップをリモートで見せてもらう仕組みを簡単に導入することが可能であり、APIが提供されているので自分の好きなようにカスタマイズすることも可能、全部のコネクションはSSL経由であるためセキュリティも万全です。 実際にどのような感じで動作するかというのは以下のムービ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Vitals - A New Hope in Web Performance Measurement
GitHub - GoogleChrome/web-vitals: Essential metrics for a healthy site.
Browser & Mobile Testing for Apps | BitBar from SmartBear
無料から試せるカスタマーサポートツール｜Tayori（タヨリ）