cssテスト:開発者の完全ガイド

フロントエンドテストに関しては、CSSテストはしばしば見落とされています。 CSSテストには間違いなく大きな課題がありますが、それは全体的なテスト戦略において重要でないツールとして却下されるべきではありません。 この記事では、この形式のテストのガイドを提供するので、使用の背後にある動機を理解し、開始するための実用的な手順を知っています。

私たちは、基本的な質問でポストを開きます:

• CSSテストとは何ですか？
• なぜそれを気にする必要がありますか？?
• CSSをテストするにはどうすればよいですか？

基本を理解したらすぐに、いくつかの主要なCSSテストツールのリストを順を追って説明します。 このスペースでは、さまざまなツールとツールカテゴリの詳細を理解できます。

まとめる前に、Testim Automateが自動化されたエンドツーエンドのテストを行うときにCSSが課す障害のいくつかを回避する方法を含む、いくつかの最終的な考

それを取得してみましょう。

CSSテストの基本

基本的な質問に答えることから始めましょう。

CSSテストとは何ですか？

CSSテストは、その名前が示すように、スタイルシートをテストするプロセスです。 より具体的には、自動CSSテストを参照します。 結局のところ、これは2021年であり、テストの自動化は不可欠です。 これは、すべてのレベル、レイヤー、およびテストの形式に当てはまります。 CSSテストは例外ではありません。

なぜCSSテストを気にする必要がありますか？

そのため、webアプリケーションの品質にとって不可欠です。 CSSの問題により、webアプリ/webサイトが正しく表示されません。

UIは、ユーザーエクスペリエンスに関しては、アプリケーションの特に敏感な領域です。 結局のところ、インターフェイスは、ユーザーが見て触れるものです—文字通り、モバイルの場合。

だから、あなたの組織が楽しいユーザーエクスペリエンスをユーザーに提供することを真剣に考えているなら、CSSテストはUIテストの重要な要素でなけれ

CSSをテストするにはどうすればよいですか？

さまざまな方法でCSSをテストできます。 これは、CSSのテストは単一のものではないためです。 主な4つのタイプは次のとおりです。:

• 回帰
• 構文
• プロジェクト
• リファレンス

これらのタイプのそれぞれについて説明しましょう。

回帰

回帰CSSテストは、CSSに適用された古い回帰テストと同じです。 回帰テストは、単体テストやエンドツーエンドのテストのようなタイプのテストではなく、より多くの戦略です。 これは、コードベースの変更後に回帰やバグをキャッチするためのテストスイートを設定することで構成されています。

だから、CSS回帰テストは、ページを変更した後、あなたのページスタイルを壊さないことを確認します。

構文

このカテゴリは、CSS構文が正常であることを確認するテストテクニックとツールを指します。 一言で言えば、それはCSSのためのlinterのようなものです。

プロジェクト

“プロジェクト”カテゴリとは、CSSがプロジェクトと組織の標準を尊重しているかどうかを確認することを意味します。

Reference

最後に、reference CSSテストは、実装され、レンダリングされたページが見た目になっているかどうかを確認します。 多くの進歩は、この分野で行われており、物事は、彼らがInternet Explorerの支配の暗黒時代にあったよりもはるかに優れています。

しかし、それはもはや課題がないという意味ではない。 今日の主要なブラウザの多くが共通の基盤を共有しているにもかかわらず、Chromiumオープンソースブラウザは、少なくとも最も使用されているブラウザでペー

CSSテストツール：ここでは、主なもののいくつかがあります

私たちは、あなたがチェックアウトしたいかもしれない利用可能なツールのいくつかを順

前に言ったように、CSSテストはテストでは見落とされがちな領域です。 その意味の一つは、他のタイプのテストと比較して利用可能なツールの数が減少していることです。

CSS Lint

CSS Lintはまさにその名前が示唆するものです：CSSコードのlinter。 Webサイトでアクセスするか、npmパッケージとしてインストールできます。

CSS Lintは、コードに問題が含まれていないことをチェックするためのルールを使用する以外に、構文チェックを提供します。 独自のルールセットを作成することもできます。

BackstopJS

BackstopJSは、webアプリのための視覚的な回帰ツールです。 これは、時間をかけて撮影したDOMスクリーンショットを比較することによ Npmで簡単にインストールできます:

BackstopJSはヘッドレスChromeでテストをレンダリングし、Puppeteerスクリプトを使用してユーザーとの対話をシミュ CIに追加することができ、統合されたDockerレンダリングが付属しています。

Quixote

QuixoteはCSSのユニットと統合テストです。 このライブラリを使用すると、ブラウザによってHTML要素がどのようにレンダリングされるかを確認し、要素が相互にどのように関連しているかを Quixoteは最新のデスクトップおよびモバイルブラウザで動作しますが、Karmaなどのツールを使用して複数のブラウザでQuixoteテストを実行することもできます。

このツールはnpm経由でインストールできます:

CSSCritic

CSS Criticは、CSSの自動回帰テストのためのツールです。

これは、レイアウトの現在の状態を指定した参照画像と比較することによって機能します。 レイアウトが変更されるたびに、テストは失敗します。

npmを使用してCSS Criticを取得できます:

重要な制限は、CSSCriticがFirefoxとChromeでのみ動作することです。

結論

CSSテストは、しばしば見落とされがちなテスト形式です。 これは、悲しいことに、CSSは常にweb trifectaの醜いアヒルの子のようなものであったので、いくつかの理にかなっています。

しかし、CSSエラーは確かにwebアプリのインターフェイスに影響を与えるため、ユーザーエクスペリエンスに悪影響を与えるため、訪問者に優れたUXを提供す

この記事では、CSSテストの基礎、それが何であるか、なぜ重要なのか、そしてそれをどのように行うのかを見てきました。 また、リンター、単体テスト、回帰テスト、視覚的な回帰テストなど、さまざまなカテゴリをカバーする主要なツールのいくつかについても説明しました。 これで、CSSテストの概念とツールについての詳細を自由に知ることができます。

まとめる前に、ここで最後の考えがあります：CSSは重要であり、CSSテストの文脈だけではありません。 それはまた他のタイプのテストのために重要である。

たとえば、エンドツーエンドのテストツールでは、CSSクラス名を識別子として使用することがよくあります。 残念ながら、それは脆弱なアプローチになる可能性があります。 開発者は、CSSクラスにランダムな識別子を追加する手法を使用するのが一般的です。 CSSモジュールはそのようなアプローチの一例です。

このような手法を使用すると、しばしば脆弱なテストが発生します。 多くのツールは、DOM内の要素を見つけるためにクラス名に依存しています。 クラス名が変更されると、テストが失敗し、テストのメンテナンスが重くなります。

しかし、より良いアプローチがあります。 たとえば、Testimは最近、Locator Filtering and Mappingと呼ばれる機能を追加しました。 これにより、Testimは各要素のロケータを決定するときにクラス名の動的部分をフィルタリングできます。 これにより、ロケータの精度が向上し、テストケースの堅牢性が向上します。 テストを試してみて、ロケータフィルタリングを与えます。 幸せなテスト！