cypressとは？

https://www.cypress.io/

ブラウザを操作してwebアプリのテストを自動実行できる。
seleniumとかと同じようなカテゴリに属すると思う。（ただし、クロスブラウザテストは現状できない）
seleniumよりも環境構築が簡単で気軽に試せる感じ。npm install cypress
webのelementの取得周りもけっこう使いやすい印象だった。

インストールや実行についてはこのあたりを参考に。

Installing Cypress | Cypress Documentation

cypressを触ってみた - Qiita

まだ全然使いこなせていないが、やったことをメモしとく。

テストの書き方

Rspecっぽく書ける。

cypress/integration/text_spec.js

describe('ログイン画面', () => {
    beforeEach(() => {
        cy.login("username", "password") // 前もってログイン（ログインコマンドを定義している。詳しくは下述）
    })

    it('ユーザー名が表示されている', () => {
         expect(cy.contains('username')).to.exist // usernameが表示されているかを確認
    })

    afterEach(() => {
        cy.logout() // テスト完了後にログアウト
    })
})

要素の取得の仕方

contains | Cypress Documentation

例えば、以下の要素を取得したければ

<button>押せ！</button>

以下の感じで取得できる。

cy.contains('押せ！')

もし「押せ！」が複数要素ある場合は最初のものが取得されるので、以下のようにgetにcss セレクタを渡して絞り込んで目的の要素を取得する

cy.get('form').contains('押せ！')

ボタンクリックの仕方

ボタン要素を取得してclick()

cy.get('form').contains('押せ！').click()

text要素のチェックの仕方

特定の要素のtextをcheckしたい場合は以下のような感じ

cy.get("#id > p:nth-child(3)").should(($el) =>{
    expect($el).to.have.text("予期されているテキスト")
})

スクリーンショットのとり方

cy.screenshot('ファイル名')

画面遷移してすぐにスクショを実行すると、まだ描画中のスクショがとれてしまっていたりする。
以下のようにすると、「申し込む」の要素が取得できたタイミングでスクショが実行される。

cy.get('form').contains('申込む').then(() => {
    cy.screenshot('ファイル名')
})

cyメソッドの定義の仕方

cypress/support/commands.js に以下のように書くと、cy.login("username", "password")のように使えるようになる。

Cypress.Commands.add('login', (username, password) => {
    cy.visit(`/login`)
    cy.get('input[name="account[username]"]').type(username)
    cy.get('input[name="account[password]"]').type(password)
    cy.get('input').contains('ログイン').click()
})

モジュールの作成の仕方

Cypressではなくjsの範疇の話だけど、別ファイルに分割してimportしたい時は以下の感じ。

cypress/util/greet.js

export default class Greet{
    static greeting(){
        console.log("hello")
    }
}