概要
Cypress初めて触ってみる人向けの資料
手順
準備
作業用ディレクトリ作成し移動
mkdir cypress
cd cypress
yarnの初期化
yarn init -y
Cypressのインストール
yarn add cypress
初期設定＆起動
yarn run cypress open
E2Eを選択
Chromeを選択
空のspecを作成
勝手に実行される
コーディングに関して
コーディング方法
今まで画面上でぽちぽちしていたのですが、じゃあどうやって実際のテストとか書いてくねん？？って話なんですけど。
作成したディレクトリの中にcypress/e2e/というディレクトリがあり、そこを書き換えることで好きにコードが書けます。
ターミナルでの実行方法
下記のような形でファイルを指定することで実行できます。
ただ、GUIが充実しているのでそっちで実行の方がいい気がします。
コード編集したら自動でまた流れてくれますし。
yarn run cypress run --spec cypress/e2e/test.cy.js
出力
ターミナル実行の場合ログの出力をしたくなるとおもうので紹介
cypress.config.jsを下記のように書き換え
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
on('task', {
log(message) {
console.log(message)
return null
},
})
},
}
})
テストコードの中では
cy.task('log', '出力したいもの')
という形で出力できます。
実例紹介
あとはもう、実例みて行った方が早い気がするので色々載せます
Google 検索のコード
describe('empty spec', () => {
it('Googleで検索', () => {
cy.visit('https://www.google.com/?hl=ja')
cy.get('input').eq(0).type('綾瀬 居酒屋 食べログ{enter}')
// 見出しを出力
cy.get('h3').each(h3 => {
cy.task('log', h3.text())
})
})
})
出力
綾瀬駅でおすすめの美味しい居酒屋をご紹介！ - 食べログ
綾瀬で人気の居酒屋 ランキングTOP20 - 食べログ
綾瀬でおすすめの美味しい居酒屋をご紹介！ - 食べログ
足立区綾瀬でおすすめの美味しい居酒屋をご紹介！ - 食べログ
千住・綾瀬・葛飾で人気の居酒屋 ランキングTOP20 - 食べログ
綾瀬駅でおすすめのグルメ情報をご紹介！ | 食べログ
綾瀬駅でランチに使える居酒屋 ランキング | 食べログ
綾瀬市でおすすめの美味しい居酒屋をご紹介！ - 食べログ
【個室あり】綾瀬駅でおすすめの居酒屋をご紹介！ - 食べログ
綾瀬のグルメ・レストランガイド - 食べログ
Google検索結果のテスト
E2Eの記事なのにスクレイピングっぽいのだけでは怒られそうなので
describe('empty spec', () => {
it('Google検索で食べログのページが1件目に表示される', () => {
cy.visit('https://www.google.com/?hl=ja')
cy.get('input').eq(0).type('綾瀬 居酒屋 食べログ{enter}')
cy.get('h3').eq(0).should('have.text', '綾瀬駅でおすすめの美味しい居酒屋をご紹介！ - 食べログ')
})
})
出力
✓ Google検索で食べログのページが1件目に表示される (5587ms)
1 passing (7s)
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 1 │
│ Passing: 1 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 6 seconds │
│ Spec Ran: google-search-test.cy.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘