9
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Ateam LifestyleAdvent Calendar 2019

Day 9

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

Last updated at Posted at 2019-12-08

Ateam Lifestyle Advent Calendar 2019の9日目は
新卒1年目 株式会社エイチームライフスタイル 名古屋開発部の@hurikake06が担当します。

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

はじめに

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

Cypressとは

jsで記述できるお手軽E2Eテストフレームワーク

install

$ npm install cypress

起動

$ npx cypress open

あとは、
integration/examples/
配下のサンプルや公式のドキュメントを見ながら実装していくだけです。

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

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

スクリーンショット 2019-12-05 0.48.41.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を作成

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側から取得

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の場合は発生するようです
参考

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

以上、失敗談でした。

最後に

成果物(canonicalをチェックしているテスト)を載せておきます

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/"}]
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

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

まとめ

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

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

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

Ateam Lifestyle Advent Calendar 2019の10日目は、@yutaroud がお送りします。
自動化大好きエンジニア@yutaroudの記事は必見ですよ!

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

9
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?