0Pricing
TypeScript Academy · レッスン

E2Eの型付け入門（Playwright/Cypress）

PlaywrightやCypressのE2EテストでTypeScriptの型がどのように流れるかを確認し、適切な型サポートと安全なセレクターを追加します

「E2Eの型付け入門（Playwright/Cypress）」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

導入

目標：TypeScriptがE2Eテストをどのように強化するかを概観します。PlaywrightとCypressの型付けを設定し、小さな型付きテストを書きます。

Playwrightのインストール

Playwrightには独自のテストランナーと型が含まれています。@playwright/testからインポートすると、型付きのtest、expect、pageを利用できます。

npm install --save-dev @playwright/test

Playwrightのテスト

Playwrightでは、pageとlocatorの型が厳密に定義されているため、誤った使い方をコンパイル時に検出できます。

// 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のグローバル型を使うには、tsconfigにtypes: ["cypress"]を追加するか、サポートファイルへの参照を記述します。

// 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テストの信頼性が高まります。

よくある質問

「E2Eの型付け入門（Playwright/Cypress）」レッスンは無料ですか？

はい。「E2Eの型付け入門（Playwright/Cypress）」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「E2Eの型付け入門（Playwright/Cypress）」で何を学びますか？

PlaywrightやCypressのE2EテストでTypeScriptの型がどのように流れるかを確認し、適切な型サポートと安全なセレクターを追加します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。

「E2Eの型付け入門（Playwright/Cypress）」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Vitest/JestのTS向け設定
  2. テストとモックの型付け、expectTypeOf
  3. E2Eの型付け入門（Playwright/Cypress）
← TypeScript Academyに戻る