Hızlı Başlangıç: Playwright Çalışma Alanları raporlaması ile gelişmiş tanılama gerçekleştirme

Bu hızlı başlangıçta, Playwright Çalışma Alanları'ndaki raporlama özelliğini kullanarak Playwright testlerinizin hatalarını ayıklamayı öğreneceksiniz. Playwright Workspaces muhabirini kullanarak test raporlarınızı Azure depolama alanına kaydedip Azure portalında görüntüleyerek Playwright testlerinizde gelişmiş tanılamalar gerçekleştirin.

Önkoşullar

• Aktif bir aboneliğe sahip bir Azure hesabı. Eğer bir Azure aboneliğiniz yoksa, başlamadan önce ücretsiz bir hesap oluşturun.
• Azure hesabınızın Sahip, Katkıda Bulunan veya klasik yönetici rollerinden birine ihtiyacı vardır.
• Playwright çalıştırıcısı ve JavaScript SDK'sı kullanan bir Playwright projesi (NUnit ve diğer runners şu anda desteklenmemektedir). Projeniz yoksa Playwright kullanmaya başlama belgelerini kullanarak bir proje oluşturun veya Playwright Çalışma Alanları örnek projesini kullanın.
• Playwright projesi, Playwright paketi (@plawright/test) sürüm 1.57 veya üzerini kullanmalıdır.
• Azure CLI. Azure CLI'nız yoksa bkz . Azure CLI'yı yükleme.
• Playwright Çalışma Alanı, Microsoft Entra Id kimlik doğrulamasını kullanmalıdır. Erişim belirteci kullanılarak kimlik doğrulaması raporlama için desteklenmez.

Raporlamayı etkinleştirme ve depolama hesabını çalışma alanına bağlama

Playwright Çalışma Alanları raporlamasını kullanmaya başlamak için ilk adım, çalışma alanınızda raporlamayı etkinleştirmek ve raporlama yapıtlarınızı depolamak için bir depolama hesabı bağlamaktır. Yeni bir çalışma alanı kullanmaya başlayabilir veya mevcut çalışma alanınızı kullanabilirsiniz.

Yeni çalışma alanı

1. Azure aboneliğinizin kimlik bilgilerini kullanarak Azure portalında oturum açın.

2. Portal Giriş sayfasında Azure Uygulama Testi'ni arayın ve seçin.

   

3. Azure Uygulama Testi merkezinde Playwright Çalışma Alanları'nın altında Oluştur'u seçin

   

4. Playwright çalışma alanı kaynağı oluştur sayfasında aşağıdaki bilgileri girin:

   Veri Alanı	Description
   Subscription	Bu Oyun Yazarı çalışma alanı için kullanmak istediğiniz Azure aboneliğini seçin.
   Kaynak Grubu	Mevcut bir kaynak grubunu seçin. Alternatif olarak Yeni oluştur'u seçin ve yeni kaynak grubu için benzersiz bir ad girin.
   İsim	Çalışma alanınız için benzersiz bir ad girin. Ad yalnızca alfasayısal karakterler ve kısa çizgilerden oluşabilir ve uzunluğu 3 ile 24 karakter arasında olabilir.
   Location	Çalışma alanınız için coğrafi bir konum seçin. Bu konum aynı zamanda test yürütme sonuçlarının nerede depolandığını da belirler.
   Raporlama	Kullanıcıların Playwright Çalışma Alanı'ndan test çalıştırması raporlarını kaydedip görüntüleyebilmesi için geçiş düğmesi varsayılan olarak Etkin durumda ayarlanır. Raporlamayı kapatmak istiyorsanız ayarı Devre Dışı olarak değiştirin.
   Depolama hesabı	Kullanıcıların Playwright Çalışma Alanı'ndan test çalıştırması raporlarını kaydedip görüntüleyebilmesi için açma/kapama düğmesi varsayılan olarak "Etkin" konumuna ayarlanır. Raporlamayı kapatmak istiyorsanız ayarı Devre Dışı olarak değiştirin.

   Uyarı

   Playwright Çalışma Alanları raporlaması, test raporlarınızı ve diğer yapıtlarınızı depolamak için Azure Depolama'yı kullanır. Depolama maliyetleri, depolama hesabınızın veri saklama ayarlarına göre belirlenir.

   Uyarı

   İsteğe bağlı olarak, Etiketler sekmesinde daha fazla ayrıntı yapılandırabilirsiniz. Etiketler, birden çok kaynağa ve kaynak grubuna aynı etiketi uygulayarak kaynakları kategorilere ayırmanızı ve birleştirilmiş faturalamayı görüntülemenizi sağlayan ad/değer çiftleridir.

5. Kaynağı yapılandırmayı tamamladıktan sonra Gözden Geçir + Oluştur'u seçin.

6. Sağladığınız ayarları gözden geçirin ve oluştur'u seçin. Çalışma alanının oluşturulması birkaç dakika sürer. Devam etmeden önce portal sayfasının Dağıtımınız tamamlandı ifadesinin görüntülenmesini bekleyin.

   

Mevcut çalışma alanı

1. Azure aboneliğinizin kimlik bilgilerini kullanarak Azure portalında oturum açın.

2. Portal Giriş sayfasında Azure Uygulama Testi'ni arayın ve seçin.

   

3. Azure Uygulama Testi merkezinde Kaynakları görüntüle'yi seçin.

   

4. Playwright çalışma alanınızı arayın ve açın.

5. Sol gezinti bölmesinde Ayarlar -> Depolama yapılandırması'nı seçin.

6. Raporlama anahtarını Açık olarak ayarlayın ve Playwright Çalışma Alanınıza bağlamak için bir depolama hesabı seçin.

   

   Uyarı

   Playwright Çalışma Alanları raporlaması, test raporlarınızı ve diğer yapıtlarınızı depolamak için Azure Depolama'yı kullanır. Depolama maliyetleri, depolama hesabınızın veri saklama ayarlarına göre belirlenir.

7. Kaydetseçeneğini seçin.

Bağlı depolama hesabı için Rol Tabanlı Erişim Denetimi (RBAC) rolleri ekleme

1. Bağlı depolama hesabını Azure portalında açın.

2. Erişim Denetimi (IAM) sekmesine gidin.

   

3. Rol ataması ekle’yi seçin.

   

4. İş işlevi rolleri'nin altında Depolama Blob Verileri Katkıda Bulunanı rolü için arama yapın ve seçin ve İleri'ye tıklayın.

   

5. Testleri çalıştıran tüm üyeleri seçin ve ekleyin.

   

6. Gözden Geçir ve Ata'ya tıklayın.

Playwright Çalışma Alanları paketini yükleme

Playwright Çalışma Alanlarını kullanmak için Playwright Çalışma Alanları paketini yükleyin.

npm init @azure/playwright@latest

Bu komut, Playwright'ı Playwright Çalışma Alanlarına yönlendiren ve kimliğini doğrulayan bir playwright.service.config.ts dosya oluşturur.

Bu dosyaya zaten sahipseniz, paket üzerine yazmanızı ister.

HTML ve Playwright Çalışma Alanları için raporlayıcıyı etkinleştirme

Playwright Çalışma Alanları raporlama özelliğini kullanmak için, playwright.service.config.ts dosyasına aşağıdaki ayarı ekleyerek html ve Playwright Workspaces muhabirini etkinleştirin –

reporter: [
    ["html", { open: "never" }], // HTML reporter must come first
    ["@azure/playwright/reporter"], // Azure reporter uploads HTML report
]

Playwright kurulumunuzda artefaktları etkinleştirin

Projenizin playwright.config.ts dosyasında, gerekli tüm çıktıları topladığınızdan emin olun.

use: 
{
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'on'
}

Tarayıcı uç noktasını yapılandırma

Kurulumunuzda bölgeye özgü tarayıcı uç noktasını sağlamanız gerekir. Uç nokta, çalışma alanını oluştururken seçtiğiniz Azure bölgesine bağlıdır.

Tarayıcı uç noktası URL'sini almak için aşağıdaki adımları uygulayın:

1. Azure hesabınızla Azure portalında oturum açın ve çalışma alanınıza gidin.

2. Başlarken sayfasını seçin.

   

3. Tarayıcı uç noktasını kurulumunuza ekleme bölümünde uç nokta URL'sini kopyalayın.

   Bu URL'nin ortam değişkeninde PLAYWRIGHT_SERVICE_URL kullanılabilir olduğundan emin olun.

   

Ortamınızı ayarlama

Ortamınızı ayarlamak için ortam değişkenini PLAYWRIGHT_SERVICE_URL önceki adımlarda elde ettiğiniz değerle yapılandırmanız gerekir.

Ortamınızı yönetmek için modülünü dotenv kullanın. kullanarak dotenv, dosyada .env ortam değişkenlerinizi tanımlayabilirsiniz.

1. dotenv Modülü projenize ekleyin:

   npm i --save-dev dotenv
   

2. içine aşağıdaki kod parçacığını playwright.service.config.tsekleyin:

   require('dotenv').config();
   

3. Playwright projenizde dosyanın yanında .env bir playwright.config.ts dosya oluşturun:

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Metin yer tutucusunun {MY-REGION-ENDPOINT} yerine daha önce kopyaladığınız değeri eklediğinizden emin olun.

Kimlik doğrulaması kurulumu

Playwright testlerinizi Playwright çalışma alanınızda çalıştırmak için, testleri hizmetle çalıştırdığınız Playwright istemcisinin kimliğini doğrulamanız gerekir. Yerel geliştirme makinenizden veya CI makinenizden kimlik doğrulaması.

Uyarı

Playwright Workspaces reporter yalnızca Microsoft Entra ID tabanlı kimlik doğrulamayı destekler. Kimlik doğrulaması için erişim belirteçleri kullanıyorsanız raporlamayı kullanamazsınız.

Microsoft Entra Id kullanarak kimlik doğrulamayı ayarlama

Microsoft Entra Id, Playwright Çalışma Alanı'nda raporlama özelliğini kullanmak için desteklenen tek kimlik doğrulamasıdır. Yerel geliştirme makinenizden Oturum açmak için Azure CLI'yı kullanabilirsiniz

az login

Uyarı

Birden çok Microsoft Entra kiracısının bir parçasıysanız, çalışma alanınızın ait olduğu kiracıda oturum açtığınızdan emin olun. Kiracı kimliğini Azure portalından alabilirsiniz. Bkz . Microsoft Entra Kiracınızı bulma. Kimliği aldıktan sonra komutunu kullanarak oturum açın az login --tenant <TenantID>

Playwright Çalışma Alanları ile testlerinizi çalıştırma

Playwright çalışma alanları ile Playwright testlerinizi bulutta çalıştırma yapılandırmasını tamamladınız. Testlerinizi çalıştırmak için Playwright CLI kullanabilir veya Playwright Test Visual Studio Code uzantısını kullanabilirsiniz.

Playwright CLI

1. Bir terminal penceresi açın.

2. Playwright test paketinizi çalışma alanınızdaki uzak tarayıcılarda çalıştırmak için aşağıdaki komutu girin:

   npx playwright test --config=playwright.service.config.ts --workers=20
   

   Test paketinizin boyutuna bağlı olarak, bu komut testlerinizi en fazla 20 paralel çalışan üzerinde çalıştırır.

Visual Studio Code

Playwright çalışma alanlarıyla Visual Studio Code'da Playwright test paketinizi çalıştırmak için:

1. Etkinlik çubuğunda Test Gezgini görünümünü açın.

2. Tüm testleri Playwright Çalışma Alanları ile çalıştırmak için Testleri çalıştır düğmesini seçin.

   Tüm testleri çalıştırdığınızda varsayılan profil kullanılır. Önceki adımda, varsayılan profili hizmet yapılandırmasındaki projeleri kullanacak şekilde yapılandırmıştınız.

   

   Tavsiye

   Testlerinizi uzak tarayıcılarda çalıştırdığınızda test kodunuzun hatalarını ayıklamak için Testlerde hata ayıklama düğmesini kullanın .

3. Alternatif olarak, yalnızca belirli bir tarayıcı yapılandırmasına yönelik testleri çalıştırmak için listeden belirli bir hizmet yapılandırmasını seçebilirsiniz.

   

4. Tüm test sonuçlarını Test sonuçları sekmesinde görüntüleyin.

Azure portalında test çalıştırmalarında ve sonuçlarında hata ayıklama

Bağlı depolama hesabı için Rol Tabanlı Erişim Denetimi (RBAC) rolleri ekleme

1. Bağlı depolama hesabını Azure portalında açın.

2. Erişim Denetimi (IAM) sekmesine gidin.

   

3. Rol ataması ekle’yi seçin.

   

4. Ayrıcalıklı yönetici rolleri'nin altında Katkıda Bulunan* rolü için arama yapın ve seçin ve İleri'ye tıklayın.

   

5. Test raporlarını görüntüleyebilen tüm üyeleri seçin ve ekleyin.

   

6. Gözden Geçir ve Ata'ya tıklayın.

(Yalnızca izleme etkinse) Bağlantılı depolama hesabında genel izleme görüntüleyici listesine izin ver

1. Bağlı depolama hesabını Azure portalında açın.

2. Ayarlar -> Kaynak paylaşımı (CORS) seçeneğine gidin.

   

3. Blob hizmeti'nin altında yeni bir kayıt ekleyin:

   • İzin verilen kaynaklar: https://trace.playwright.dev
   • İzin verilen yöntemler: GET, OPTIONS
   • En fazla yaş: 0 ile 2147483647 arasında bir değer girin.

   

4. Kaydetseçeneğini seçin.

Kaydedilmiş test raporlarını Azure portalında görüntüleme

Artık Azure portalında başarısız olan test çalışmalarının sorunlarını giderebilirsiniz.

1. Test çalıştırmanız tamamlandıktan sonra, muhabir Azure portalındakiTest çalıştırmaları sayfasına bir bağlantı oluşturur. Ayrıntılı test sonuçlarını ve ilişkili yapıtları görüntülemek için bu bağlantıyı açın.

   

2. Test çalıştırmaları sayfası, sorun giderme için gerekli tüm bilgileri sağlar. Şunları yapabilirsiniz:

   • Ekran görüntüleri veya videolar gibi ayrıntılı hata günlüklerini, test adımlarını ve ekli yapıtları görüntüleyin.
   • Daha ayrıntılı analiz için doğrudan İzleme Görüntüleyicisi'ne gidin.

   

3. İzleme Görüntüleyicisi, test yürütme işleminizde görsel olarak adım adım ilerleyebilirsiniz. Şunları yapabilirsiniz:

   • Tek tek adımların üzerine gelerek her eylemden önceki ve sonraki sayfa durumunu göstermek için zaman çizelgesini kullanın.
   • Her adım için ayrıntılı günlükleri, DOM anlık görüntülerini, ağ etkinliğini, hataları ve konsol çıkışını inceleyin.

   

Tavsiye

Daha iyi bir deneyim için, Ctrl düğmesine basıp İzlemeyi görüntüle'yi seçerek izleme görüntüleyicisini yeni bir tarayıcı sekmesinde açın.