Sekilas pengetikan E2E (Playwright/Cypress)
Lihat bagaimana tipe TypeScript mengalir dalam pengujian E2E dengan Playwright dan Cypress; tambahkan dukungan tipe dan pemilih yang aman.
Sekilas pengetikan E2E (Playwright/Cypress) adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 3 pelajaran total.
Pendahuluan
Tujuan: Lihat sekilas cara TypeScript meningkatkan pengujian E2E. Kita akan menyiapkan pengetikan untuk Playwright dan Cypress, lalu menulis pengujian kecil bertipe.
Instalasi Playwright
Playwright menyertakan pelari pengujian dan tipe-nya sendiri. Impor dari @playwright/test untuk mendapatkan pengujian, expect, dan page bertipe.
npm install --save-dev @playwright/testPengujian Playwright
Dalam Playwright, tipe page dan locator sangat kuat; penggunaan yang keliru akan ditemukan saat kompilasi.
// 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
})Tipe Cypress
Untuk tipe global Cypress, tambahkan types: ["cypress"] ke tsconfig atau tulis referensi ke berkas dukungan.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"types": ["cypress"]
}
}
// or in cypress/support/e2e.d.ts
/// <reference types="cypress" />Pengujian Cypress
Rantai perintah cy, rantai pemeriksaan, dan perintah plugin diberi tipe dengan TS; rekomendasi IDE menjadi jelas.
// cypress/e2e/home.cy.ts
describe("home", () => {
it("loads", () => {
cy.visit("/")
cy.findByRole("heading", { name: /welcome/i }).should("be.visible")
})
})Pembantu pemilih
Fungsi pembantu berbasis data-testid lebih stabil daripada pemilih CSS/XPath yang rapuh dan menyediakan pelengkapan otomatis yang mudah dengan TS.
// 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")Pemeriksaan tipe Cypress
Pemeriksaan singkat: Bagaimana cara mengaktifkan tipe global Cypress (cy, Cypress) dalam TS?
Ringkasan
Ringkasan: Playwright dan Cypress menyediakan tipe yang kuat bersama TS. Penyiapan yang benar dan pemilih yang aman membuat pengujian E2E lebih andal.
Belajar TypeScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 101
- Pelajaran
- 352
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Sekilas pengetikan E2E (Playwright/Cypress)” gratis?
Ya — teks lengkap “Sekilas pengetikan E2E (Playwright/Cypress)” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Sekilas pengetikan E2E (Playwright/Cypress)”?
Lihat bagaimana tipe TypeScript mengalir dalam pengujian E2E dengan Playwright dan Cypress; tambahkan dukungan tipe dan pemilih yang aman. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai TypeScript Academy?
Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.
Berapa lama pelajaran “Sekilas pengetikan E2E (Playwright/Cypress)” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Penyiapan Vitest/Jest untuk TS
- Mengetik pengujian & mock; expectTypeOf
- Sekilas pengetikan E2E (Playwright/Cypress)