Cypress使ってみた

Cypressについて自分が学んだ事を忘備録的な感じで書いていきます。

##Cypressとは？
E2E(End to End)テストフフレームワークで、
そもそもE2Eテストとはユーザーの視点から実際にwebブラウザを通して一通りの処理をテストすることをさします。
E2Eテストを人間が全機能を手動で試すのは効率が悪いので、自動化するためのフレームワークです。

##Cypress導入
すでに node.jsが入っている前提でターミナルでコマンドを叩きます。

mkdir e2e
cd e2e
npm init -y
npm install cypress webpack @cypress/webpack-preprocessor typescript ts-loader

引用https://typescript-jp.gitbook.io/deep-dive/intro-1/cypress


`e2e/package.json`ファイルにスクリプトを追加します：
>``` json:package.json
"scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  }

ターミナルで以下のコマンド、どちらかでok。
違いは、
・npm run cypress:openはcypress IDEが開く。
・npm run cypress:runはビルドサーバーで実行される。

npm run cypress:open

npm run cypress:run

導入はここまでです。

##Cypress実装
テストファイルは、e2e/cypress/integration配下に作成します。

appleのホームページに行きMacbookAirを見に行くテストを書きましょう。

hoge.spec.js

describe('My First Test', function() {
  it('Visit Apple', function() {
    cy.visit('https://www.apple.com/jp/')
    
    cy.get('#ac-gn-link-search').click();

    cy.get('#ac-gn-searchform-input')
    .type('Mac')

    cy.get('#quicklinks > :nth-child(2) > .ac-gn-searchresults-link').click();

  })
})

ざっくりとこんな感じですね、DOM要素を指定するときはjQueryセレクターと同じです。

##覚えておくと便利かも

便利かも.spec.js

//指定のURLへ遷移
cy.visit('http://localhost:8888/')

//現在のURLを取得
cy.url()

//DOMの取得
cy.get('.hogeDom > li')

//入力
cy.get(.hoge).type('hoge')

//チェックボックスの状態
cy.get(':checkbox').should('be.disabled')

//DOMのclass所持
cy.get('.hoge').should('have.class', 'hoge')

//値があるかどうか
cy.get('input').should('not.have.value', 'US')

//指定の文字列が含まれている要素を取得
cy.contains('文字列検索')

//複数要素取れた場合指定インデックスで取得
cy.get('.hoge').eq(1)

//小要素から検索
cy.get('.bigHog').find('.somleHoge')
  
//クリックイベントを発火
cy.get('.hogeBtn').click()

//セレクトボックスを指定した値で選択
cy.get('.hogeSelect').find('select').select('val')

//取得した要素をCypressで使えるようにする:wrap
cy.get('.BigHoge').find('somleHoge').children()
  .each(($e, index) => {
    cy.wrap($e).click()
  })

##覚えておくと更に便利かも

hoge.spec.js

//Cooｋieセット
cy.setCookie('hogeCookie', '123') 

//名前指定のCookie取得
cy.getCookie('hogeCookie')

//すべてのCookie取得
cy.getCookies()

//指定Cookie消す
cy.clearCookie('hoge')

//すべてのCookie消す
cy.clearCookies()   

//ローカルストレージ削除
cy.clearLocalStorage()

//ファイル読み込み
cy.readFile('menu.json')

//ファイル書き込み
cy.writeFile('menu.json')