Cypress入門


## cypressの環境構築

プロジェクトフォルダ内でnpm initする
```
 npm init -y
```

cypressをインストール
```
 npm install cypress -save-dev
```

cypressができているか確認する
```
 cypress -v
```

インストールに成功している場合はバージョンが表示され、プロジェクトフォルダの中にcypressというディレクトリが作られている。まだ中身のフォルダが作られていないので以下を実行。

```
 npx cypress open
```


GUIが開き、以下のフォルダが表示される。
 - cypress 
    - fixtures
    - integration
    - plugins
    - support
        - commands.js
        - index.js

このようになった時点で、cypressにはmochaとchaiが自動的にバンドルされている。

## 各ディレクトリの説明

### fixtures
 テストデータを管理する

### integration
 テスト実行用のファイルを管理する

### plugins
cypressの内部的な振る舞いの拡張や修正
 
### support
command.jsには何度も使うコードをカスタムコマンドにして管理する
index.jsは各テストファイルの前に実行される

## cypressの基本コマンド

### URLのページを開く
```
 cy.visit('URL')
```

### HTTPS通信か確認する
```
cy.location('protocol').should('contain', 'HTTPS')
```

### ホストネームを確認する
https://qiita.com/
```
cy.location('hostname').should('eq', 'qiita.com')
https://docs.cypress.io/api/commands/location#Command-Log
```

### 

### 前のページに戻る
```
 cy.go(-1)
 cy.go('back')
````

### 次のページに遷移する
```
 cy.go(1)
 cy.go('forward')
```

### ページの再読み込みをする
```
 cy.reload()
```

### エレメントを取得する
```
cy.get()

例)
HTMLタグと属性: cy.get('input[name="email"]')
クラス: cy.get('.q')
HTMLタグ: cy.get('input')
```
### 特定の文字列を含むエレメントを取得する
```
cy.contains('text')
  textを含むエレメントを取得する
```

### 文字列を入力する
```
cy.get().type('text') 
  
cy.get().type('text{enter}') 
取得したエレメントに文字列を入力してエンターキーを押す
 
cy.get().clear()
取得したエレメントのテキストボックスの文字列をクリアする

cy.get().type('Text', force: true})
desabledになっているテキストボックスを取得して強制的に入力する

cy.get().first()
取得したエレメント中、最初のエレメントを取得する

cy.get().eq(n)
取得したエレメント中、n番目のエレメントを取得する

cy.get().last()
取得したエレメント中、最後のエレメントを取得する

cy.get().filter()
特定のセレクタにマッチしたエレメントを取得する
https://docs.cypress.io/api/commands/filter#Selector
```

### 要素をクリックする
``` 
cy.get().click()
取得したエレメントをクリックする
 
cy.get().click({force: true})
様々な状況によクリック時にエラーを起き、テストの進行の妨げとなることがある。その場合はforce: trueで強行実行する。
 
cy.get().dblclick()
取得したエレメントをダブルクリックする
 
cy.get().click({multiple: true})
取得した複数のエレメントをまとめてクリックする
```
### ドロップダウンメニューの項目を操作する
```
cy.get().select()
ドロップダウンのメニューから単数選択する
 
cy.get().select(['A', 'B', 'C'])
ドロップダウンのメニューを複数選択する
```

### ラジオボタンを操作する
```
cy.get().check()
チェックボックスの項目にチェックする
 
cy.get().unckeck()
チェックボックスのチェックを外す
 
cy.get().first().check()
チェックボックスの最初の項目にチェックする
```

## fixtureでテストデータを管理する

JSON形式でテストデータを用意する

```fixture/userdetails.json
{
  "email": "xxxxxxxx@gmail.com",
  "password": "password"
}
```

```
cy.ficture('login/userdetails.json')
     .then(logindata => {
       this.logindata = logindata
         })
});

cy.get('#user_email').type(this.logindata.email)   
```

## xpathでエレメントを操作する

cypressはデフォルトではCSSセレクタでのエレメント取得をサポートしており、xpathはサポートしていない。xpathで取得するにはcypress xpathプラグインをインストールする。

```
npm install cypress-xpath
```

加えて、index.jsに以下を追記する

```
import 'cypress-xpath'
```
エレメントをxpathで取得する場合には以下のように記載。

```
cy.xpath()
```

Cypressのプラグインはここから確認できる。
https://docs.cypress.io/plugins/directory

## カスタムコマンドを作る
suppotのcommands.jsに繰り返し使いたいコードを書く。
Cypress.commands.addにコマンドを加える。

```support/commands.js
Cypress.Commands.add('login', (email, password) => {
 cy.visit("users/sign_in")
 cy.get('.new_user> .btn').click()
})
```

```integration/login.js

it('working with fixture', function(){
   cy.login(this.logindata.email, this.logindata.password)
})
```