Playwright vs Cypress 比較

// Playwright Test - ログインフローとAPIモック(TypeScript)
import { test, expect } from '@playwright/test';

test.describe('Giris akisi', () => {
  test('gecerli kullanici ile giris yapar ve dashboard gorur', async ({ page }) => {
    // ネットワークモック - 追加設定不要
    await page.route('**/api/login', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ token: 'test-token', user: { name: 'Ayse' } }),
      });
    });

    await page.goto('/login');
    await page.getByLabel('E-posta').fill('[email protected]');
    await page.getByLabel('Sifre').fill('guclu-sifre-123');
    await page.getByRole('button', { name: 'Giris Yap' }).click();

    // Auto-wait: ロケーターが表示されるまで待機
    await expect(page.getByText('Hos geldin, Ayse')).toBeVisible();
    await expect(page).toHaveURL('/dashboard');
  });

  test('checkout iframe icindeki odeme butonunu bulur (cross-frame)', async ({ page }) => {
    await page.goto('/checkout');

    // v1.63.0: セレクターなしのframeLocatorはすべてのサブフレームツリーを検索
    const payButton = page.frameLocator().getByRole('button', { name: 'Ode' });
    await payButton.click();

    await expect(page.getByText('Odeme basarili')).toBeVisible();
  });
});

test('3 tarayicida paralel calisir (playwright.config.ts icinde tanimli)', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveTitle(/Ana Sayfa/);
});

// Cypress - ログインフローとAPIモック(JavaScript/TypeScript)
describe('Giris akisi', () => {
  it('gecerli kullanici ile giris yapar ve dashboard gorur', () => {
    // cy.interceptによるネットワークスタブ
    cy.intercept('POST', '/api/login', {
      statusCode: 200,
      body: { token: 'test-token', user: { name: 'Ayse' } },
    }).as('loginRequest');

    cy.visit('/login');
    cy.get('[data-cy=email]').type('[email protected]');
    cy.get('[data-cy=password]').type('guclu-sifre-123');
    cy.get('[data-cy=submit]').click();

    cy.wait('@loginRequest');

    // Cypress自動リトライ: 要素が表示されるまで待機
    cy.contains('Hos geldin, Ayse').should('be.visible');
    cy.url().should('include', '/dashboard');
  });

  it('cross-origin odeme sayfasina yonlenir (cy.origin gerekli)', () => {
    cy.visit('/checkout');
    cy.get('[data-cy=pay-button]').click();

    // 異なるoriginに移動する際はcy.origin()が必須
    cy.origin('https://pay.example.com', () => {
      cy.get('[data-cy=confirm-payment]').click();
      cy.contains('Odeme onaylandi').should('be.visible');
    });
  });
});

// cypress.config.js — 基本的なE2E設定
module.exports = {
  e2e: {
    baseUrl: 'http://localhost:3000',
    experimentalRunAllSpecs: true,
    setupNodeEvents(on, config) {
      return config;
    },
  },
};