Playwright vs Cypress 对比

// Playwright Test - 登录流程与 API mock（TypeScript）
import { test, expect } from '@playwright/test';

test.describe('Giris akisi', () => {
  test('gecerli kullanici ile giris yapar ve dashboard gorur', async ({ page }) => {
    // 网络 mock - 无需额外配置
    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：等待 locator 变为可见
    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：不带 selector 的 frameLocator 会在所有子 frame 树中查找
    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 mock（JavaScript/TypeScript）
describe('Giris akisi', () => {
  it('gecerli kullanici ile giris yapar ve dashboard gorur', () => {
    // 使用 cy.intercept 进行网络 stub
    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();

    // 切换到不同源时必须使用 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;
    },
  },
};