サイプレスの応用試験

エンドツーエンドのテストは、ユーザーの動作を反映して優れています.テストのこのカテゴリは、実際の人間のように動作し、同時にアプリケーションのさまざまな部分を検証します.Cypress ブラウザで実行されるテストのための高速で、簡単で信頼性の高い前提で新しいテストランナーです.
注:理想は常にテストを失敗させることです.しかし、サイプレス研究のために、ほとんどの例はその順序に従わなかった.

次は何

サイブレス

テスト環境の設定

初めてのテスト

最初のテストの実行

ページ要素のチェック

要素の応答性のテスト

どうしたらもっと深く行ける

インストール

NPMのインストールを使用できます.端末に入力します.

npm install --save-dev cypress

すべてがうまくいけば、我々は今我々の最初のテストを書くことができます.

テスト構成

使いましょうmy personal website 例として.デフォルトでは、Cypressは統合テストをサイプレス/統合フォルダ内にあることを期待しています.
この既定のパスを使用しない場合は、サイプレスを作成できます.JSONconfiguration file ディレクトリのルートで.

ページタイトルのテスト

私たちの最初のテストは非常に簡単です、私たちはちょうどページのタイトルが正しく動作しているかどうかを確認します.
サイプレス/統合フォルダ内で、私はSamples - spec . jsと呼ばれるファイルを作成しました

describe('Personal website home page', () => {
  it('contains "Tailo Mateus Gonsalves" in the title', () => {
  })
})

記述には、2つの引数、対象を持つ文字列、および任意のコードを実行するコールバック関数があります.この関数の中でいくつかの(いくつかのテスト)を含めることができます.また、2つのパラメータが期待されます.機能のリターンは、現実に対するテストの我々の主張をチェックしなければなりません.
ホームページをテストするには、それがどこにあるかを言わなければなりません.すべてのテストがこのページで行われるので、テストの前に常に実行される場所に追加できます.

describe('Personal Website home page', () => {
  beforeEach(() => {
    cy.visit('https://tailomateus.github.io/')
  })

  it('contains "Tailo Mateus Gonsalves" in the title', () => {
    cy.title().should('contain', 'Tailo Mateus Gonsalves)
  })
})

上の例ではcy.visit() 前に関数を実行しますので、テストを実行する前にテストするページを知ることができます.私たちは、ページのタイトルが名前を含むと主張しています.you can see other assertions supported here.

最初のテストの実行

サイプレスがグローバルにインストールされていないため、フォルダ内のbinフォルダのパスを追加する必要があります.このコマンドをプロジェクトのルートで使用します.

(npm bin)/cypress open

私のマシンではこうでした.

node_modules/cypress/bin/cypress open

すべてうまくいけば、このインターフェイスが開きます.

作成したファイルは利用可能ですので、テストを実行できます.我々は、我々のページがどのように振る舞うか、そして、結果がわかるのを見ることができるインターフェースを持ちます.

ページの要素のチェック

では、要素が実際にページに存在するかどうかを調べましょう.このテストでは、プロファイル画像が表示されているかどうかを検証します.
同じページをテストしているので、新しい記述を追加するだけで同じ記述を行うことができます.

it('has a visible profile picture', () => {
  cy.get('.img_profile').should('be.visible')
})

このテストはcy.get() 要素をキャプチャするには要素が非同期にロードされている場合、この関数はDefaultCommandTimeoutを表示するのを待ちますcypress.json ).
テストの結果

しかし、何らかの理由でテストを間違えた場合、結果は次のようになります.

応答性の試験

少し違ったテストをしましょう.私は、現在、ウェブサイトが異なる局面で働くと確信しなければなりません.そのように、すべてのユーザーが正しく使用することができます.
我々はまだ同じページをテストしているので、我々は既存のものの中で別の記述を加えるだけです.ここでは、320 pxの幅をテストし、プロファイルイメージがまだ見えるかどうかチェックします.このテストの幅を変更するにはcy.viewport() .

describe('with a 320x568 viewport', () => {
  beforeEach(() => {
    cy.viewport(320, 568);
  })
   it('has a visible mobile profile picture', () => {
    cy.get('.img_profile').should('be.visible')
  })
})

デフォルトでは、サイズは1000×660ですが、設定ファイル、cypressで変更できます.Jソンは以前言及しました.任意の画面サイズをテストすることができます.どのように我々のテストは、モバイル上で参照してください

もっと深く行きたい

In the documentation いくつかの例を見つけること自体.しかし、何かを表示したい場合は、サイプレスをインストールするときに、実行する100以上のテストで“example”というフォルダがあります.

画像の中にはいくつかの関数があります.この記事で調査されなかった1つの涼しいものは、Ajaxとフロントエンド反応の間でサイブレスがどのようにランクするかです.サーバーから取得した結果を制御できます.
プロジェクトが新しい機能を得るにつれて、エラーが発生する可能性は劇的に増加します.そして、私はあなたがそれを望まないということを知っています.ですから、プロジェクトでテストを開始して起動します.
例のコードはGitHub .
謝辞:このテキストはMarcos Gobbi

クレジットと参照

Cypress Documentation
An Intro to Web Site Testing with Cypress