Visual Regression Testが誤検知した動画やアニメーションの問題解決 - Uzabase for Engineers
NewsPicksのWeb Reader Experience Unitで学生インターンをしています。西(@yukinissie)です。 弊チームの開発基盤では、reg-suitやstorycapを利用したVisual Regression Test（以降 VRT）を導入しています。本ブログではVRTが誤検知した動画やアニメーション周りの問題に対してどのように解決したかをそれぞれご紹介します。 VRTの誤検知とは？ 行ったこと 1. 既存のコードに触れずにReactPlayerの再生をテスト時には静止させる 2. 描画に時間を要するアニメーションには撮影に遅延秒数を設定する まとめ VRTの導入背景や導入の流れについて知りたい方へ VRTの誤検知とは？ 弊チームではVRTを以下の6ステップで行なっており、これらはGitHub Actions（CI）上で自動化されています。 Storyboo
reg-suitとCypressを使ってビジュアルリグレッションテストを導入した話 - SMARTCAMP Engineer Blog
こんにちは！スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの井上です。 携わっている上記のプロダクトは使いやすさにこだわっているため、UIの修正を行うことが多々あります。 そんななかで起こった問題の対応としてビジュアルリグレッションテストを導入したので、今回はその話をできればと思います。 背景 ビジュアルリグレッションテストとは？ ビジュアルリグレッションテストをやる目的 何をテストをするのか？ 使用したツール Cypress reg-suit 画像を取得する 画像の差分を検知する Circle CIによる自動化 ベース画像の自動更新 ビジュアルリグレッションテストの実行 ハマったところ 結果どうなったか reg-suitの結果画面 今後の改善・取り組みたいこと 背景 ビジュアルリグレッションテストを導入する前に、UIに大きく影響する改修がありました。 影響
2018年春までに感動したビジネスモデルまとめ13個｜チャーリー｜note
チャーリーです。 追記：ビジネスモデルを図解できるツールキットを販売中です。この記事にあるような図解を自分でもやってみたいという方はぜひ。 もう2018年も1/4が終わったというにわかに信じがたい状況ですが、ビジネスモデルを図解し続けたものがたまってきたのでここらで13個一挙公開します。 - 目次 -俺のフレンチ サマリーポケット 未来食堂 Cansell プチローソン Unipos SCOUTER ポプテピピック ZOZOSUIT Optoro Fundbox PillPack Farmers Business Network 100の事例を図解した「ビジネスモデル2.0図鑑」という本を発売しています（本記事の事例ふくむ）。予約開始と同時にnoteで全文無料公開という試みをやっています。本記事に興味を持ったらそちらもどうぞ！ 俺のフレンチ俺の株式会社は2012年創業、あのブックオフの創業
13カ国のSEに意図が伝わる、生産性20倍のビジュアル設計書
「開発チームには13カ国のエンジニアがいる。メンバーの足並みをそろえるには、日本語の文章を徹底的に排除する必要があった」――。 こう強調するのは、楽天カードの清水洋輔氏（システム開発部 会員システム開発グループ スマートデバイスチーム リーダー）だ。チームにはスマホアプリやWebシステムの開発を手掛ける13カ国50人のエンジニアが在籍する。開発プロセスにアジャイルを取り入れ、2週間～1カ月のサイクルでリリースを繰り返している。 清水氏らは2014年以降、開発スピードの向上やメンバーとのコミュニケーションを円滑にする取り組みを進めてきた。中でも設計書の改良が大きなテーマだった。何しろ13カ国のメンバーがいる。メンバー全員に意図が伝わり、開発スピードを高めるために設計書そのものを見直す必要があった。 大きな問題は、設計書が日本語の文章を主体にしていた点である。メンバー50人中26人が外国人で、
ビジュアル・プログラミングの勉強方法｜深津 貴之 (fladdict)
ビジュアルアートの教本、「Generative Design」が、ついに再販されました！長らく欠品でプレミアムがついていた一品です。 以下はGenerative Designの序文への寄稿を、一部加筆修正したもの。表現者、技術者それぞれが、アートとプログラミングを学ぶための方法です。ビジュアルコーディングに興味のある人はどうぞ。（あと僕の落書きはこちらから見れます） Generative Design 序文Generative Designの日本語版が、いよいよ出版されました。本書は、プログラミングによる視覚表現の「最高の教本」です。この素晴らしい本の序文として、何を書くべきか非常に悩みました。結果として、歴史やカルチャーの話をするよりは、この本の読者に最も役に立つであろうことを、書くことにしました。表現者と技術者がビジュアル・コーディングをどう学習すべきか、についてです。 表現者が技術を
Visual Debugging with ES6 and Node.js
We’ve been working with Node.js for several years at Good Eggs and love the JavaScript ecosystem, particularly the advancement of the language itself with ECMAScript 6. While the number of options in the JavaScript ecosystem is still exploding, it does feel like we are starting to narrow in on a great toolset. Today, all our new applications are using ES6 and ReactJS and it feels right. Below I sh
炭坑の庭師 - steps to phantasien
Chromium と WebKit は二つの独立したプロジェクトだ。 ソースツリーはそれぞれ別で、そこにはインテグレーションの苦労がある。 WebKit 以外にも V8 や Skia など Chromium が依存している外部のプロジェクトは山ほどあるけれど, WebKit とは特にぴったりくっついている。 そのぶん二つの足並みをあわせる手間も際立つ。 以前、書籍 ”アジャイル開発の本質とスケールアップ” で リリーストレイン という大規模プロジェクトのインテグレーション手法を読んだ。 プロジェクトの内部で一段細かい時限リリースを設け、そのタイミングでインテグレーションする方法。 内部リリースにあわせてプロジェクト同士が依存している相手のバージョンを上げ、 壊れたところをなおすわけ。 Chromium と WebKit もこまめに相手のバージョンを新しくする。 主たる依存の向きは Chro
ブラウザでビジュアルテストをする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 リファ
NightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になった - Qiita
最近またe2eを書いたりしてる。色々悩んだけど、やっぱNightmareを使うことにした。 Nightmareについては僕が前書いた記事を参考にしてください NightmareでE2E - Qiita Nightmareの良い点 Zero configuration というかただのスクレイパー 悪い点 プロセス立ちあげるのが遅い JSわかってないと読みづらい PrecepeterとかTestiumとかProtractor試したけどどれも走らせるだけでいっぱいいっぱいで、もう面倒臭い。 僕は行儀が悪いのでスクレイパーを走らせられればいいです。エビデンス() はスクリーンショットで確保する方向で。 連番のスクリーションショットを取りながらNightmareを走らせるサンプル Nightmare = require 'nightmare' class TestRunner extends Nig
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - retejs/rete: JavaScript framework for visual programming
visual-music-machine-learning-workshop-for-kids-a90c957dab33
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
GitHub - yahoo/blink-diff: A lightweight image comparison tool.
リファレンステストの書き方
GitHub - YahooArchive/kobold: Visual regression testing framework, comparing screenshots from multiple builds
VisuAlgo moves to https://visualgo.net/en
TechCrunch | Startup and Technology News
GitHub - bslatkin/dpxdt: Make continuous deployment safe by comparing before and after webpage screenshots for each release. Depicted shows when any visual, perceptual differences are found. This is the ultimate, automated end-to-end test.
The Secret to Safe Continuous Deployment
安全な継続的デプロイメントのための知覚的テスト