Automatic visual diffing with Puppeteer – Monica Dinculescu
So testing, right? We should do it. The thing is, testing is hard, and good testing is reaaaaaaally hard, and tbh I’m pretty bad at testing. So I end up not testing my apps, and then I feel guilty about it, but I’ll stop you now: you can’t run guilt on Travis. If this sounds familiar, then this blog post is for you. I did a little song-and-dance that sets up Puppeteer* , takes screenshots of your
Automating CSS Regression Testing | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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 re
How To Create Your Own Front-End Website Testing Plan — Smashing Magazine
Testing is a critical process that developers should integrate into their workflow to minimize the number of bugs that get caught in the quality assurance phase. In this article, Lawrence Howlett shows you what to consider when creating a front-end testing plan and how to test efficiently accross browsers, devices and web pages. Front-end testing also needs to be budgeted for — with time, resource
自動検出と自動修正でCSSを保守する - Qiita
CSSの保守に便利なcsscombとscss-lintについて説明します。 scss-lint scss-lintは、SCSSのコードから与えた設定に違反している箇所を報告してくれるツールです。jslintやrubocopのSCSS版のようなものです。これをCI等で定期的に実行しておくことで、ルールに違反したコードの蔓延を防ぎます。 csscomb csscombはNode製のツールで、CSSのコードを与えた設定に従って自動で変換してくれるものです。scss-lintを初めて導入するときに利用すれば、大半の警告を自動で修正してくれるでしょう。但しCSSの文法しか解釈できないため、SCSSに適用すると失敗する場合があります。SCSSで書かれたファイルに対して適用してみたところ、@includeなどの文法は受理されるものの、@ifなどの文法を受理できないようです。しかしながら問題となるケースが
CSS Performance Tooling
Presented at CSSConf.eu, September 2014. Video: https://www.youtube.com/watch?v=FEs2jgZBaQA You've learned the concepts, now meet the tools. High-performance sites need to feel instant and deliver the goods in < 1000ms. In this talk, learn about the bleeding edge tools that can automate keeping your CSS on the fast path. Automate generating critical-path CSS, removing unused CSS, discovering dupli
CSS testing with PhantomCSS | GiuseppeCiliaQA
PhantomCSS - CSS testing with PhantomCSSCSS3 is the ignition and responsive design will become the driving force of developments in visual and CSS testing. PhantomCSS is one of many new tools to support this paradigm shift in UI testing. PhantomCSS takes screenshots captured by CasperJS and compares them to baseline images using Resemble.js to test for rgb pixel differences. PhantomCSS then genera
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% │ ├───────
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Visual regression testing for web apps.
GitHub - garris/BackstopJS: Catch CSS curve balls.
Visual regression testing for web apps.
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ
I want to use
Refactoring CSS