Cypressとは

CypressでE2E（End-to-End）テストは「ユーザーがブラウザで行う操作を自動化して、アプリを“本物の環境に近い形”で丸ごと検証するテスト」です。
ブラウザを立ち上げて、ページ遷移・入力・クリック・ネットワーク通信・表示結果までを一連で確認します。

インストール方法

$ npm install cypress --save-dev

GUIはこちらです：

準備

簡単な触るために、簡単のサイトを準備しましょう

テスト用のappを作りましょう :

/ 
    cypress/
      e2e/
        login.cy.js
        items.cy.js
        smoke.cy.js
    src/
        server.js
    public/
        app.js
        index.html
    cypress.config.js
    package.json

/cypress.config.js :

import { defineConfig } from 'cypress'
export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    specPattern: 'cypress/e2e/**/*.cy.js',
    supportFile: false,
    retries: { runMode: 2, openMode: 0 },
    video: true,
  },
})

/src/server.js :

import express from 'express';
import path from 'path';
import cors from 'cors';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();
app.use(cors());
app.use(express.json());

const USERS = [{ id: 1, email: 'demo@example.com', password: 'password123', name: 'Demo User' }];
const ITEMS = [{ id:1,name:'Sample Item A'},{ id:2,name:'Sample Item B'},{ id:3,name:'Sample Item C'}];

app.post('/api/login', (req,res) => {
  const { email, password } = req.body || {};
  const u = USERS.find(x => x.email===email && x.password===password);
  if (!u) return res.status(401).json({ error: 'Invalid credentials' });
  const token = Buffer.from(`${u.id}:${Date.now()}`).toString('base64');
  res.json({ token, user:{ id:u.id, email:u.email, name:u.name } });
});

app.get('/api/items', (req,res) => {
  const auth = req.headers.authorization || '';
  if (!auth.startsWith('Bearer ')) return res.status(401).json({ error:'Unauthorized' });
  res.json({ items: ITEMS });
});

app.use(express.static(path.join(__dirname, '..', 'public')));

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server http://localhost:${PORT}`));

/public/app.js :

const loginForm = document.getElementById('login-form');
const loginInfo = document.getElementById('login-info');
const itemsBtn = document.getElementById('load-items');
const itemsList = document.getElementById('items-list');

const setToken = t => localStorage.setItem('token', t);
const getToken = () => localStorage.getItem('token');

loginForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  const res = await fetch('/api/login', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ email, password }) });
  if (!res.ok) return loginInfo.textContent = 'Login failed';
  const data = await res.json();
  setToken(data.token);
  loginInfo.textContent = `Welcome, ${data.user.name}!`;
});

itemsBtn.addEventListener('click', async () => {
  const res = await fetch('/api/items', { headers:{ Authorization: `Bearer ${getToken()||''}` } });
  itemsList.innerHTML = '';
  if (!res.ok) return itemsList.innerHTML = '<li>Unauthorized. Please login first.</li>';
  const data = await res.json();
  data.items.forEach(it => {
    const li = document.createElement('li');
    li.textContent = it.name;
    itemsList.appendChild(li);
  });
});

あとは簡単のhtml :

/public/index.html :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Cypress Starter App</title>
</head>
<body>
  <main>
    <h1>Cypress Starter</h1>

    <section id="auth">
      <h2>Login</h2>
      <form id="login-form">
        <label>Email <input id="email" type="email" value="demo@example.com" required /></label>
        <label>Password <input id="password" type="password" value="password123" required /></label>
        <button data-testid="login-button" type="submit">Log In</button>
      </form>
      <p id="login-info"></p>
    </section>

    <hr/>

    <section id="items">
      <h2>Items</h2>
      <button id="load-items">Load Items</button>
      <ul id="items-list"></ul>
    </section>
  </main>
  <script type="module" src="./app.js"></script>
</body>
</html>

起動

それでインストールして

$ npm install
$ npm run dev

それで無事にテストを始まれる！

cypressの起動

$ npm run cypress:open

/cypress/e2e/items.cy.js :

describe('Items list', () => {
  beforeEach(() => {
    cy.request('POST', '/api/login', { email: 'demo@example.com', password: 'password123' })
      .then(({ body }) => { window.localStorage.setItem('token', body.token); });
  });

  it('loads items after clicking the button', () => {
    cy.visit('/');
    cy.intercept('GET', '/api/items').as('getItems');
    cy.get('#load-items').click();
    cy.wait('@getItems');
    cy.contains('Sample Item A').should('be.visible');
    cy.contains('Sample Item B').should('be.visible');
  });
});

/cypress/e2e/login.cy.js :

describe('Login flow', () => {
  it('logs in with demo user', () => {
    cy.visit('/');
    cy.get('#email').clear().type('demo@example.com');
    cy.get('#password').clear().type('password123');
    cy.get('[data-testid="login-button"]').click();
    cy.contains('Welcome, Demo User!').should('be.visible');
    cy.window().then(win => {
      const token = win.localStorage.getItem('token');
      expect(token).to.be.a('string').and.not.be.empty;
    });
  });
});

今回はテストの説明の為にですが、必要であればログイン情報はCypressの環境変数などに格納してご利用ください。

/cypress/e2e/smoke.cy.js :

describe('Smoke', () => {
  it('shows title and login button', () => {
    cy.visit('/');
    cy.title().should('include', 'Cypress Starter App');
    cy.get('[data-testid="login-button"]').should('be.visible');
  });
});

GUI

スタートすると、ブラウザーが選べます：

やっとテストが見えるようになります：

specsでクリックすると、テスト開始になります：

コマンド

コマンドも出来ます！

$ npm run cypress:run

レポート

テストが多いだと、コマンドラインで見にくいなのでレポートも作りましょ！

設定：

/package.json :

{
  "scripts": {
  ...
    "delete:reports": "rm cypress/results/* || true",
    "combine:reports": "jrm cypress/results/combined-report.xml \"cypress/results/*.xml\"",
    "prereport": "npm run delete:reports",
    "report": "cypress run --reporter cypress-multi-reporters --reporter-options configFile=reporter-config.json",
    "postreport": "npm run combine:reports"
  }
}

mochawesomeってスタイルをおすすめします：

npm install mochawesome mochawesome-merge mochawesome-report-generator --save-dev

/cypress.config.ts :

export default defineConfig({
  ...
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/results',
    overwrite: false,
    html: false,
    json: true,
  },
})

実行：

$ npx cypress run --reporter mochawesome \
  --reporter-options reportDir="cypress/results",overwrite=false,html=false,json=true

各テストについて、結果のファイルが発生されます：

$ npx mochawesome-merge "cypress/results/*.json" > mochawesome.json

各ファイルをマージして、一個にまとめます：

$ npx marge mochawesome.json

それでローカルでhtmlのファイルが生成されます！

テストの説明

今回はloginのテストフローを簡単に説明します。

describe('Login flow', () => {
  it('logs in with demo user', () => {
    cy.visit('/');

トップページへアクセス。

以後のコマンドはこのページを前提に動きます。cy.visit はページ読み込み完了まで適切に待機します（固定の wait は不要）。

    cy.get('#email').clear().type('demo@example.com');
    cy.get('#password').clear().type('password123');

メールとパスワードを入力。

cy.get は要素取得（デフォで自動リトライ）、それで .clear().type で既存文字があっても確実に上書きできます。

    cy.get('[data-testid="login-button"]').click();

ログインボタンをクリック。

data-testid などの壊れにくいセレクタを使っていて、CSSクラスやテキストに依存しないのでUI変更に強いです。

    cy.contains('Welcome, Demo User!').should('be.visible');

ログイン成功のUI確認。

画面に成功メッセージが表示されるまで自動で待機してから可視性を検証します。

    cy.window().then(win => {
      const token = win.localStorage.getItem('token');
      expect(token).to.be.a('string').and.not.be.empty;
    });

副作用（認証トークン）を検証。

cy.window() はアプリの window を取得します。localStorage に token が保存されたかを Chai のアサーションでチェックします。

メリット / 注意点

メリット

実利用に近い信頼性の高いフィードバック

バックエンド・フロント間の“つなぎ目”のバグを拾いやすい

注意点

実行時間が長くなりがち → 重要シナリオに絞る／並列化

不安定要因（外部API・時間依存） → cy.intercept / cy.clock で制御

セレクタは data-testid など壊れにくいものを使う

まとめ

今まで色んなテストをやっており、特にユニットテストが多かったですが、ちゃんと画面で確認出来るので本当に安心します。

本番に一番近いし、ミスが発見しやすく、レポートもちゃんとして、確認しやすいです。

ただ、大きなサイトだと重くなる可能性があります。