Обзор типизации E2E-тестов (Playwright/Cypress)
Узнайте, как типы TypeScript проходят через E2E-тесты в Playwright и Cypress; добавьте корректную поддержку типов и безопасные селекторы.
«Обзор типизации E2E-тестов (Playwright/Cypress)» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.
Введение
Цель: увидеть, как TypeScript улучшает сквозные тесты. Мы настроим типизацию для Playwright и Cypress и напишем небольшие типизированные тесты.
Установка Playwright
Playwright поставляется со своим средством запуска тестов и типами. Импортируйте их из @playwright/test, чтобы получить типизированные тест, expect и page.
npm install --save-dev @playwright/testТест Playwright
В Playwright типы страницы и локатора строгие: неправильное использование обнаруживается при компиляции.
// 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
Для глобальных типов Cypress добавьте types: ["cypress"] в tsconfig или создайте ссылку на файл поддержки.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"types": ["cypress"]
}
}
// or in cypress/support/e2e.d.ts
/// <reference types="cypress" />Тест Cypress
Цепочки команд cy, цепочки проверок и команды плагинов типизированы с помощью TS; рекомендации IDE становятся понятными.
// cypress/e2e/home.cy.ts
describe("home", () => {
it("loads", () => {
cy.visit("/")
cy.findByRole("heading", { name: /welcome/i }).should("be.visible")
})
})Вспомогательная функция для селекторов
Вспомогательные функции на основе data-testid стабильнее хрупких селекторов CSS/XPath и обеспечивают удобное автодополнение с 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")Проверка типов Cypress
Быстрая проверка: как включить глобальные типы Cypress (cy, Cypress) в TS?
Повторение
Повторение: Playwright и Cypress предоставляют строгую типизацию с TS. Правильная настройка и надёжные селекторы делают сквозные тесты более стабильными.
Часто задаваемые вопросы
Урок «Обзор типизации E2E-тестов (Playwright/Cypress)» бесплатный?
Да — полный текст урока «Обзор типизации E2E-тестов (Playwright/Cypress)» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Обзор типизации E2E-тестов (Playwright/Cypress)»?
Узнайте, как типы TypeScript проходят через E2E-тесты в Playwright и Cypress; добавьте корректную поддержку типов и безопасные селекторы. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Обзор типизации E2E-тестов (Playwright/Cypress)»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка Vitest/Jest для TS
- Типизация тестов и имитаций; expectTypeOf
- Обзор типизации E2E-тестов (Playwright/Cypress)