Skip to main content

Playwright Test Otomasyonu: Docker ile Uçtan Uca Testleri Çalıştırma 🐳

Playwright ve TypeScript kullanarak uçtan uca (end-to-end) testleri nasıl yazacağınızı,
Docker ile test ortamını nasıl izole edeceğinizi ve test otomasyonunu CI/CD sürecine nasıl entegre edeceğinizi öğreneceksiniz.

🧠 Bu Rehberde Ne Öğreneceksiniz?​

  • Playwright test aracını TypeScript ile kullanmak
  • Test ortamını izole ederek farklı sistemlerde tutarlılık sağlamak
  • Docker imajı içinde E2E testleri çalıştırmak
  • HTML ve JSON test raporları üretmek
  • CI/CD süreçlerine testleri entegre etmek

1️⃣ Test Ortamını Hazırlama​

Adım 1.1 — Proje Dizini Oluşturma​

mkdir rabisu-playwright-test
cd rabisu-playwright-test
npm init -y

Bu komutlar proje klasörünü oluşturur ve varsayılan package.json dosyasını oluşturur.

Adım 1.2 — Playwright ve TypeScript Kurulumu​


npm install --save-dev playwright
npm install --save-dev typescript @types/node toml @playwright/test

Bu komutlar; Playwright çekirdeğini, TypeScript derleyicisini, Node tür tanımlarını ve TOML yapılandırma kütüphanesini kurar.

Adım 1.3 — Playwright Tarayıcılarını ve Bağımlılıklarını Kurma​


npx playwright install-deps
npx playwright install

Bu komutlar sistem bağımlılıklarını yükler ve Chromium, Firefox, Webkit tarayıcılarını indirir.

Adım 1.4 — TypeScript Yapılandırması​


nano tsconfig.json

İçerik:


{
  "compilerOptions": {
    "strict": true,
    "module": "commonjs"
  },
  "include": ["tests"]
}

Bu ayarlar TypeScript derleyicisinin sıkı tip kontrolü yapmasını ve yalnızca tests klasöründeki dosyaları derlemesini sağlar.

2️⃣ Testleri Yazma​

Adım 2.1 — Test Klasörü ve Yapılandırma​


mkdir tests
cd tests
nano configTypes.ts

İçerik:


import { Browser, Page } from "playwright";
import fs from "fs";
import toml from "toml";
const config = toml.parse(fs.readFileSync("./config.toml", "utf-8"));

declare global {
  const page: Page;
  const browser: Browser;
  const browserName: string;
}

export default {
  RABISU_TEST_URL: config.rabisu_test_url ?? "",
};

Bu dosya, testlerde kullanılacak genel değişkenleri tanımlar ve URL bilgisini config.toml dosyasından okur.

Adım 2.2 — Test URL’sini Tanımlama​


cd ..
nano config.toml

İçerik:


rabisu_test_url = "https://www.digitalocean.com/products/droplets"

Bu dosya testlerin erişeceği URL’yi belirtir (örneği rabisu.cloud olarak değiştirebilirsiniz).

Adım 2.3 — Kayıt Yöntemleri Testi​

tests/kayitYontemleri.spec.ts:


import endpoint from "./configTypes";
import { test, expect } from "@playwright/test";

test("Kayıt olmak için 3 farklı seçeneğin bulunmasını bekler", async ({ page }) => {
  await page.goto(endpoint.RABISU_TEST_URL);
  await page.waitForLoadState("networkidle");
  const kayit_secenek_sayisi = await page
    .locator(".SignupButtonsStyles__ButtonContainer-sc-yg5bly-0 > a")
    .count();
  expect(kayit_secenek_sayisi).toBe(3);
});

Bu test, e-posta, Google ve GitHub ile kayıt seçeneklerinin bulunduğunu doğrular.

Adım 2.4 — Paket Sayısı Testi​

tests/paketSayisi.spec.ts:


import endpoint from "./configTypes";
import { test, expect } from "@playwright/test";

test("Abonelik için 2 ana paket (Basic ve Premium) bulunmasını bekler", async ({ page }) => {
  await page.goto(endpoint.RABISU_TEST_URL);
  await page.waitForLoadState("networkidle");
  const mevcut_paket_sayisi = await page
    .locator(".CPUInfoStyles__StyledLeftCpuInfo-sc-ooo7a2-4 > div")
    .count();
  expect(mevcut_paket_sayisi).toBe(2);
});

Bu test, sayfadaki temel ve premium paket sayısının 2 olduğunu doğrular.

Adım 2.5 — Fiyat Karşılaştırma Testi​

tests/fiyatKarsilastirma.spec.ts:


import endpoint from "./configTypes";
import { test, expect } from "@playwright/test";

test("Temel sanal sunucu maliyetlerinde 4 farklı CPU seçeneği bulunmasını bekler", async ({ page }) => {
  await page.goto(endpoint.RABISU_TEST_URL);
  await page.waitForLoadState("networkidle");
  const cpu_secenek_sayisi = await page
    .locator(".PricingComparisonToolStyles__StyledCpuSelector-sc-1k0sndv-7 > button")
    .count();
  expect(cpu_secenek_sayisi).toBe(4);
});

Bu test, 1, 2, 4 ve 8 CPU seçeneklerinin sayısını kontrol eder.

3️⃣ Testleri Çalıştırma ve Raporlama​

Adım 3.1 — Tüm Tarayıcılarda Testleri Çalıştırın​


npx playwright test --browser=all

Bu komut, tüm .spec.ts dosyalarını Chromium, Firefox ve Webkit üzerinde çalıştırır.

Adım 3.2 — HTML Raporu Oluşturma​


npx playwright test --browser=all --reporter=html
npx playwright show-report

Bu komutlar test sonuçlarını HTML raporu olarak kaydeder ve http://localhost:9323 adresinde görüntüler.

Uzak sunucuda erişmek için:


ssh -L 9323:localhost:9323 user@sunucu_ip

Bu, yerel tarayıcıdan rapora erişim sağlar.

4️⃣ Docker ile Test Otomasyonu​

Adım 4.1 — package.json Güncellemesi​


{
  "scripts": {
    "test": "playwright test --browser=all",
    "test-html-report": "playwright test --browser=all --reporter=html",
    "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
  }
}

Bu script’ler test komutlarını kısaltır ve Docker içinde çalıştırmayı kolaylaştırır.

Adım 4.2 — Dockerfile Oluşturma​


FROM mcr.microsoft.com/playwright:focal
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH

COPY package.json /app/
COPY tests/ /app/tests/
COPY tsconfig.json /app/
COPY config.toml /app/

RUN npm install

Bu Dockerfile, Node ortamında Playwright testlerini çalıştırmak için gerekli tüm bağımlılıkları içerir.

Adım 4.3 — Docker İmajını Derleme ve Testi Çalıştırma​


docker build -t playwright-rabisu-test .
docker run --rm playwright-rabisu-test:latest npm run test

Docker imajı oluşturulur ve testler izole bir kapsayıcıda çalıştırılır.

Beklenen çıktı:

✓ 9 test geçti (41s)

❓ Sıkça Sorulan Sorular (SSS)​

  1. Uçtan Uca (E2E) Testler neden önemlidir?

Gerçek kullanıcı senaryolarını simüle eder, sistemin uçtan uca çalıştığını doğrular.

  1. Docker kullanmak testlerde hangi sorunu çözer?

Farklı ortamlardaki uyumsuzlukları izole eder. “Bende çalışıyor ama sunucuda çalışmıyor” sorununu ortadan kaldırır.

  1. Playwright ile Selenium arasındaki fark nedir?

Playwright modern tarayıcı mimarilerini destekler, sürücü kurulumu gerekmez, WebKit dahil üç tarayıcıyı destekler.

  1. CI/CD entegrasyonu nasıl yapılır?

Pipeline’a docker run playwright-rabisu-test:latest npm run test komutu eklenir. Her push sonrası testler otomatik çalışır.

  1. Neden TOML kullanıyoruz?

Basit, okunabilir ve yapılandırma için idealdir. JSON’a göre daha net bir söz dizimi sunar.

🏁 Sonuç​

Playwright ile uçtan uca test otomasyonunuzu Docker ile kapsülleyerek farklı sistemlerde aynı sonuçları alabilirsiniz.

Bu yapıyı Rabisu Bulut sanal sunucularınızda uygulayarak yazılım geliştirme süreçlerinizi otomatik ve güvenilir hale getirebilirsiniz. 🚀

💡 Şimdi Rabisu Bulut platformunda deneyin!