ภาพรวมการกำหนดชนิดข้อมูลการทดสอบ E2E (Playwright/Cypress)

บทนำ

ติดตั้ง Playwright

npm install --save-dev @playwright/test

การทดสอบด้วย 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

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

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

การทดสอบด้วย Cypress

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

ตัวช่วยเลือกองค์ประกอบ

// 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

สรุปทบทวน