Setting up Playwright with Next.js

Playwright, Chromium, Firefox ve WebKit'i tek bir API ile otomatikleştirmenizi sağlayan bir test çerçevesidir. Uçtan Uca (E2E) test yazmak için kullanabilirsiniz. Bu kılavuz size Playwright'ı Next.js ile nasıl kuracağınızı ve ilk testlerinizi nasıl yazacağınızı gösterecektir.

Quickstart

Başlamanın en hızlı yolu create-next-app adresini with-playwright örneği ile kullanmaktır . Bu, Playwright yapılandırılmış bir Next.js projesi oluşturacaktır.

Terminal

npx create-next-app@latest --example with-playwright with-playwright-app

Manual setup

Playwright'ı yüklemek için aşağıdaki komutu çalıştırın:

Terminal

npm init playwright
# or
yarn create playwright
# or
pnpm create playwright

Bu, bir playwright.config.ts dosyası eklemek de dahil olmak üzere projeniz için Playwright'ı kurmak ve yapılandırmak için sizi bir dizi komut istemine götürecektir. Adım adım kılavuz için lütfen adresindeki Playwright kurulum kılavuzuna bakın.

Creating your first Playwright E2E test

İki yeni Next.js sayfası oluşturun:

app/page.tsx

import Link from 'next/link'
 
export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}

app/about/page.tsx

import Link from 'next/link'
 
export default function Page() {
  return (
    <div>
      <h1>About</h1>
      <Link href="/">Home</Link>
    </div>
  )
}

Ardından, navigasyonunuzun doğru çalıştığını doğrulamak için bir test ekleyin:

tests/example.spec.ts

import { test, expect } from '@playwright/test'
 
test('should navigate to the about page', async ({ page }) => {
  // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
  await page.goto('http://localhost:3000/')
  // Find an element with the text 'About' and click on it
  await page.click('text=About')
  // The new URL should be "/about" (baseURL is used there)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // The new page should contain an h1 with "About"
  await expect(page.locator('h1')).toContainText('About')
})

Bildiğim iyi oldu:

page.goto("http://localhost:3000/") yerine page.goto("/") kullanabilirsiniz, eğer eklerseniz "baseURL": "http://localhost:3000"playwright.config.ts yapılandırma dosyasına.

Running your Playwright tests

Playwright, uygulamanızda gezinen bir kullanıcıyı üç tarayıcı kullanarak simüle edecektir: Chromium, Firefox ve Webkit, bunun için Next.js sunucunuzun çalışıyor olması gerekir. Uygulamanızın nasıl davranacağına daha yakından benzemek için testlerinizi üretim kodunuza karşı çalıştırmanızı öneririz.

npm run build ve npm run start adreslerini çalıştırın, ardından Playwright testlerini çalıştırmak için npx playwright test adresini başka bir terminal penceresinde çalıştırın.

Bilmekte fayda var: Alternatif olarak webServer Playwright'ın geliştirme sunucusunu başlatmasına ve tamamen kullanılabilir olana kadar beklemesine izin verme özelliği.

Running Playwright on Continuous Integration (CI)

Playwright varsayılan olarak testlerinizi başsız modda çalıştıracaktır . Tüm Playwright bağımlılıklarını yüklemek için npx playwright install-deps adresini çalıştırın.

Bu kaynaklardan Playwright ve Sürekli Entegrasyon hakkında daha fazla bilgi edinebilirsiniz: