0Pricing
TypeScript Academy · Ders

E2E türlerine kısa bakış (Playwright/Cypress)

Playwright ve Cypress ile E2E sınamalarında TypeScript türlerinin nasıl aktarıldığını görün; uygun tür desteği ve güvenli seçiciler ekleyin.

E2E türlerine kısa bakış (Playwright/Cypress), CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 3 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 3 dersten oluşur.

Giriş

Hedef: TypeScript'in uçtan uca sınamaları nasıl geliştirdiğine göz atın. Playwright ve Cypress için tür bilgilerini yapılandıracak ve küçük, tür bilgili sınamalar yazacağız.

Playwright kurulumu

Playwright kendi sınama çalıştırıcısı ve türleriyle birlikte gelir. Tür bilgili sınama, expect ve page kullanmak için @playwright/test içinden içe aktarın.

npm install --save-dev @playwright/test

Playwright sınaması

Playwright'te sayfa ve seçici türleri güçlüdür; hatalı kullanımlar derleme sırasında yakalanır.

// example.spec.ts
import { test, expect } from "@playwright/test";

test("home loads", async ({ page }) => {
  await page.goto("/")
  const title = page.getByRole("heading", { name: /welcome/i })
  await expect(title).toBeVisible()
  // page is fully typed: URL, locators, assertions
})

Cypress türleri

Cypress için genel türleri etkinleştirmek üzere tsconfig'e types: ["cypress"] ekleyin veya destek dosyasına bir başvuru yazın.

// tsconfig.json (excerpt)
{
  "compilerOptions": {
    "types": ["cypress"]
  }
}

// or in cypress/support/e2e.d.ts
/// <reference types="cypress" />

Cypress sınaması

cy komut zincirleri, doğrulama zincirleri ve eklenti komutları TS ile tür bilgisine sahip olur; IDE önerileri anlaşılır hâle gelir.

// cypress/e2e/home.cy.ts
describe("home", () => {
  it("loads", () => {
    cy.visit("/")
    cy.findByRole("heading", { name: /welcome/i }).should("be.visible")
  })
})

Seçici yardımcısı

Data-testid tabanlı yardımcı işlevler, kırılgan CSS/XPath seçicilerinden daha kararlıdır ve TS ile kolay otomatik tamamlama sağlar.

// helpers/selectors.ts
export const h = {
  title: (name: string) => `[data-testid="title-${name}"]`,
}

// usage (Playwright)
// await expect(page.locator(h.title("home"))).toBeVisible()

// usage (Cypress)
// cy.get(h.title("home")).should("be.visible")

Cypress türleri denetimi

Hızlı denetim: Cypress genel türlerini (cy, Cypress) TS'de nasıl etkinleştirirsiniz?

Özet

Özet: Playwright ve Cypress, TS ile güçlü türler sağlar. Doğru kurulum ve güvenli seçiciler, uçtan uca sınamaları daha güvenilir hâle getirir.

Sıkça Sorulan Sorular

“E2E türlerine kısa bakış (Playwright/Cypress)” dersi ücretsiz mi?

Evet — “E2E türlerine kısa bakış (Playwright/Cypress)” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 3 dersten oluşur.

“E2E türlerine kısa bakış (Playwright/Cypress)” dersinde ne öğreneceğim?

Playwright ve Cypress ile E2E sınamalarında TypeScript türlerinin nasıl aktarıldığını görün; uygun tür desteği ve güvenli seçiciler ekleyin. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 3. dersidir.

“E2E türlerine kısa bakış (Playwright/Cypress)” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. TypeScript için Vitest/Jest kurulumu
  2. Sınamaların ve sahte nesnelerin türlerini belirleme; expectTypeOf
  3. E2E türlerine kısa bakış (Playwright/Cypress)
← TypeScript Academy Sayfasına Dön