はじめてのcypress 冬の大失敗スペシャル

[Ateam Lifestyle Advent Calendar 2019](https://qiita.com/advent-calendar/2019/ateam-lifestyle)の9日目は
新卒1年目　株式会社エイチームライフスタイル　名古屋開発部の@hurikake06が担当します。

普段はバックエンド（rails）の開発をメインでやっています。
投稿も開発も未熟者ではありますが、精一杯書かせていただきます。

## はじめに
はじめてのおつかい 夏の大冒険スペシャル
ではなく、
**はじめてのcypress 冬の大失敗スペシャル**
失敗談を語りつつ、cypressを紹介できればと思います。

## [Cypress](https://www.cypress.io/)とは
jsで記述できるお手軽E2Eテストフレームワーク

### [install](https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements)

```zsh
$ npm install cypress
```

### 起動

```zsh
$ npx cypress open
```

あとは、
integration/examples/
配下のサンプルや[公式のドキュメント](https://docs.cypress.io/api/api/table-of-contents.html)を見ながら実装していくだけです。

## 本当はやりたかったこと(ここから失敗談)

gasを通してスプレットシートを基にE2Eテストを実行する。

<img width="810" alt="スクリーンショット 2019-12-05 0.48.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395295/149c046a-8234-99c8-af61-3cd5b246b7b5.png">

## 失敗談
(例)
アクセスするURLと設定されていてほしいcanonicalの値を
スプレットシートから読み取ってE2Eテストをする

###手順
①スプレットシートにデータをいれる
(例)
https://www.a-tm.co.jp/

| URL              |       canonical | 
|:-----------------|------------------:|
| /  |  / |
| /news_category/corporate/  |   /news_category/corporate/ |
| /news_category/corporate/page/2 |  /news_category/corporate/ |

②スプレットシートからデータを公開するAPIを作成

```javascript
function doGet(e) {
  return ContentService.createTextOutput(getCanonicalJson()).setMimeType(ContentService.MimeType.JSON)
}

function getCanonicalJson(){
  SHEETS_ID = 'YOUR_SHEETS_KEY'
  SHEET_NAME = 'YOUR_SHEET_NAME'
  var sheet = SpreadsheetApp.openById(SHEETS_ID).getSheetByName(SHEET_NAME)
  
  var values = sheet.getRange('A1:B4').getValues() //Rangeは適当
  var canonicals = {}
  values.forEach(function(value){
    canonicals[value[0]] = value[1]
  })
  return JSON.stringify(canonicals)
}
```

③cypress側から取得

```javascript
const API_URL = 'YOUR_API_URL'
canonicals = async function getApiDate() {
  const res = await fetch(API_URL)
  const data = await res.json()
  return data
}
```

## 結果
CORSエラー
→　application/jsonの場合は発生するようです
[参考](https://qiita.com/riversun/items/c924cfe70e16ee3fe3ba#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%8B%E3%82%89%E3%81%93%E3%81%AEapi%E3%82%92%E3%81%9F%E3%81%9F%E3%81%8D%E3%81%9F%E3%81%84)

JSONPなども試しましたが、cypressからはうまく取得できず詰まる。

以上、失敗談でした。

## 最後に
成果物（canonicalをチェックしているテスト）を載せておきます

```javascript
export { targetURLs as default }

var targetURLs = [{name: 'トップページ', url: "https://www.a-tm.co.jp/", canonical: "https://www.a-tm.co.jp/"},
                {name: '企業情報', url: "https://www.a-tm.co.jp/about/", canonical: "https://www.a-tm.co.jp/about/"},
                {name: '大切にしていること', url: "https://www.a-tm.co.jp/about/philosophy/", canonical: "https://www.a-tm.co.jp/about/philosophy/"}]
```

```javascript
import targetURLs from './MySettings'

describe('Ateam Canonical Test', () => {
	targetURLs.forEach(target => {
		it(target.name, () => {
			cy.visit(target.url)
			cy.get('link[rel=canonical]').should('have.attr', 'href', target.canonical)
		})
	});
})
```

ページごとに
スクロールやクリックをつけるといい感じに..。

![canonical_test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395295/850d5bf9-7808-9868-f99f-7996dc25144f.gif)


動的に生成しているDOMのチェックなど色々できるので
これから勉強していこうと思います！

## まとめ
最後まで読んでくださりありがとうございました！

初めてのおつかい然り初めてのcypress然り
最初から寄り道をするとろくなことにはなりませんね

## 次回のアドベントカレンダー

[Ateam Lifestyle Advent Calendar](https://qiita.com/advent-calendar/2019/ateam-lifestyle) 2019の10日目は、@yutaroud がお送りします。
自動化大好きエンジニア@yutaroudの記事は必見ですよ！

“挑戦”を大事にするエイチームグループでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。興味を持たれた方はぜひエイチームグループ採用サイトを御覧ください。
https://www.a-tm.co.jp/recruit/