Cypress入門〜テストの作成と実行〜

はじめに

前回の記事ではインストールから起動までの方法について語りました。
Cypress入門〜インストールから起動まで〜

Cypress入門〜インストールから起動まで〜

テスト記述はspecというファイルで行えます。今回はこのファイルの基本的な作成方法とテストの実行を学んでいきましょう。

Cypressの作成方法

Cypressで使われる基本的なコマンドを紹介いたします。

cy.visit('訪れたいURL')  //webサイトの訪問

cy.get('DOMタグ')  //DOMの取得

cy.contain('文字列')  //文字列の確認

cy.click()  //クリック

cy.type('文字列')  //文字列の入力

cy.should('テストタイプ')  //assert
cy.should('テストタイプ', 比較値)
cy.should(メソッド)

cy.wait(ミリ秒数)  //待機

テストの実行

テストの実行のために簡単なログイン画面を作ってみました。

ログイン機能の確認のテストを作成してみましょう。

cypressをインストールしてらインストールしたディレクトリの下に「cypress」のディレクトリが自動に生成されます。
一般的にその下の「Integration」のフォルダーにテストのためのspecファイルが作成されます。
サンプルテストとして、Untilted.spec.jsを作成してみました。

describe('example my-app', () => {
    beforeEach(() => {
      cy.visit('http://localhost:3000')
    })

    //初期画面の確認
    it('check main page', () => {
        cy.contains('ID:');
        cy.contains('PW:')
    })

    //ログインテスト
    it('login test', () => {
        cy.get('input[name="id"]').type('admin')
        cy.get('input[name="pw"]').type('admin')
        cy.get('button').click()

        cy.wait(1000)

        cy.contains('ログイン成功')
    })
})

cypressのテストのため、まず、起動してみましょう。

mpx cypress open

cypressが起動されたら、ブラウザーが表示されます。
「Tests」タップには実行できるテスト、つまり作成されているspecファイルが表示されます。
テストはspecごとに実行されて、実行したいテストのファイルをクリックすれば自動にテストが行います。

実行後の画面はこちらになります。
画面の左側は実行したテストのコードと結果がpassかfailかを出力します。
右側は実際テストを行えた画面が表示されます。

上の画面はpassの場合ですが、failの場合も確認してみましょう。
Untilted.spec.jsに以下のコードを追記してみました。

//ログインテスト-error
    it('login test2', () => {
        cy.get('input[name="id"]').type('abc')
        cy.get('input[name="pw"]').type('abc')
        cy.get('button').click()

        cy.wait(1000)

        cy.contains('ログイン成功')
    })

このテストを実行すると

左側でエラーメッセージが出力せれます。

このように行ったテストはビデオやスクリーンショットの証跡の作成、ダッシュボードを通じたチームメンバーとの共有やテスト管理もできます。
次の記事ではそれに対して調べてみましょう。