🧪

調べても意外と出てこないCypress設定 & コマンド集

2024/11/30に公開

E2E テスト

共通メソッドの設定

/cypress/support/index.d.ts

declare global {
  namespace Cypress {
    interface Chainable {
        hogehoge(): void()
        fugafuga(arg:string): Cypress.Chainable<string>
    }
  }
}

/cypress/support/commands.ts

Cypress.Commands.add('hogehoge', () => {
  ...
})
Cypress.Commands.add('fugafuga', (arg:string) => {
  return text
})

共通メソッドファイルを分割する方法

環境変数の設定

cypress.config

import { defineConfig } from 'cypress'
import cypressEnv from './cypress.env.json'

export default defineConfig({
  retries: 2, // 失敗したら+2回リトライ
  env: {
    BASE_URL: cypressEnv.env.BASE_URL
  },
  e2e: {
    setupNodeEvents(_on, _config) {
     ...
    },
  },
})

cypress.env.json

{
  'env': {
    'BASE_URL': 'http://localhost:8080'
  }
}

/cypress/e2e/〇〇.cy.ts

const BASE_URL = Cypress.env('BASE_URL')

APIを呼ぶ

//ヘッダーなし
cy.request('APIのURL').as(requestName)

//ヘッダーあり
cy.request({
  url: 'URL',
  headers: { [KEY]: VALUE },
    }).as(requestName)


cy.get('@requestName').then((response: any) => {
 const data = response.body
 cy.get('body').contains(data.text)
})

APIのmock

cy.intercept('APIのURL',{
 body: {
    ...
 }
})

処理が終わるのを待つ

1秒待つ

cy.wait(1000)

上の処理が終わったら実行

// mainが取得できたら実行
cy.get('main').then(()=>{
 // 待ってから行いたいテスト
})

APIを呼んでから実行

Cypress上でAPIを呼び、待ってから実行

cy.request('APIのURL').as(requestName)
cy.wait('@requestName')
// 待ってから行いたいテスト

画面上のAPIが呼ばれるのを待ってから実行

cy.intercept('APIのURL').as(requestName)
cy.wait('@requestName').its('response.statusCode').should('eq',200)
// 待ってから行いたいテスト

URLが変わるまで待つ

cy.url().should('include', '遷移後のPageURL')
// 待ってから行いたいテスト

要素のテキスト取得

操作前に取得しておいて、操作後に表示される文字が変わっていないか、等で利用

cy.get('div').then(($divElement)=>{
    const divText = $divElement.text()
})

要素のCSS取得

cy.get('button').invoke('css', 'color').then((color)=>{
    ...
})

繰り返す

画面上のリストを全て押下

cy.get('li').each(($listElement)=>{
    cy.wrap($listElement).click()
})

windowのモーダルを無効にする

// 印刷プレビューを無効にする
cy.window().then((win)=>{
    cy.stub(win, 'print').as('print')
})