サイプレス.初心者のためのテスト

エンドツーエンドのテストは、ソフトウェア開発の重要な側面です.多くの会社は、彼らの製品が正しい品質を持っていることを確認するためにテストを使用します.エンドツーエンドのテストに使用できるツールの一つはCypress .

サイプレスとは何か

サイプレスは、Mocha(別のJavaScriptテストフレームワーク)の上に構築されたJavaScriptベースのテストフレームワークです.他のテストツール(例えばセレン)と比較して、サイブレスはテストを走らせるために、Webdriverを使いません.サイプレスは、アプリケーションと同じランループで実行されます.ノードを使用します.テストと通信するJSサーバープロセス.
また、サイプレスを使用する利点もいくつかあります.

自動待ち- cypress自動的にDOMが表示されるように要素をロード待ちます.暗黙のうち、明示的に待機する前に要素を待つ必要はありません.

リアルタイムリロード-サイブレスは自動的にそれが調整されている後にテストファイルを保存し、自動的に新しく作られたバージョンを再読み込みします.手動でそれを行う必要はありません.

このチュートリアルを続ける前に知っておく必要があるもの

このチュートリアルでは、初心者にやさしいようにしようとしていますが、このチュートリアルを続ける前に知っておくべきことがいくつかあります.

HTMLとCSS

矢印関数、非同期、約束などのJavaScriptの概念

望ましいが、必要でない:モカ

インストール

サイプレスをインストールする前に、あなたが持っていることを確認する必要がありますnode.js & npm お使いのコンピュータにインストールされます.あなたがまだこれらをインストールしないならば、公式に行ってくださいNode website そして、最新の長期的なサポート(LTS)のバージョンをダウンロードします.

ノードをインストールしていることを確認します.JSとNPMは、端末またはコマンドプロンプトを開き、次のコマンドを入力します.
NPM :npm --vノードnode -vあなたが応答としてバージョン番号を返す場合は、それはあなたのデバイス上で正常にインストールしていることを意味します.
今、我々は最終的にサイプレスをインストールすることができます.サイプレスをインストールするには、2つのコマンドを実行する必要があります.

npm init - このコマンドはpackage.json プロジェクト内で使用可能なすべての依存関係を持つ

npm install cypress --save-dev - このコマンドは、プロジェクトフォルダ内でローカルでcypressをインストールします.このプロセスを完了するには数分かかることができます.

サイプレスを起動するには./node_modules/.bin/cypress open 端末で.これはサイプレスとこの新しいウィンドウを下に開きます.すべてのこれらのファイルは、あなたが初めてcypressをインストールするときに取得する例のテストです.彼らは'統合'フォルダに位置しています.

テキストエディタを開き、作成したサイプレスプロジェクトフォルダに移動します.好きなIDEを自由に使ってください.私は使うつもりですVisual Studio Code .
テストの一つをサイプレスウィンドウで実行すると、次のようにページが表示されます.

左側に、我々のテストのグループの名前と以下の個々のテストの名前があります.右側には、ブラウザで表示されたテストの出力が表示されます.我々は、我々のテストの結果が何であるかについて見るために前後に行くことができます.
サイプレステストファイルの作成
サイプレスでテストファイルを作りましょう.まず、削除するexample ' フォルダintegrations すべてのテストファイルで.

サイプレステストファイルの作成

テストのために、我々はこれを使いそうですdemo ウェブサイト.
テストファイルの構文については、以下のコードを使用できます.彼らを壊しましょう.

/// <reference types="cypress" />

describe("Account creation", () => {
before(() => {
cy.log('Tests have been started')
})
beforeEach(() => {
cy.visit('https://www.demoblaze.com/index.html')    
// Click on the sign up button
    cy.get('#signin2').click()

    // Verify sign up page
    cy.get('#signInModalLabel').contains('Sign up')

    cy.wait(2000)
    // Function that generate a new username with each new test
    function generateNewUsername() {
        let text = "";
        let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"

        for(let i = 0; i < 10; i++) 
        text += alphabet.charAt(Math.floor(Math.random() * alphabet.length))
        return text;
    }

    const generatedUsername = generateNewUsername()
    // Write the username and the password
    cy.get('#sign-username').type(generatedUsername)
    cy.get('#sign-password').type('randompassword')
})
it('should create a new account for the ecommerce website', () => {

    // Click on the Sign up button
    cy.get('button').contains('Sign up').click()

    // Verify alert message
    cy.on('window:alert', (str) => {
        expect(str).to.equal('Sign up successful.')
    })
})

it('should cancel creating the new account for the ecommerce website', () => {

    // Click on the close button
    cy.get('#signInModal > .modal-dialog > .modal-content > .modal-footer > .btn-secondary').click()
    // Verify the sign up page is not visible
    cy.get('#signInModalLabel').should('not.be.visible')
})
afterEach(() => {
    cy.log('Test has succeeded.')
  })
})

参考文献

ファイルの上部に置く必要があります/// <reference types="cypress" /> . これは、サイプレス構文を使用できることを確認することです.

description ()

それから、我々はdescribe() メソッド.The describe メソッドは、テストのグループの名前を示します.文字列内のテストケース名と矢印関数の2つの引数をとります.

フック

テストファイルではbefore(), beforeEach() and after() . これらはフックと呼ばれます.フックは、あなたのテストの前提条件を設定し、テストをクリーンアップするために使用されます.フックを使用すると、コードは非常にクリーナーであり、我々はコードの重複を防ぐことができます.ヒノキには4種類のフックがあります.

before() - すべてのテストの前にdescribe()

beforeEach() - 各テストの前に実行するdescribe()

after() - すべてのテストの後にdescribe()

afterEach() - 各テストの後に実行するdescribe()

()

The it() メソッドは個々のテストの名前を記述するメソッドです.…のようにdescribe() メソッドは、個々のテストの名前と矢印関数の2つの引数をとります.

での組み込みメソッド

サイプレスで利用できる多くの方法があります.あまりにも多くの議論があるので、私は一般的であるそれらのいくつかを議論します.あなたがより多くのサイプレス方法を知りたいならば、チェックしてくださいdocumentation .
cypressでは以下のようにコードを書きます:cy.log

cy - あなたがサイプレス法を使っていると宣言するために書かなければならない最初のもの

log() - 使用できる組み込みメソッドの例

コマンドチェーン

また、複数のサイプレスメソッドを使用して一緒に組み合わせることができます.これはコマンドチェインと呼ばれます.コマンドチェーンの例は次のようになります.

    cy.get('#sign-username').type(generatedUsername)

コードを壊しましょう:

cy - サイプレスの方法を使用して宣言

get() - 要素の取得方法

type() - 取得した要素にテキストを入力します.

主張

サイプレスでもできる最後のことは断言することです.サイプレスでアサートすることは、特定の要素または他の値がウェブページで利用可能であることを確認することです.アサーションの例は次のようになります.

    cy.get('#signInModalLabel').should('not.be.visible')

CSSセレクタを使用して要素を取得し、Sunメソッドを使用して、要素が見えないことを確認します.他のタイプのアサーションがありますdocumentation .

包む

私は、このチュートリアルでは、サイプレスを使用する方法を教えてほしいと基本が理解されます.この記事を楽しむ場合は、お友達/フォロワーと共有します.あなたがより多くの記事を読みたいならば、会報に加わるようにしてください.
閉じるこの動画はお気に入りから削除されています.下にチェック👇
より多くの記事チェックアウトhttps://helloiamarra.com/ もっとチュートリアル.