web-dev-qa-db-ja.com

CSSおよびHTMLフロントエンドコーディングの自動テスト

私はCSS、HTML、Javascriptを（この順序で）コーディングするフロントエンド開発者であり、私が行う作業のほとんどはデザインリーダーです。 CSSで作成するデザインの品質は主観的ですが、コーディングの多くは純粋に関数型/レイアウトであり、ページのテストを自動化する方法に興味があります。

私の質問は2つの部分に分けることができます

  1. 特にクロスブラウザの互換性に関して、CSSまたはHTMLを自動的にテストするための既存のテクニックや提案はありますか？

  2. CSSは、レイアウトを制御するプロパティとデザインを制御するプロパティに大まかに分けることができるため、自動テストはlayoutに対してのみ実行可能です（これは不可能です。 色が正しいことを自動的かつ貴重にテストしますか？もしそうなら、どのような種類のCSS値がブール受け入れテストに適しているでしょうか？

テストできるブールレイアウト値の最初の例を次に示します。他にもあるはずですか？

  • ポップアップは他のコンテンツの上に表示されますか（z-index）
  • フッターは他のすべてのコンテンツをクリアしますか（フロート）

ご協力いただきありがとうございます。質問のパート3は、もちろん「このルートを進むのに時間を無駄にしているのか」です。

*****編集*****

私が尋ねたのと同じ質問をするこの記事を見つけましたが、より深く、おそらくもう少し雄弁に。

http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/

今後は、CSSだけで機能エラーが発生した例をいくつか分離しようとしていますが、これまでに見つけたのはJSとのバグです。 ）CSSの組み合わせ。これらの種類のエラーを自動的にテストしたいのですが、JavaScriptを使用すると、元の質問の範囲を超えてしまうことを理解しています。

*****編集2 *****

それ以来、この問題の解決に着手した方法についてブログを書きました。こちらから入手できます。

http://blog.ajcw.com/2010/12/automated-css-testing-or-how-one-css-coder-is-now-responsible-for-breaking-%E2%80%93 -および-修正-％E2％80％93-the-build /

htmlcssunit-testingcross-browserautomated-tests
22
ajcw

Selenium -を見てください。これはブラウザベースの自動テストツールです。それがあなたが探しているものだと思います。

すべてのブラウザで動作します（テストスクリプトを作成するためのFirefoxにはIDEがありますが、スクリプト自体はどのブラウザでも実行できます）

これにより、スクリプト中の任意の時点で、予想される出力に対してDOMなどの内容をテストできます。

8
Spudley

回帰テスト用に構築されたツールを探している場合は、以下を確認してください。

https://github.com/bfirsh/needle

基本的に、選択したパーツのスクリーンショットを撮り（例を確認してください）、それらを比較します。それらが互いにあまりにも異なっている場合、テストは失敗します。 Seleniumを使用しているため、z-indizes、font-sizesなどの他のアサーションを確認することもできます。

4
Kevin Smith

Nighwatch.js を確認することもできます

Nightwatch.jsは、ブラウザーベースのアプリやWebサイト向けの使いやすいNode.jsベースのエンドツーエンド（E2E）テストソリューションです。強力なW3CWebDriver APIを使用して、DOM要素に対してコマンドとアサーションを実行します。

3
obotezat

w3検証と Adobe Browser Labs は、この問題に提供できる最善のソリューションです。 UIのレイアウトとデザイン（read = cutup Monkey）を行っていたとき、それらは私の2人の親友でした。

何かがどのように見えるかをテストすることを自動化する方法は本当にありません。つまり、自分ですべてを視覚的に検査するか、テスターをクラウドソーシング（またはインソーシング）して同じことを行うことに戻ります。それは楽しいことではありませんが、それは私たちのフロントエンドの人たちをビジネスに保ちます。

良いニュースは、多くのブラウザがレンダリングエンジンを共有していることです。したがって、Chromeで正しくテストすれば、Safariでも問題がないことは間違いありません。 FirefoxにチェックインしてIEで、問題の90％が解決されました。次に、あなた（または上司）がどれだけ気難しいかを判断し、それに応じてテストします。

1
user490227

これらのツールは、OPが投稿されたときには存在していなかった可能性がありますが、言及する価値があります。

PhantomJSを使用するCasperJS https://ghostinspector.com/ （旅の自動化用） https://github.com/BBC-News/wraith （スクリーンショットの比較用）

0
codeAline