Redirecting… Click here if you are not redirected.
Redirecting…
Redirecting… Click here if you are not redirected.
1px の変化も見逃さない！ビジュアルリグレッションテスト導入で快適フロントエンド開発 - dely Tech Blog
こんにちは！dely でフロントエンドの開発をしています @all__user です。 今回は kurashiru のフロントエンド開発に導入されたビジュアルリグレッションテストについてご紹介したいと思います。 【反応を多くいただいた点について記事の最後に追記しました】 目次 目次 ビジュアルリグレッションテストとは 導入の背景 フロントエンドのテスト？ SPA移行前後の比較 ツール reg-suit Loki Wraith BackstopJS テストのフロー GitHub + CodeBuild + BackstopJS ステージング環境 テストケースは Google スプレッドシートで管理 結果を S3 にアップロードして Slack に通知 まとめ 【追記】 運用が大変ではないか？ 1pxの違いにそこまで工数かける？ 広告が差し込まれたり変わっただけでテストが壊れるのでは？ ビジュ
Blackfire.io: Continuous Observability Solution
Crush performance bottlenecks with data-driven insights and recommendationsBlackfire continuously profiles and monitors decoupled PHP and Python applications, helping you optimize performance, anticipate issues, and future-proof your apps so you can stay in full control—even before crises. Get clear, actionable guidelines to boost app performanceFollow a proven strategy to prevent and resolve cris
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
テストがなかった無法地帯にテストを導入して開発速度を1.7倍にした話 - Qiita
テストがなかった無法地帯のプロジェクトに自動テストを導入して、開発速度を1.7倍にした話をします。 自動テストがなぜないのか 自動テストのないプロジェクトには、そうなる理由が必ず存在します。よくみる理由は、「時間がないから1」「テストの書き方がわからないから」「無理やりテストを書いたつらい経験があったから2」といったものです。今回のプロジェクトの場合は、以下の2点でした： 自動テストの書き方がわからないから レビューがテスト代わりだったから まず、チーム編成が変わって私ともう一人がチームに加わるまで、実装者の中に自動テストの経験者はいませんでした。このような状況では、自動テストは困難になります。なぜなら、何をどうやってどこまでテストするかを決めるには、多少の慣れが必要だからです。この慣れがないと、何をしたらいいかわからないという状態に陥りがちで、結果として自動テストが後回しにされてしまいま
2017年JavaScriptのテスト概論 | POSTD
本稿は、JavaScriptのテストについて最も重要な根拠、用語、ツール、アプローチなどの知識を身に着けることを目的とした簡略版ガイドブックです。本稿で検討する数々の側面に関する最新の秀逸な記事も紹介しつつ、私たちが経験的に得たことも多少付け加えたいと思います。 Facebookによるテスト用フレームワークであるJestのロゴをご覧ください。 見てお分かりのように、このフレームワークは「苦痛のない」JavaScriptのテストをスローガンに掲げています。しかし、 “次のように言う人” もいます。 苦痛のないテストなんてあり得ない。 実際、Facebookはこのスローガンを掲げるだけの素晴らしい理由があります。一般的にJSのデベロッパは Webサイトのテストにあまり満足していません 。JSのテストには制限があり、実装が難しく、低速である傾向があります。 一方、正しい戦略を立てて適切にツールを
テスト計画の立て方 - Qiita
テスト計画をどう立てていくか、ふつうのシステムエンジニアにとって分かりやすく考えてみたいと思います。 テスト工程は、一番ざっくりした分類で単体テスト、結合テスト、システムテストに別れるのが一般的です。 この工程は、あくまでもV字モデルに対応したインプットがどの前工程で作られたものを検証するかの基準であって、実際にどういう観点をどういう手順でテストするか、はそれぞれのプロジェクトで計画します。それがテスト計画になっていきます。 しかし、ただの工程の話と、実際におこなうテストの内容の違いが分かっていないと、テスト計画何するものぞ状態になって、ろくなテストが実施されないことになりますし、そのようなプロジェクトも多く存在します。 テストの世界標準には、ISO/IEC/IEEE 29119があり、これを見るとテスト工程(Test Level/Phase)とテスト種別(Test Types)の組で、テ
たった1人から始める社内テストコード文化
>>> $ py.test ../tests/test_webapi.py =============================================================================== test session starts =============================================================================== platform darwin -- Python 2.7.5 -- py-1.4.31 -- pytest-2.7.0 rootdir: /Users/*****, inifile: pytest.ini plugins: cache, django, pep8, pythonpath collected 2 items ../tests/test_webap
Webページを監視して表示崩れが起きていないか検出できるE2Eテストを実装しました – NET BIZ DIV. TECH BLOG
お世話になります、フロントエンド担当をしている小原正大です。Webページの表示を監視して差異があった場合、どのページで表示の変化が起きているかを知ることが出来るプログラムを実装したのでそのことについて書こうと思います。 何につかったの？ 僕がフロントエンドを担当しているサービス『 料理サプリ 』で大規模なフロントエンドコードのリファクタリング行う際に表示テストを自動化するために作成しました。『 料理サプリ 』はPC・スマホ合わせて大体350-400ページの表示パターンが存在する比較的規模の大きいサイトです。全ページに影響を与えるような作業は大規模な回収となり、今回のリファクタリングでは表示テストの計画などの段取りが必要でした。従来の人手によるQAでは細かいバグを見過ごしたり時間がかかり効率が悪いので、可能な限り自動化しようと考え実装しました。 実装の概要 この監視のシステムは以下の２つ実装
Automated Testing in WordPress, Really?!
Did you know that WordPress has an automated test suite? It contains well over 1500 integration tests and growing. However one of the primary culprits of WordPress is in the quality of its plugins. Most plugins don't have an automated test suite you can run to verify all features are working as expected, and fail gracefully. In this talk, Ptah will introduce you to automated testing in WordPress u
「スタブ」と「モック」は全然違うものなんですよ - uehaj's blog
「スタブ」と「モック」は全然違うものなんですよう、という話は前からされてますが、世の中にたくさんの誤解があふれている。ファウラー氏の記事もわかりにくいわい！！！頭のいい人に解説させてはダメだ！（暴論）。 つーことで上の考え方を私の言葉で述べます。 「スタブ」と「モック」は違います。何が違うかといいますと、目的が違います。何の目的かというと、試験の目的です。 んでね、混乱の原因の一つは「スタブオブジェクト」「モックオブジェクト」という使うモノを見てては、この目的の違いが分からないということです。日本刀とマグロ切り包丁を見ていても、両者が違うことがわからない。目的と照らし合わせてみて始めて違いがわかるんです。 モックについて言うと「オブジェクト間の相互作用を見るためのテスト」をするときに用いるのがモック。以上。それ以上でもそれ以下でもない。便利さの度合いも試験の手軽さもスピードも関係ない（直交
Sinon.JS - Standalone test fakes, spies, stubs and mocks for JavaScript. Works with any unit testing framework.
Standalone test spies, stubs and mocks for JavaScript. Works with any unit testing framework. Get Started Star Sinon.JS on Github Get Started Install using npm To install the current release (v20.0.0) of Sinon: npm install sinon Setting up access Node and CommonJS build systems var sinon = require("sinon"); Direct browser use <script src="./node_modules/sinon/pkg/sinon.js"></script> <script> // Ac
Automating CSS Regression Testing | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The following is a guest post by Garris Shipon. We’ve touched on the four types of CSS testing here before. Regression testing is the hardest. It’s the type where you’re trying to test if a change you made to CSS resulted in any unexpected visual problems. This is made more difficult with responsiv
StyleStats - MOL
スタイルシートの統計情報を出力するNode Packageを作った。 t32k/stylestats Node.js 0.10以上が必要で、CLIだとこんな感じの情報を出力してくれる。 $ npm install -g stylestats $ stylestats path/to/stylesheet.css StyleStats! ┌────────────────────────┬──────────┐ │Size │ 498.0B │ ├────────────────────────┼──────────┤ │Rules │ 7 │ ├────────────────────────┼──────────┤ │Selectors │ 11 │ ├────────────────────────┼──────────┤ │Simplicity │ 63.64% │ ├───────
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Testing Frameworks for Javascript | Write, Run, Debug | Cypress
GitHub - enzymejs/enzyme: JavaScript Testing utilities for React
Browser Testing On The Most Reliable Platform | BrowserStack
iOS9 Day-by-Day :: Day 2 :: UI Testing – shinobicharts
【javascriptを使う人に知って貰いたい（エンジニア、デザイナ問わず）】karmaを使ったテスト駆動開発入門（ついでにJasmineも）
Jasmine使い方メモ - Qiita
