サイプレスによる視覚試験

より良い読書経験のために、あなたは私のブログのこの記事を読むことができますphilscode.com .

シーンを設定する🖼️

金曜日の夕方、太陽は輝いている🌞, 最新のUI変更を生産に配備しました.ちょうどあなたがそれらの足を置いて、その隠れ家を注文するように.

それらの悲鳴の声はすべての角度から来る😨;


明らかに、何かがここで不愉快です.ビルドを確認しましょう.
ユニットテスト✅
コンポーネントテスト✅
E 2 Eテストさえ合格!✅
それはバックエンドの人々、右である必要がありますか?米国フロントエンドのDEVSは決して間違いをしない.😀
それらのdevのツールを開いて、より深い観察をする時間.
ネットワークエラーはなく、コンソール出力を心配しません.…を待つ.
これは何ですか.

/* Todo: debug code - remove before deploy */
body {
  transform: scale(0.1);
  opacity: 0.1;
}

そらそのデバッグコードは、我々は我々が我々はTodo コメント!現在、ドキュメント本体全体が1/10で縮小され、その不透明度が0.1に設定されました😧. 意味は、すべてのコンテンツは、ちょうど事実上私たちの目に目に見えないです!
でも待ちます.なぜテストは合格したのか.🕵️
ほとんどの場合、テストは要素をつかんで、可視性(不透明度0)を確かめるか、いくつかのテキストを主張するが、実際に視覚的にページをチェックしていません.我々は、結局我々の視力を自動化することができません!

Or can we...

これが問題を実証するための極端な例であったが、それはまだもっともらしいシナリオである.この種の問題は、今日、あなたのアプリケーションの小さいが、非常に重要なセクションで起こるかもしれません.例えば「Submit」ボタンのように.
どのように我々は、これらの種類の問題が発生するのを防ぐために視覚的なテストを使用する方法を見てみましょう.
クイック側のノートとして、この1つのようなより多くのポストに自由に感じる.
今すぐテストに!

視覚テスト🧪

概要📓

私たちは使用するつもりですCypress 無料コミュニティプラグインとともにcypress-plugin-snapshots .
サイプレスは、ブラウザーを制御するために使用され、追加のプラグイン、サイプレスプラグインのスナップショットは、ビジュアルテストを実行するために使用されます.
があるvast number of plugins available サイブレスを使用して視覚的なテストを行うために、無料で支払われるので、決定する前にそれらをすべてチェックアウトしてください.決定する前にそれらをすべてチェックする.

テスト📝

我々はデモの2つの非常に簡単なテストを作成するつもりです.彼らは両方とも同じものをテストしています、1つは標準的なサイブレステストで、もう一つは視覚テストです.
テストに接続する必要がありますhttps://philscode.com 最初のブログ記事をクリックし、投稿タイトルが存在することを確認します.
このテストのマニュアルの見通しを確認してください.

コーディングしましょう!💻

前提条件

ノードがない場合.JSインストールヘッドnodejs.org 続行する前に設定します.

基礎を置く⚙️

を得ましょうpackage.json , いいえ質問は、選択した端末に以下のコマンドを入力して尋ねた.

npm init -y

次の依存関係をインストールします.

npm i [email protected] [email protected] -S

Note the fixed versions here (this is purely to improve compatibility with this tutorial in the future).

また、コマンドを追加しますpackage.json 物事を少し簡単にする.スクリプトセクションに以下をドロップします.

"start": "cypress open"

今、我々はサイプレスを火で燃やすことができますnpm start .

npm start

テストを書く前に、自動生成されたcypress.json 含めるbaseUrl . 置換するcypress.json 以下のコードブロックの内容(必要に応じてbaseURLを調整します).

// cypress.json
{
  "baseUrl": "http://localhost:1313/"
}

我々は、我々のワークスペースの新しくつくられたサイブレスフォルダに頭を向けて、統合されたフォルダdemo.spec.ts .
我々は最初のテストでこのファイルを読み込むことができます.これは、ブログ投稿タイトルを検証する定期的なサイプレステストになります.

// demo.spec.js
describe("Demo Testing", () => {
  it("can open a blog page", () => {
    cy.visit("/");

    cy.get(".post-entry:first").click();

    cy.get(".post-title")
      .should("be.visible")
      .contains("Web scraping to create an api in 3 minutes!");
  });
});

今、我々はdemo.spec.ts サイプレスファイルセレクターからのファイルnpm start コマンド.以下のチェックを実行してください.

すごい!私たちは合格テストを!さえずりをセットしたらどうなるか見てみましょう.投稿先:

.post-title {
  transform: scale(0.1);
  opacity: 0.1;
}

さて、同じテストをもう一度実行するのを確認してください.

たとえタイトルが見えなくても、テストはまだ通る.これは理想的ではない.

視覚テスト👁️

プラグインを設定しましょう.
ジャンプするcypress/integration/plugins/index.js を返します.

const { initPlugin } = require("cypress-plugin-snapshots/plugin");

module.exports = (on, config) => {
  initPlugin(on, config);
  return config;
};

次のインポートを追加しますcypress/integration/support/index.js .

import "cypress-plugin-snapshots/commands";

今のところ、我々はCSS 変更は、我々.
第2テストを加えましょうdemo.spec.js .

it("visually check a post", () => {
  cy.visit("/");

  cy.get(".post-entry:first").click();

  cy.get(".post-title").toMatchImageSnapshot({ imageConfig: { threshold: 0 } });
});

このテストを実行した後に渡すと画像がワークスペースに保存されます.以下をチェックしてください.

このイメージは、我々のベースラインイメージであるでしょう.悪いことを再紹介しましょうCSS テストを再実行します.
我々は今失敗したテストを持っており、我々はまた、期待される実際の画像結果を見て得ることができます.また、潜在的な違いが横たわって強調表示された領域と両方の画像のオーバーレイを見ることができるので、画像の差分がご利用いただけます.

成功!👍

結論

視覚テストは、コンポーネントごとにコンポーネントごとに、ページ全体、個々の要素をテストするために使用することができます.どんなツール開発者が利用するように、使用はあなた自身のユースケースに依存します.大規模なスクリーンショットは簡単に時間をかけて脆くなるので、慎重にテスト(としきい値)を検討してください.
すべてをチェックアウトしてくださいavailable Cypress visual testing plugins もっと学ぶ!
連絡を取り合いなさい.
私のブログもチェックしてください.philscode.com
ソースコード:Github