WebAuthn Sanal Kimlik Doğrulayıcı ile Passkey'ler için Uçtan Uca Playwright Testi

Passkey'ler, temel standardı olarak Web Authentication (WebAuthn) kullanan bir kimlik doğrulama yöntemi olarak giderek daha yaygın bir şekilde kabul görmektedir. Popülerliklerindeki artış oldukça yenidir, bu da belgeleri ve diğer kaynakları nispeten kıt hale getirmektedir. Bu durum, passkey'leri uygulamanın karmaşık doğasıyla birleştiğinde, geliştiricilerin platformları ve hizmetleri için passkey'leri tasarlama, uygulama ve özellikle test etme konusunda ilgili bilgileri bulmasını zorlaştırabilir.

Bu kılavuz, resmi belgelerinde ayrıntılı olarak ele alınmayan WebAuthn sanal kimlik doğrulayıcının yönlerine odaklanarak bu boşluğu doldurmayı amaçlamaktadır. Örneğin, belgelerde kendiliğinden anlaşılır olmayan sanal kimlik doğrulayıcı için yapılandırma seçeneklerini ve sanal kimlik doğrulayıcının uygun bir çözüm sunmadığı belirli kullanım durumları için geçici çözümleri tartışıyoruz. Aksi takdirde, bu kılavuz aynı zamanda test kodunda sanal kimlik doğrulayıcıyı kullanmak için takip etmesi kolay örnekler arayan geliştiriciler için de faydalıdır.

Kılavuzumuz, projenizde passkey uygulamasını etkili bir şekilde test etmek için basit bir yol sunmak amacıyla Playwright'ten örnekler kullanmaktadır. Playwright, tarayıcı otomasyonu için protokol olarak Chrome DevTools Protocol (CDP) kullanan bir uçtan uca (E2E) test çerçevesidir. Özellikle Playwright'te passkey'leri test etmenin teknik örneklerini arıyorsanız, Bölüm 5'e atlayabilirsiniz. Öte yandan, Puppeteer veya Selenium gibi diğer E2E test çerçevelerini kullanıyorsanız ve bu çerçevelerde passkey'leri test etmek istiyorsanız, test kodu uygulamaları, kullandığınız çerçeveye bağlı olarak bu kılavuzda verilen örneklere benzer veya çok benzer olacaktır. Bir sonraki bölümde, farklı E2E çerçeveleri hakkında bir arka plan ve bu kılavuzun bu çerçeveler için ne kadar alakalı olacağını sunuyoruz.

Tarayıcı otomasyonu, adından da anlaşılacağı gibi, web'den veri toplamak veya bizim durumumuzda web uygulamalarını test etmek amacıyla tarayıcıdaki tekrarlayan kullanıcı eylemlerini otomatikleştirme sürecidir. WebDriver ve Chrome DevTools Protocol (CDP), her biri WebAuthn sanal kimlik doğrulayıcısının bir uygulamasını sağladığı için bu kılavuzla ilgili olan iki ana tarayıcı otomasyon protokolüdür.

WebDriver, istemci ile tarayıcı arasındaki iletişimde bir aracı olarak görülebilen uzaktan kontrol edilen bir arayüzdür. Bu protokolün odak noktası, Firefox ve Safari gibi Chromium tabanlı olmayanlar da dahil olmak üzere tüm büyük tarayıcıları destekleyen platform ve dil açısından nötr bir arayüz sağlamaktır. WebDriver arayüzünün istemciyle ve tarayıcıyla bir bağlantıyı yönetmesi gerektiğinden, bu yaklaşım daha geniş bir tarayıcı desteği (yani daha yüksek kararsızlık) karşılığında hız ve kararlılıktan ödün verir. Önemli WebDriver istemcileri arasında Selenium ve Nightwatch bulunur.

jankaritech'ten alınmıştır

Chrome DevTools Protocol (CDP) ise, istemci ile tarayıcı arasında WebDriver arayüzü gibi bir aracıya sahip değildir. Ayrıca, istemci ile tarayıcı arasındaki iletişim, önceki yaklaşımdaki istemci ile WebDriver arayüzü arasındaki daha yavaş HTTP bağlantısının aksine, bir soket bağlantısı üzerinden gerçekleşir. Bu noktalar CDP'yi WebDriver'dan çok daha hızlı ve daha az kararsız hale getirir. Dezavantajı, bu protokolün yalnızca Chrome ve Edge gibi Chromium tabanlı tarayıcılar için desteklenmesidir. Playwright ve Puppeteer, tarayıcılarla iletişim kurmak için CDP kullanan örnek istemcilerdir.

jankaritech'ten alınmıştır

Puppeteer, Playwright'e benzer şekilde, doğrudan CDP üzerine inşa edilmiş bir E2E çerçevesidir. Bu, Puppeteer ve Playwright'in her ikisinin de aynı WebAuthn sanal kimlik doğrulayıcı uygulamasını kullandığı ve soket bağlantısı üzerinden WebAuthn sanal kimlik doğrulayıcıyı kullanarak API iletişiminin de aynı olduğu anlamına gelir.

Bunu göstermek için, şimdiye kadar sanal kimlik doğrulayıcıya kayıtlı tüm kimlik bilgilerinin bir listesini döndüren getCredentials yöntemini çağırmak için hem Playwright hem de Puppeteer'daki test kodunu karşılaştırıyoruz. Ayrıca, bir passkey kimlik bilgisi başarıyla kaydedildiğinde tetiklenen credentialAdded olayı için basit bir olay dinleyicisi ekliyoruz. Uygulamanın ayrıntılarından korkmayın, çünkü bunlar sonraki bölümlerde açıklanacaktır. Bu örnekler sadece iki çerçeve arasındaki uygulamaların ne kadar benzer olduğunu göstermek içindir.

Ben Gould

Head of Engineering

I’ve built hundreds of integrations in my time, including quite a few with identity providers and I’ve never been so impressed with a developer experience as I have been with Corbado.

10.000'den fazla geliştirici Corbado'ya güveniyor ve passkey'ler ile interneti daha güvenli hale getiriyor. Sorularınız mı var? Passkey'ler üzerine 150'den fazla blog yazısı yazdık.

Passkeys Topluluğuna Katılın

Playwright:

const client = await page.context().newCDPSession(page);
await client.send('WebAuthn.enable');
const authenticatorId = const result = await client.send('WebAuthn.addVirtualAuthenticator', { options });
 
...
 
// sanal kimlik doğrulayıcıda kayıtlı tüm kimlik bilgilerini al
const result = await client.send('WebAuthn.getCredentials', { authenticatorId });
console.log(result.credentials);
 
// bir passkey kimlik bilgisi başarıyla kaydedildiğinde konsola bir günlük çıktısı vermek için credentialAdded olayına bir dinleyici ekle
client.on('WebAuthn.credentialAdded', () => {
  console.log('Kimlik Bilgisi Eklendi!');
});

Puppeteer:

const client = await page.target().createCDPSession();
await client.send('WebAuthn.enable');
const authenticatorId = const result = await client.send('WebAuthn.addVirtualAuthenticator', { options });
 
...
 
// sanal kimlik doğrulayıcıda kayıtlı tüm kimlik bilgilerini al
const result = await client.send('WebAuthn.getCredentials', { authenticatorId });
console.log(result.credentials);
 
// bir passkey kimlik bilgisi başarıyla kaydedildiğinde konsola bir günlük çıktısı vermek için credentialAdded olayına bir dinleyici ekle
client.on('WebAuthn.credentialAdded', () => {
  console.log('Kimlik Bilgisi Eklendi!');
});

Test kodlarının başındaki CDP oturumunu başlatma yöntemleri biraz farklı olsa da, CDP WebAuthn sanal kimlik doğrulayıcı API'sindeki yöntemleri çağırmak ve olayları işlemek aynıdır. Bu, Puppeteer'da WebAuthn sanal kimlik doğrulayıcıyı kullanmak istiyorsanız, bu kılavuzu satır satır takip edebileceğiniz anlamına gelir.

Become part of our Passkeys Community for updates & support.

Join

Selenium ve Nightwatch, tarayıcı otomasyonu için WebDriver'a dayanan E2E test çerçeveleridir. WebDriver için WebAuthn sanal kimlik doğrulayıcı uygulaması CDP için olan uygulamasından ayrı olsa da, API özellikleri benzerdir. CDP Webauthn sanal kimlik doğrulayıcı API'sindeki hemen hemen her yöntem için, WebDriver WebAuthn sanal kimlik doğrulayıcı API'sinde karşılık gelen bir yöntem bulabilirsiniz. Ancak, dikkat edilmesi gereken bir şey, CDP WebAuthn sanal kimlik doğrulayıcı API'sinde bir passkey başarıyla eklendiğinde veya onaylandığında olay dinleyicileri eklemek mümkünken, bunun WebDriver karşılığında mümkün olmamasıdır.

Selenium:

const driver = await new Builder().forBrowser('chrome').build();
const options = new VirtualAuthenticatorOptions();
await driver.addVirtualAuthenticator(options);
 
...
 
// sanal kimlik doğrulayıcıda kayıtlı tüm kimlik bilgilerini al
const credentials = await driver.getCredentials();

Sanal kimlik doğrulayıcı örneğini kurma ve API çağrıları yapma sözdiziminin ilgili CDP uygulamasından farklı olduğu açıktır. Ancak, iki WebAuthn sanal kimlik doğrulayıcısının API özellikleri çok benzer olduğundan, WebDriver tabanlı bir E2E test çerçevesinde karşılık gelen bir uygulama yazmak için bu kılavuzu takip etmek uygun olacaktır.

Cypress, yukarıda bahsedilen çerçeveler gibi öncelikli olarak WebDriver veya CDP üzerine inşa edilmemiş bir E2E test çerçevesidir. Tarayıcı ile iletişim kurmak için yerel JavaScript kullanır. Ancak, CDP'ye düşük seviyeli erişim sağlar, bu da CDP'nin WebAuthn sanal kimlik doğrulayıcısını kullanmak için ham CDP komutları göndermenin mümkün olduğu anlamına gelir.

Subscribe to our Passkeys Substack for the latest news.

Subscribe

Bu düşük seviyeli erişim için sözdizimi sıkıcı ve yukarıdaki örneklerden çok farklı olduğu için, bu kılavuzda ayrıntılara girmeyeceğiz. Ancak, Cypress'te CDP komutlarının nasıl çağrılacağı hakkında daha fazla bilgi bu kılavuzda açıklanmaktadır. Bu kılavuzda sunulan CDP WebAuthn sanal kimlik doğrulayıcısını kullanmaya yönelik genel konseptler, Cypress'te passkey'leri test etmek isteyenler için hala geçerlidir.

Bir web ortamında diğer, daha basit kullanıcı eylemlerine göre passkey uygulamasını test etmenin doğal olarak daha zor olmasının birçok nedeni vardır. Parmak izi tarama veya yüz tanıma gibi biyometrik kimlik doğrulama ile ilgili dinamik kullanıcı etkileşimlerini ele alma ihtiyacı, test yazarken ayrıntılı olarak ele alınması pratik olmayabilecek bir karmaşıklık katmanı ekler. Kimlik doğrulama bağlamında güvenlik doğal olarak önemli bir endişe olduğundan, passkey kimlik doğrulamasının çeşitli tarayıcılar ve cihazlar arasında güvenlik açıkları için yer bırakmadan sorunsuz bir şekilde entegre edilmesini sağlamak da gereklidir.

Passkey işlemlerinde yer alan dinamik kullanıcı etkileşimlerini ele almanın karmaşıklığını basitleştirmek ve farklı tarayıcılar ve cihazlarla entegrasyonunu test etmek, WebAuthn sanal kimlik doğrulayıcı kullanılarak kolaylaştırılmıştır.

WebAuthn sanal kimlik doğrulayıcı, WebAuthn standardında belirtilen kimlik doğrulayıcı modelinin bir yazılım temsilidir. Donanım güvenlik anahtarı (ör. YubiKey) veya biyometrik tarayıcı (ör. Face ID, Touch ID veya Windows Hello'da kullanılan) gibi fiziksel bir kimlik doğrulayıcı cihazının davranışını taklit eder, ancak tamamen yazılım içinde çalışır (yani fiziksel kimlik doğrulama veya biyometrik tarama söz konusu değildir).

WebAuthn sanal kimlik doğrulayıcının iki ana faydası vardır.

WebDriver ve CDP tarayıcı otomasyon araçları olduğundan, bu protokollerdeki WebAuthn sanal kimlik doğrulayıcı uygulamasının birincil kullanım durumunun otomatik test olduğu açıktır. Bu protokollerden yararlanan sanal kimlik doğrulayıcı, E2E test çerçeveleri (ör. Playwright, Cypress, Nightwatch) gibi kontrollü ortamlarda passkey işlevlerinin basit ama kapsamlı bir şekilde test edilmesini sağlar.

CDP'nin WebAuthn sanal kimlik doğrulayıcısına Chrome tarayıcısının Geliştirici Araçları üzerinden de erişilebilir ve manuel test veya sadece gösterim amaçlı kullanılabilir. Bu özellik sayesinde, passkey'leri yerel olarak desteklemeyen bir cihazda passkey girişini simüle edebilirsiniz. Buna karşılık, passkey'leri destekleyen bir cihazda passkey desteklenmeyen bir ortamı simüle etmek de mümkündür.

Yukarıdaki ekran görüntüsü, Chrome'da sanal kimlik doğrulayıcının manuel test veya gösterim amaçlı kullanımına bir örnek göstermektedir. Sanal kimlik doğrulayıcı için farklı yapılandırma seçeneklerinin mümkün olduğunu ve kimlik bilgilerinin eklenip silinmesinin de izlenebildiğini görebilirsiniz. Tarayıcınızda sanal kimlik doğrulayıcıyı kullanma hakkında daha fazla bilgi için, yapılandırma seçenekleri ve her biri için önerilen değerler de dahil olmak üzere Google'ın bu kılavuzuna bakın.

WebAuthn sanal kimlik doğrulayıcı, passkey uygulamalarını test etmek için zarif bir çözüm olsa da, dikkate değer birkaç dezavantajı vardır.

Tamamen yazılım tabanlı bir çözüm olan WebAuthn sanal kimlik doğrulayıcı, fiziksel kimlik doğrulayıcıların benzersiz donanım özelliklerini ve güvenlik özelliklerini kopyalayamaz. Çeşitli platform kimlik doğrulayıcıları (bir cihaza yerleşik olanlar, örneğin bir akıllı telefondaki biyometrik tarayıcı) ile çeşitli platformlar arası kimlik doğrulayıcıları (harici cihazlar, donanım güvenlik anahtarları gibi) kullanma arasındaki ayrım, WebAuthn sanal kimlik doğrulayıcı kullanılarak simüle edilemez. Çeşitli platform ve platformlar arası kimlik doğrulayıcı türleriyle ilgili karmaşıklıkların kara kutu basitleştirmesi, WebAuthn sanal kimlik doğrulayıcı kullanmanın avantajlarından biri olsa da, farklı kimlik doğrulayıcı türlerinin inceliklerini simüle etmek ve test etmek istiyorsanız, başka çözümler araştırılmalıdır.

WebAuthn'ın nispeten yeni benimsenmesi ve passkey teknolojisinin yeniliği göz önüne alındığında, sanal kimlik doğrulayıcıları çevreleyen ekosistem hala olgunlaşmaktadır. Bu, özellikle sanal kimlik doğrulayıcıları otomatik test çerçeveleriyle entegre etme bağlamında, kapsamlı belgelerin kıtlığına ve çözülmemiş teknik zorluklara yol açmaktadır. Bu kılavuz, otomatik bir test ortamında passkey'leri test etmeye yönelik kapsamlı bilgiler sunarak bu sorunu ele almayı amaçlarken, aynı zamanda bu araçları kullanmada hala mevcut olan rahatsızlıkları ele almaya ve bu sorunlar için geçici çözümler sunmaya odaklanmaktadır.

Playwright ve bağımlılıklarının başarılı bir şekilde kurulumundan sonra, .spec.ts veya .test.ts ile biten bir adla bir dosya oluşturarak ilk testinizi hemen yazmaya başlayabilirsiniz:

import { test, expect } from "@playwright/test";
 
test("ilk testim", async ({ page }) => {
    await page.goto("https://passkeys.eu");
 
    // kullanıcı eylemlerini simüle etmeye başla
});

Playwright'te WebAuthn sanal kimlik doğrulayıcıyı kullanmak için, bir test senaryosunun başında bir CDP oturumu başlatmak ve bir sanal kimlik doğrulayıcı eklemek yeterlidir, aşağıdaki gibi:

test('passkey ile kaydolma', async ({ page }) => {
  // Mevcut sayfa için bir CDP oturumu başlat
  const client = await page.context().newCDPSession(page);
 
  // Bu oturumda WebAuthn ortamını etkinleştir
  await client.send('WebAuthn.enable');
 
  // Belirli seçeneklerle bir sanal kimlik doğrulayıcı ekle
  const result = await client.send('WebAuthn.addVirtualAuthenticator', {
    options: {
      protocol: 'ctap2',
      transport: 'internal',
      hasResidentKey: true,
      hasUserVerification: true,
      isUserVerified: true,
      automaticPresenceSimulation: false,
    },
  });
  const authenticatorId = result.authenticatorId;
 
  // Kullanıcı etkileşimlerini ve iddialarını simüle etmek için sonraki test adımları
...
});

WebAuthn sanal kimlik doğrulayıcıyı yapılandırma seçenekleri:

• protocol: Bu seçenek, sanal kimlik doğrulayıcının konuştuğu protokolü belirtir. Olası değerler "ctap2" ve "u2f"dir.
• transport: Bu seçenek, sanal kimlik doğrulayıcının simüle ettiği kimlik doğrulayıcı türünü belirtir. Olası değerler "usb", "nfc", "ble" ve "internal"dır. "internal" olarak ayarlanırsa bir platform kimlik doğrulayıcısını simüle ederken, diğer değerler platformlar arası kimlik doğrulayıcıları simüle eder.
• hasResidentKey: True olarak ayarlanması, Resident Key'i (yani istemci tarafı keşfedilebilir kimlik bilgisi) destekler.
• hasUserVerification: True olarak ayarlanması, Kullanıcı Doğrulamasını destekler. Başarılı ve başarısız passkey girişinin simülasyonuna izin verdiği için bunu true olarak ayarlamanız önerilir.
• isUserVerified: True olarak ayarlanması başarılı bir kimlik doğrulama senaryosunu taklit ederken, false bir kimlik doğrulama hatasını taklit eder, örneğin bir kullanıcı passkey girişini iptal ettiğinde. Bu ayarın yalnızca hasUserVerification true olarak ayarlandığında etkili olduğunu unutmayın.
• automaticPresenceSimulation: True olarak ayarlandığında, passkey girişi herhangi bir kimlik doğrulama isteminde otomatik ve anında gerçekleşir. Tersine, false olarak ayarlanması, test kodunda passkey kimlik doğrulama simülasyonunun manuel olarak başlatılmasını gerektirir. Manuel simülasyonu (false) seçmek iki nedenden dolayı önerilir:
  • Test kodu okunabilirliğini artırma: Otomatik simülasyon, test kodunda açık tetikleyiciler olmadan kimlik doğrulama girişimleri simüle edildiğinden test akışının anlaşılmasını zorlaştırabilir.
  • İstenmeyen davranışlardan kaçınma: Otomatik simülasyon, testçinin passkey'in istendiğinin farkında olmasa bile passkey girişinin tetikleneceği anlamına gelir. Bu, özellikle testçinin gözden kaçırması daha kolay olacak Koşullu Kullanıcı Arayüzü için bir sorundur.

Bu bölümde, WebAuthn sanal kimlik doğrulayıcı yöntemlerinin ve olaylarının hem yaygın hem de nadir kullanım durumları bağlamında kullanımını inceliyoruz.

Bu, bir test kodunda WebAuthn sanal kimlik doğrulayıcıyı kullanırken en önemli ancak kafa karıştırıcı görev olabilir, çünkü bir passkey girişini tetiklemek için açıkça yerleşik bir yöntem yoktur. Çözüm, WebAuthn sanal kimlik doğrulayıcı yapılandırma seçeneklerinde, yani isUserVerified ve automaticPresenceSimulation'da yatmaktadır. Bu seçeneklerle, bu kullanıcı etkileşimini aşağıda açıklanan iki farklı yaklaşımla simüle edebiliriz.

Durum 1: Başarılı bir passkey girişini simüle etme

test('passkey ile kaydolma', async ({ page }) => {
...
 
  await expect(page.getByRole('heading', { level: 1 })).toHaveText('Lütfen giriş yapın');
  await page.getByRole('button', { name: 'Giriş Yap' }).click();
  // başarılı passkey girişi otomatik olarak simüle edilir (isUserVerified=true)
  await expect(page.getByRole('heading', { level: 1 })).toHaveText('Hoş geldiniz!');
 
...
});

Başarılı bir passkey girişini simüle etmek genellikle test kodunda ek satırlar gerektirmez. Son satır (await expect...) sayfanın değişmesini bekler (örtük başarılı passkey girişi tarafından tetiklenir).

Durum 2: İptal edilmiş bir passkey girişini simüle etme (kullanıcı arayüzünde değişiklik tetiklemeyen)

Başarısız veya iptal edilmiş bir passkey girişini test etmek daha karmaşıktır çünkü kullanıcı arayüzünde gözle görülür herhangi bir değişikliğe yol açmayabilir. Başka bir deyişle, önceki örnekteki gibi sayfanın değişmesini beklemek, passkey girişinin işlenmesinin tamamlandığından emin olmak için yeterli değildir. Örtük passkey girişinden sonra sayfanın değişmediğini kontrol etmek anlamsızdır, çünkü kontrol neredeyse kesinlikle passkey girişi işlenmeden önce gerçekleşecektir. Sanal kimlik doğrulayıcı, olay emisyonunu dinleyerek başarılı bir passkey girişinin işlenmesini beklemenin bir yolunu sağlarken (yaklaşım 2'de tartışılacağı gibi), şu anda başarısız veya iptal edilmiş bir passkey girişini tespit etmenin yerleşik bir yolu yoktur. Bir geçici çözüm, kullanıcı arayüzünün gerçekten aynı kaldığını kontrol etmeden önce passkey işleminin tamamlanmasını beklemek için basitçe sabit bir zaman aşımı eklemek olacaktır.

test('passkey ile kaydolma', async ({ page }) => {
  // Bir passkey istemini tetiklemek için bir dizi kullanıcı eylemini simüle et
...
 
  await expect(page.getByRole('heading', { level: 1 })).toHaveText('Lütfen giriş yapın');
 
  // Testte istendiğinde passkey girişini simüle et
  await inputPasskey(async () => {
    await page.waitForTimeout(300);
    await expect(page.getByRole('heading', { level: 1 })).toHaveText('Lütfen giriş yapın');
  });
 
  // Sonraki test adımları
...
});

Her iki durumda da, test kodunun okunabilirliği passkey işleminin örtüklüğü ile sınırlıdır. Daha önce de belirtildiği gibi, Koşullu Kullanıcı Arayüzü'nün ne zaman istenebileceğini gözden kaçırmak da kolay olacaktır, bu durumda passkey işlemi testçinin bilgisi olmadan otomatik olarak tamamlanacaktır.

automaticPresenceSimulation seçeneğinin değerini değiştirerek bir passkey girişini manuel olarak tetiklemek, önceki yaklaşımda karşılaşılan sorunları, yani test kodu okunabilirliği açısından çözer.

Durum 1: Başarılı bir passkey girişini simüle etme

Aşağıdaki kod parçacıkları başarılı bir passkey girişini simüle eder:

async function simulateSuccessfulPasskeyInput(operationTrigger: () => Promise<void>) {
  // başarılı bir passkey girişi olayını beklemek için olay dinleyicilerini başlat
  const operationCompleted = new Promise<void>(resolve => {
    client.on('WebAuthn.credentialAdded', () => resolve());
    client.on('WebAuthn.credentialAsserted', () => resolve());
  });
 
  // isUserVerified seçeneğini true olarak ayarla
  // (böylece sonraki passkey işlemleri başarılı olur)
  await client.send('WebAuthn.setUserVerified', {
    authenticatorId: authenticatorId,
    isUserVerified: true,
  });
 
  // automaticPresenceSimulation seçeneğini true olarak ayarla
  // (böylece sanal kimlik doğrulayıcı bir sonraki passkey istemine yanıt verir)
  await client.send('WebAuthn.setAutomaticPresenceSimulation', {
    authenticatorId: authenticatorId,
            enabled: true,
  });
 
  // passkey istemini tetikleyen bir kullanıcı eylemi gerçekleştir
  await operationTrigger();
 
  // passkey'in başarıyla kaydedildiği veya doğrulandığı olayını almayı bekle
  await operationCompleted;
 
  // automaticPresenceSimulation seçeneğini tekrar false olarak ayarla
  await client.send('WebAuthn.setAutomaticPresenceSimulation', {
    authenticatorId,
            enabled: false,
  });
}

test('passkey ile kaydolma', async ({ page }) => {
...
 
  // Argüman olarak bir passkey istemini tetikleyen bir promise ile passkey girişini simüle et
  await simulateSuccessfulPasskeyInput(() =>
          page.getByRole('button', { name: 'Passkey ile hesap oluştur' }).click()
  );
 
...
});

Yardımcı fonksiyona ilk baktığınızda oldukça korkutucu olabilir. Bir passkey işlemini simüle etmenin tüm teknik karmaşıklıklarının yardımcı fonksiyona soyutlandığını anlamak yardımcı olur. Bu, test kodu içinde kullanıldığında, yukarıdaki ikinci kod parçacığında görülebileceği gibi kodu basit ve anlaşılır hale getirdiği anlamına gelir.

Bölüm 6.1.1'deki örtük yaklaşımla karşılaştırıldığında, bu açık yaklaşım kodun okunabilirliğini de artırır. Bu, özellikle Koşullu Kullanıcı Arayüzü istendiğinde yardımcı olacaktır, çünkü bu açık yaklaşım, geliştiricinin farkındalığı olmadan passkey işleminin istenmeyen, örtük tamamlanmasını önler.

Şimdi yardımcı fonksiyonun her bir bölümünü anlayalım.

İlk olarak, bir passkey kimlik bilgisi kaydedildiğinde veya doğrulandığında yayılan WebAuthn.credentialAdded olayını veya WebAuthn.credentialAsserted olayını bekleyen operationCompleted promise'ini tanımlıyoruz. Bu promise daha sonra kullanılacaktır.

Ardından, isUserVerified seçeneği true olarak ayarlanır, böylece WebAuthn sanal kimlik doğrulayıcısı tarafından yapılan sonraki passkey işlemi başarılı olur. automaticPresenceSimulation da true olarak ayarlanır, böylece WebAuthn sanal kimlik doğrulayıcısı web sayfasından gelen bir sonraki passkey istemine yanıt verir.

operationTrigger promise'ini beklemek, bir yarış durumunu önlemek için gereklidir. Yarış durumu, web sayfası passkey'i automaticPresenceSimulation true olarak ayarlanmadan önce istediğinde meydana gelir. Bunu önlemek için, passkey istemini tetikleyen kullanıcı eylemi, automaticPresenceSimulation true olarak ayarlandıktan sonra gerçekleştirilmelidir. Yukarıdaki örnekte, kullanıcı passkey istemini tetiklemek için Passkey ile hesap oluştur adlı düğmeye tıklar.

Kullanıcı eylemi tamamlandıktan sonra, başarılı passkey işleminin tamamlanmasını beklemeliyiz. Bu, yardımcı fonksiyonun başında tanımladığımız promise'i bekleyerek yapılır. Başarılı passkey işleminin tamamlanması, WebAuthn.credentialAdded veya WebAuthn.credentialAsserted olayının yayılmasıyla işaretlenir. Yukarıdaki örnekte, kullanıcı bir passkey kaydettiği için WebAuthn.credentialAdded olayı yayılacaktır.

Son olarak, automaticPresenceSimulation seçeneği, test kodunda daha sonra istenmeyen passkey işlemlerinin gerçekleşmesini önlemek için tekrar false olarak ayarlanır.

Durum 2: İptal edilmiş bir passkey girişini simüle etme

İptal edilmiş bir passkey girişi için, önceki durum için uygulamada küçük bir değişiklik yapmalıyız. Başarılı bir passkey girişi durumunda, işlemin tamamlanması üzerine yayılan WebAuthn.credentialAdded ve WebAuthn.credentialAsserted gibi olaylar vardır. Ancak, WebAuthn sanal kimlik doğrulayıcısı, iptal edilmiş veya başarısız bir passkey girişi için herhangi bir olay sağlamaz. Bu nedenle, iptal edilmiş veya başarısız bir passkey işleminin tamamlandığını kontrol etmek için alternatif bir yol kullanmalıyız.

Aşağıdaki kod parçacıkları başarısız bir passkey girişini simüle eder:

async function simulateFailedPasskeyInput(operationTrigger: () => Promise<void>, postOperationCheck: () => Promise<void>) {
  // isUserVerified seçeneğini false olarak ayarla
  // (böylece sonraki passkey işlemleri başarısız olur)
  await client.send('WebAuthn.setUserVerified', {
    authenticatorId: authenticatorId,
    isUserVerified: false,
  });
 
  // automaticPresenceSimulation seçeneğini true olarak ayarla
  // (böylece sanal kimlik doğrulayıcı bir sonraki passkey istemine yanıt verir)
  await client.send('WebAuthn.setAutomaticPresenceSimulation', {
    authenticatorId: authenticatorId,
            enabled: true,
  });
 
  // passkey istemini tetikleyen bir kullanıcı eylemi gerçekleştir
  await operationTrigger();
 
  // passkey işleminin tamamlandığını gösteren beklenen bir UI değişikliğini bekle
  await postOperationCheck();
 
  // automaticPresenceSimulation seçeneğini tekrar false olarak ayarla
  await client.send('WebAuthn.setAutomaticPresenceSimulation', {
    authenticatorId,
            enabled: false,
  });
}

 
test('passkey ile kaydolma', async ({ page }) => {
  // Bir passkey istemini tetiklemek için bir dizi kullanıcı eylemini simüle et
...
 
  await expect(page.getByRole('heading', { level: 1 })).toHaveText('Lütfen giriş yapın');
 
  // Testte istendiğinde passkey girişini simüle et
  await inputPasskey(async () => {
    await page.waitForTimeout(300);
    await expect(page.getByRole('heading', { level: 1 })).toHaveText('Lütfen giriş yapın');
  });
 
  // Sonraki test adımları
...
});

Yardımcı fonksiyonda, olay dinleyicileri, automaticPresenceSimulation'ın tekrar false olarak ayarlanabilmesinden önce beklenen bir UI değişikliğinin gerçekleşmesini bekleyen bir promise parametresi olan postOperationCheck ile değiştirilir.

Test kodunda, tek fark, yardımcı fonksiyonun amaçlanan UI değişikliğini kontrol eden ek bir promise ile çağrılması gerektiğidir. Yukarıdaki örnekte, web uygulamasının başlığında Bir şeyler ters gitti... metni bulunan bir sayfaya başarıyla gittiğini kontrol ediyoruz.

Bölüm 6.1.1'de tartışıldığı gibi, bir passkey girişini iptal etmek, kullanıcı arayüzünde gözle görülür bir değişikliğe yol açmayabilir. O bölümdeki örnekte olduğu gibi, bu gibi durumlarda kullanıcı arayüzünün gerçekten aynı kaldığını kontrol etmeden önce sabit bir bekleme eklemeliyiz:

test('passkey ile kaydolma', async ({ page }) => {
...
 
  await expect(page.getByRole('heading', { level: 1 })).toHaveText('Lütfen giriş yapın');
 
  // Argüman olarak bir passkey istemini tetikleyen bir promise ile passkey girişini simüle et
  await simulateFailedPasskeyInput(
          () => page.getByRole('button', { name: 'Passkey ile hesap oluştur' }).click(),
          async () => {
            await page.waitForTimeout(300);
            await expect(page.getByRole('heading', { level: 1 })).toHaveText('Lütfen giriş yapın');
          }
  );
 
...
});

WebAuthn sanal kimlik doğrulayıcı kullanmanın rahatlığı, web uygulaması tarafından passkey oluşturma veya silme durumunda gerçek bir kimlik doğrulayıcı gibi davranma yeteneği ile artırılmıştır. Bir testin, web uygulamasında bir passkey'in oluşturulmasını veya silinmesini simüle etmek için kullanıcı eylemleri gerçekleştirmesi yeterlidir ve WebAuthn sanal kimlik doğrulayıcı, test kodu tarafından ek bir çalışma gerektirmeden kayıtlı kimlik bilgisi bilgilerini otomatik olarak değiştirir.

İşte web uygulamasının kimlik doğrulayıcıya yeni bir passkey'i düzgün bir şekilde kaydettiğini kontrol eden test kodu örneği:

test('passkey ile kaydolma', async ({ page }) => {
...
 
  // Şu anda kayıtlı kimlik bilgisi olmadığını onayla
  const result1 = await client.send('WebAuthn.getCredentials', { authenticatorId });
  expect(result1.credentials).toHaveLength(0);
 
  // Bir passkey kimlik bilgisi oluşturulmasını simüle etmek için kullanıcı eylemleri gerçekleştir (ör. passkey girişi ile kullanıcı kaydı)
...
 
  // Passkey'in başarıyla kaydedildiğini onayla
  const result2 = await client.send('WebAuthn.getCredentials', { authenticatorId });
  expect(result2.credentials).toHaveLength(1);
 
...
});

Bu kod parçacığını Bölüm 6.1'deki kod parçacıklarıyla birleştirerek, demo web sayfamızdaki kayıt akışını test edebiliriz. Aşağıdaki video, Playwright'in UI modundaki testin bir görselleştirmesidir:

WebAuthn sanal kimlik doğrulayıcı ile bir passkey kimlik bilgisini doğrulamak, bir passkey oluşturmaya benzer şekilde çalışır, çünkü sanal kimlik doğrulayıcı belirli bir kimlik bilgisi kullanılarak gerçekleştirilen doğrulama sayısını otomatik olarak takip eder.

test('passkey ile giriş yapma', async ({ page }) => {
...
 
  // Yalnızca bir kimlik bilgisi olduğunu onayla ve signCount'unu kaydet
  const result1 = await client.send('WebAuthn.getCredentials', { authenticatorId });
  expect(result1.credentials).toHaveLength(1);
  const signCount1 = result1.credentials[0].signCount;
 
  // Bir passkey kimlik bilgisinin doğrulanmasını simüle etmek için kullanıcı eylemleri gerçekleştir (ör. passkey girişi ile giriş yapma)
...
 
  // Kimlik bilgisinin yeni signCount'unun önceki signCount'tan büyük olduğunu onayla
  const result2 = await client.send('WebAuthn.getCredentials', { authenticatorId });
  expect(result2.credentials).toHaveLength(1);
  expect(result2.credentials[0].signCount).toBeGreaterThan(signCount1);
 
...
});

Aşağıdaki video, demo web sayfamızdaki giriş akışı için bir testi göstermektedir:

Öte yandan, bir web uygulamasından bir passkey silmek, WebAuthn sanal kimlik doğrulayıcı içindeki herhangi bir bilgiyi değiştirmemelidir. Web uygulaması yalnızca kendi sunucusunda kayıtlı kimlik bilgilerini silebilmelidir. Yalnızca kullanıcının kendisi, WebAuthn sanal kimlik doğrulayıcıdan bir passkey kimlik bilgisini bilinçli ve manuel olarak silebilmelidir.

test('kayıtlı bir passkey kimlik bilgisini silme', async ({ page }) => {
...
 
  // Şu anda bir kayıtlı kimlik bilgisi olduğunu onayla
  const result1 = await client.send('WebAuthn.getCredentials', { authenticatorId });
  expect(result1.credentials).toHaveLength(1);
 
  // Bir passkey kimlik bilgisinin silinmesini simüle etmek için kullanıcı eylemleri gerçekleştir
...
 
  // Bir web sitesinden bir passkey kimlik bilgisini silmek, kimlik bilgisini kimlik doğrulayıcıdan kaldırmamalıdır
  const result2 = await client.send('WebAuthn.getCredentials', { authenticatorId });
  expect(result2.credentials).toHaveLength(1);
 
...
});

Aşağıdaki video, demo web sayfamızda bir passkey kimlik bilgisinin silinmesi için bir testi göstermektedir:

İkinci bir cihazdan (henüz kayıtlı bir passkey'i olmayan) cihazlar arası kimlik doğrulamayı simüle etmenin en sezgisel yolu, CDP komutu aracılığıyla yeni bir WebAuthn sanal kimlik doğrulayıcı örneği eklemektir, şu şekilde:

test('passkey ile kaydolma', async ({ page }) => {
...
 
  // ilk cihaz için bir sanal kimlik doğrulayıcı ekle
  const authenticatorId1 = await client.send('WebAuthn.addVirtualAuthenticator', { options });
 
  // ilk cihazın test eylemlerini gerçekleştir
...
 
  // ikinci cihaz için bir sanal kimlik doğrulayıcı ekle
  const authenticatorId2 = await client.send('WebAuthn.addVirtualAuthenticator', { options });
 
  // ikinci cihazın test eylemlerini gerçekleştir
..
});

Birden fazla sanal kimlik doğrulayıcının kimliklerini yönetmenin karmaşıklığından kaçınmak için, tek bir kimlik doğrulayıcıdan kimlik bilgilerini silerek ve gerektiğinde geri ekleyerek yeni bir cihazı simüle etmek de mümkündür:

 
test('passkey ile kaydolma', async ({ page }) => {
...
 
  const result = await client.send('WebAuthn.getCredentials', { authenticatorId });
  const credential = result.credentials[0]; // yalnızca bir kayıtlı passkey olduğunu varsayarak
  const credentialId = credential.credentialId;
  await client.send('WebAuthn.removeCredential', { authenticatorId, credentialId });
 
  // Kayıtlı bir passkey'i olmayan ikinci cihazın test eylemlerini gerçekleştir
...
 
  // Kayıtlı bir passkey'i olan ilk cihazı simüle etmek gerekirse çağır
  await client.send('WebAuthn.addCredential', { credential });
 
  // İlk cihazın test eylemlerini gerçekleştir
...
});

Bu yaklaşım, özellikle yeni bir cihazın simüle edilmesi gerektiği, ancak eski cihazın artık kullanılmasına gerek olmadığı durumlarda uygulamayı basitleştirebilir. Bu durumda, sanal kimlik doğrulayıcıdan kimlik bilgilerini temizlemeniz ve kimlik bilgilerini tamamen atmanız yeterlidir:

test('passkey ile kaydolma', async ({ page }) => {
...
 
  const result = await client.send('WebAuthn.getCredentials', { authenticatorId });
  const credential = result.credentials[0]; // yalnızca bir kayıtlı passkey olduğunu varsayarak
  const credentialId = credential.credentialId;
  await client.send('WebAuthn.clearCredentials', { authenticatorId });
 
  // Kayıtlı bir passkey'i olmayan ikinci cihazın test eylemlerini gerçekleştir
...
});

WebAuthn sanal kimlik doğrulayıcıya alternatifleri keşfetmek, projeler içinde passkey / WebAuthn kimlik doğrulama süreçlerinin nasıl test edildiği konusunda esneklik sunabilir.

Sahte hizmetler veya uç noktalar geliştirmek, gerçek kimlik doğrulama mekanizmasının inceliklerini soyutlayarak testleri basitleştirerek kimlik doğrulama davranışını etkili bir şekilde simüle edebilir. Bu yaklaşım, harici kimlik doğrulama hizmetleri kullanıldığında özellikle faydalıdır ve kimlik doğrulama özelliklerine girmeden sistem bileşenlerinin entegrasyonuna ve işlevselliğine odaklanmayı sağlar.

Kimlik doğrulama işlevlerinin kapsamlı bir incelemesi için, entegrasyon testi için gerçek kimlik doğrulayıcılar kullanmak, donanım güvenlik anahtarları (ör. YubiKey'ler) veya biyometrik cihazlarla (ör. Face ID, Touch ID veya Windows Hello'da kullanılan) etkileşime dair ayrıntılı bir bakış açısı sağlar. Gerçek dünya cihazlarını otomatik testlere entegre etmenin karmaşık doğası nedeniyle genellikle manuel olarak yapılsa da, özel otomasyon komut dosyaları geliştirmek mümkündür. Bu komut dosyaları, gerçek kimlik doğrulayıcıları uçtan uca test çerçeveleriyle birleştirerek gerçek kullanıcı senaryolarına daha yakın bir yaklaşım sunabilir ve canlı ortamlarda kimlik doğrulama sürecinin güvenilirliğini artırabilir.

Farklı seçenekleri gösterdikten ve Playwright ile passkey'ler / WebAuthn için E2E testi için özel kod parçacıkları sergiledikten sonra, konuya yeni başlayan geliştiriciler için daha genel bazı önerilerde bulunmak istiyoruz.

Passkey'leri veya diğer kimlik doğrulama mekanizmalarını test etmeye başlamadan önce, mevcut E2E test çerçevelerini değerlendirmek ve projenizin gereksinimlerine göre en uygun seçeneği seçmek önemlidir. Playwright ve Puppeteer gibi CDP tabanlı çerçevelerin sunduğu hız ve kararlılık ile Selenium ve Nightwatch gibi WebDriver tabanlı çerçevelerin sağladığı tarayıcılar arası uyumluluk arasındaki dengeyi göz önünde bulundurun. CDP tabanlı çerçeveler daha hızlı ve daha kararlı tarayıcı otomasyonu sunarken, Chromium tabanlı tarayıcılarla sınırlıdırlar. Buna karşılık, WebDriver tabanlı çerçeveler, potansiyel olarak daha yavaş ve daha az kararlı performansla da olsa, Firefox ve Safari gibi Chromium olmayan tarayıcılar için destek de dahil olmak üzere daha geniş tarayıcılar arası uyumluluk sağlar. Bu dengeleri anlamak, bilinçli bir karar vermenize ve projenizin ihtiyaçlarına en uygun çerçeveyi seçmenize yardımcı olacaktır.

WebAuthn sanal kimlik doğrulayıcı, passkey uygulamalarını test etme sürecini basitleştirse de, geliştiricilerin WebAuthn standardı ve passkey'lerin arkasındaki temel kavramları sağlam bir şekilde anlamaları çok önemlidir. Protokol, taşıma, hasResidentKey, hasUserVerification ve isUserVerified gibi WebAuthn sanal kimlik doğrulayıcı için mevcut olan farklı yapılandırmalara aşina olun. Bu yapılandırmaları anlamak, çeşitli kimlik doğrulama senaryolarını doğru bir şekilde simüle etmek için sanal kimlik doğrulayıcıyı ince ayar yapmanızı sağlayacaktır. Ek olarak, farklı tarayıcılar ve cihazlarla entegrasyonu ve potansiyel güvenlik hususları da dahil olmak üzere passkey kimlik doğrulamasının inceliklerine dalın. Bu temel bilgi, web uygulamalarınızda passkey kimlik doğrulaması için kapsamlı ve etkili test stratejileri tasarlamanız için sizi güçlendirecektir.

Bu kılavuz, Playwright ile CDP WebAuthn sanal kimlik doğrulayıcısını kullanmayı derinlemesine inceledi, gelişmiş kavramları vurguladı ve resmi belgelerde ele alınmayan sorunları ele aldı. Ayrıca Playwright ve diğer E2E test çerçeveleri içindeki CDP'ye alternatifleri de araştırdık. Farklı uygulamalara rağmen, standartlaştırılmış WebAuthn sanal kimlik doğrulayıcı özellikleri, bu kılavuzun farklı web otomasyon protokolleri ve uçtan uca test çerçeveleri arasında geçerliliğini sağlar. Passkey'lerle ilgili farklı kavramlar hakkında daha derinlemesine bilgi edinmek için, ihtiyaçlarınıza göre WebAuthn sanal kimlik doğrulayıcıyı ince ayar yapmanıza yardımcı olabilecek ilgili terminolojiler sözlüğümüze bakın.