Hızlı Başlangıç: Microsoft Playwright Testing Preview ile sürekli uçtan uca test ayarlama

Bu hızlı başlangıçta, web uygulamanızın her kod işlemesiyle farklı tarayıcılarda ve işletim sistemlerinde doğru şekilde çalıştığını doğrulamak için Microsoft Playwright Testing Preview ile sürekli uçtan uca test ayarlarsınız. Playwright testlerinizi GitHub Actions, Azure Pipelines veya diğer CI platformları gibi sürekli tümleştirme (CI) iş akışına eklemeyi öğrenin.

Bu hızlı başlangıcı tamamladıktan sonra, Microsoft Playwright Testing ile Playwright test paketinizi uygun ölçekte çalıştıran bir CI iş akışınız olur.

Önemli

Microsoft Playwright Testing şu anda önizleme aşamasındadır. Beta, önizleme aşamasında olan veya henüz genel kullanıma sunulmamış Azure özellikleri için geçerli olan yasal koşullar için bkz . Microsoft Azure Önizlemeleri için Ek Kullanım Koşulları.

Önkoşullar

• Etkin aboneliği olan bir Azure hesabı. Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

• Microsoft Playwright Testing çalışma alanı. Hızlı başlangıcı tamamlayın: Çalışma alanı oluşturmak için playwright testlerini büyük ölçekte çalıştırın.

GitHub Actions

• Bir GitHub hesabı. GitHub hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• Playwright test belirtimlerinizi ve GitHub Actions iş akışınızı içeren bir GitHub deposu. Depo oluşturmak için bkz . Yeni depo oluşturma.
• GitHub Actions iş akışı. GitHub Actions'ı kullanmaya başlama konusunda yardıma ihtiyacınız varsa bkz . İlk iş akışınızı oluşturma

Azure Pipelines

• Azure DevOps kuruluşu ve projesi. Azure DevOps kuruluşunuz yoksa ücretsiz bir kuruluş oluşturabilirsiniz.
• İşlem hattı tanımı. Azure Pipelines'ı kullanmaya başlama konusunda yardıma ihtiyacınız varsa bkz . İlk işlem hattınızı oluşturma.

Hizmet erişim belirtecini yapılandırma

Microsoft Playwright Testing, kullanıcılara hizmetle Playwright testleri çalıştırma yetkisi vermek için erişim belirteçlerini kullanır. Playwright portalında bir hizmet erişim belirteci oluşturabilir ve ardından hizmet yapılandırma dosyasında erişim belirtecini belirtebilirsiniz.

Erişim belirteci oluşturmak ve bunu CI iş akışı gizli dizisi olarak depolamak için aşağıdaki adımları gerçekleştirin:

1. Azure hesabınızla Playwright portalında oturum açın.

2. Çalışma alanı ayarları simgesini seçin ve ardından Erişim belirteçleri sayfasına gidin.

   

3. CI iş akışınız için yeni bir erişim belirteci oluşturmak için Yeni belirteç oluştur'u seçin.

4. Erişim belirteci ayrıntılarını girin ve belirteç oluştur'a tıklayın.

   

   

5. İş akışı tanımında belirtecin düz metinde belirtilmesinden kaçınmak için erişim belirtecini ci iş akışı gizli dizisinde depolayın:

   GitHub Actions

   1. GitHub deponuza gidin ve Ayarlar>Gizli Dizileri>ve değişkenler Eylemler'i seçin.

   2. Yeni depo gizli dizisi'ni seçin.

   3. Gizli dizi ayrıntılarını girin ve ci/CD gizli dizisini oluşturmak için Gizli dizi ekle'yi seçin.

      Parametre	Value
      Ad	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Value	Daha önce kopyaladığınız çalışma alanı erişim belirtecini yapıştırın.

   4. İş akışı gizli dizisini oluşturmak için Tamam'ı seçin.

   Azure Pipelines

   1. Azure DevOps projenize gidin.

   2. İşlem Hatları sayfasına gidin, uygun işlem hattını seçin ve ardından Düzenle'yi seçin.

   3. Bu işlem hattı için Değişkenleri bulun.

   4. Yeni bir değişken ekleyin.

   5. Değişken ayrıntılarını girin ve ci/CD gizli dizisini oluşturmak için Gizli dizi ekle'yi seçin.

      Parametre	Value
      Ad	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Value	Daha önce kopyaladığınız çalışma alanı erişim belirtecini yapıştırın.
      Bu değeri gizli tut	Bu değeri denetleyin

   6. Tamam'ı ve ardından kaydet'i seçerek iş akışı gizli dizisini oluşturun.

Hizmet bölgesi uç noktası URL'sini alma

Hizmet yapılandırmasında bölgeye özgü hizmet 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.

Hizmet uç noktası URL'sini almak ve ci iş akışı gizli dizisi olarak depolamak için aşağıdaki adımları gerçekleştirin:

1. Azure hesabınızla Playwright portalında oturum açın.

2. Çalışma alanı giriş sayfasında Kurulum kılavuzunu görüntüle'yi seçin.

   İpucu

   Birden çok çalışma alanınız varsa, sayfanın üst kısmındaki çalışma alanı adını seçip Tüm çalışma alanlarını yönet'i seçerek başka bir çalışma alanına geçebilirsiniz.

3. Kurulumunuzda bölge uç noktası ekle bölümünde hizmet uç noktası URL'sini kopyalayın.

   Uç nokta URL'si, çalışma alanını oluştururken seçtiğiniz Azure bölgesiyle eşleşir.

4. Hizmet uç noktası URL'sini bir CI iş akışı gizli dizisinde depolayın:

   Parola adı	Değer
   PLAYWRIGHT_SERVICE_URL	Daha önce kopyaladığınız uç nokta URL'sini yapıştırın.

Hizmet yapılandırma dosyası ekleme

Playwright testlerinizi henüz bulutta barındırılan tarayıcılarda çalıştırmak için yapılandırmadıysanız deponuza bir hizmet yapılandırma dosyası ekleyin. Sonraki adımda, playwright CLI'da bu hizmet yapılandırma dosyasını belirtirsiniz.

1. Dosyayla playwright.service.config.ts playwright.config.ts birlikte yeni bir dosya oluşturun.

   İsteğe bağlı olarak, örnek depodaki dosyayı kullanınplaywright.service.config.ts.

2. Aşağıdaki içeriği ekleyin:

   /*
   * This file enables Playwright client to connect to remote browsers.
   * It should be placed in the same directory as playwright.config.ts.
   */
   
   import { defineConfig } from '@playwright/test';
   import config from './playwright.config';
   import dotenv from 'dotenv';
   
   // Define environment on the dev box in .env file:
   //  .env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
   //    PLAYWRIGHT_SERVICE_URL=XXX
   
   // Define environment in your GitHub workflow spec.
   //  env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
   //    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
   //    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
   
   dotenv.config();
   
   // Name the test run if it's not named yet.
   process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();
   
   // Can be 'linux' or 'windows'.
   const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';
   
   export default defineConfig(config, {
     // Define more generous timeout for the service operation if necessary.
     // timeout: 60000,
     // expect: {
     //   timeout: 10000,
     // },
     workers: 20,
   
     // Enable screenshot testing and configure directory with expectations.
     // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
     ignoreSnapshots: false,
     snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
     
     use: {
       // Specify the service endpoint.
       connectOptions: {
         wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
           // Can be 'linux' or 'windows'.
           os,
           runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
         })}`,
         timeout: 30000,
         headers: {
           'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
         },
         // Allow service to access the localhost.
         exposeNetwork: '<loopback>'
       }
     },
     // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
     projects: config.projects? config.projects : [{}]
   });
   

3. Dosyayı kaydedin ve kaynak kod deponuza işleyin.

İş akışı tanımını güncelleştirme

Playwright testlerinizi Playwright CLI ile çalıştırmak için CI iş akışı tanımını güncelleştirin. Hizmet yapılandırma dosyasını Playwright CLI için giriş parametresi olarak geçirin. Ortam değişkenlerini belirterek ortamınızı yapılandırabilirsiniz.

1. CI iş akışı tanımını açma

2. Microsoft Playwright Testing'te Playwright testlerinizi çalıştırmak için aşağıdaki adımları ekleyin.

   Aşağıdaki adımlarda GitHub Actions veya Azure Pipelines için iş akışı değişiklikleri açıklanmaktadır. Benzer şekilde, Playwright CLI'yi diğer CI platformlarında kullanarak Playwright testlerinizi çalıştırabilirsiniz.

   GitHub Actions

   - name: Install dependencies
     working-directory: path/to/playwright/folder # update accordingly
     run: npm ci
   
   - name: Run Playwright tests
     working-directory: path/to/playwright/folder # update accordingly
     env:
       # Access token and regional endpoint for Microsoft Playwright Testing
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
       PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
     run: npx playwright test -c playwright.service.config.ts --workers=20
   
   - name: Upload Playwright report
     uses: actions/upload-artifact@v3
     if: always()
     with:
       name: playwright-report
       path: path/to/playwright/folder/playwright-report/ # update accordingly
       retention-days: 10
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install dependencies"
     inputs:
       targetType: 'inline'
       script: 'npm ci'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PowerShell@2
     enabled: true
     displayName: "Run Playwright tests"
     env:
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
     inputs:
       targetType: 'inline'
       script: 'npx playwright test -c playwright.service.config.ts --workers=20'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PublishPipelineArtifact@1
     displayName: Upload Playwright report
     inputs:
       targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
       artifact: 'Playwright tests'
       publishLocation: 'pipeline'
   

3. Değişikliklerinizi kaydedin ve işleyin.

   CI iş akışı tetiklendiğinde Playwright testleriniz 20 paralel çalışan arasında bulutta barındırılan tarayıcılarda Microsoft Playwright Testing çalışma alanınızda çalıştırılır.

Dikkat

Microsoft Playwright Testing ile toplam test dakikası sayısına göre ücretlendirilirsiniz. İlk kez kullanıcıysanız veya ücretsiz deneme sürümünü kullanmaya başladıysanız, ücretsiz test dakikalarınızı tüketmemek için tam test paketiniz yerine uygun ölçekte tek bir test çalıştırmaya başlayabilirsiniz.

Testin başarıyla çalıştığını doğruladıktan sonra hizmetle daha fazla test çalıştırarak test yükünü kademeli olarak artırabilirsiniz.

Aşağıdaki komut satırını kullanarak hizmetle tek bir test çalıştırabilirsiniz:

npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts

Test sonuçları raporlamasını etkinleştirme

Microsoft Playwright Testing artık Playwright Portalı'nda test sonuçlarını görüntülemeyi destekliyor. Önizleme erişimi sırasında yalnızca davetle kullanılabilir.

Önemli

Yalnızca davet önizlemesi sırasında Microsoft Playwright Testing hizmetinin raporlama özelliği ücretsizdir. Ancak, bulutta barındırılan tarayıcıların mevcut işlevleri Azure fiyatlandırma planına göre faturalandırımaya devam eder.

Raporlama aracına eriştikten sonra testlerinizi ayarlamak için aşağıdaki adımları kullanın.

1. Çalışma alanı giriş sayfasında Ayarlar'a gidin.

   

2. Ayarlar'dan Genel'i seçin ve raporlamanın Etkin olduğundan emin olun.

   

3. Bu adımları izleyerek bir GitHub Kişisel Erişim Belirteci oluşturun.

   Belirteç için izinler sağlamanız read:packages gerekir. Bu belirteç, bu makalenin geri kalanı için olarak PAT_TOKEN_PACKAGE adlandırılır.

4. İş akışı tanımında belirtecin düz metinde belirtilmesinden kaçınmak için GitHub belirtecini bir CI iş akışı gizli dizisinde depolayın:

   GitHub Actions

   1. GitHub deponuza gidin ve Ayarlar>Gizli Dizileri>ve değişkenler Eylemler'i seçin.

   2. Yeni depo gizli dizisi'ni seçin.

   3. Gizli dizi ayrıntılarını girin ve ci/CD gizli dizisini oluşturmak için Gizli dizi ekle'yi seçin.

      Parametre	Value
      Ad	PAT_TOKEN_PACKAGE
      Value	Daha önce kopyaladığınız GitHub kişisel erişim belirtecini yapıştırın.

   4. İş akışı gizli dizisini oluşturmak için Tamam'ı seçin.

   Azure Pipelines

   1. Azure DevOps projenize gidin.

   2. İşlem Hatları sayfasına gidin, uygun işlem hattını seçin ve ardından Düzenle'yi seçin.

   3. Bu işlem hattı için Değişkenleri bulun.

   4. Yeni bir değişken ekleyin.

   5. Değişken ayrıntılarını girin ve ci/CD gizli dizisini oluşturmak için Gizli dizi ekle'yi seçin.

      Parametre	Value
      Ad	PAT_TOKEN_PACKAGE
      Value	Daha önce kopyaladığınız GitHub kişisel erişim belirtecini yapıştırın.
      Bu değeri gizli tut	Bu değeri denetleyin

   6. Tamam'ı ve ardından kaydet'i seçerek iş akışı gizli dizisini oluşturun.

5. package.json dosyasını paketle güncelleştirin.

       "dependencies": {
           "@microsoft/mpt-reporter": "0.1.0-19072024-private-preview"
       }
   

6. Playwright yapılandırma dosyasını güncelleştirin.

   Playwright Testing muhabirini Playwright.config.ts , diğer muhabirleri kullandığınız şekilde ekleyin.

   import { defineConfig } from '@playwright/test';
   
   export default defineConfig({
       reporter: [
       ['list'],
       ['json', {  outputFile: 'test-results.json' }],
       ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
       ],
   });
   

   Daha iyi sorun giderme için yapıtların yapılandırmada etkinleştirildiğinden emin olun.

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

7. Playwright testlerinizin raporunu Microsoft Playwright Testing'te yayımlamak üzere testleri çalıştırmadan önce raporlama paketini yüklemek için CI iş akışı tanımını güncelleştirin.

   GitHub Actions

   - name: Install reporting package
     working-directory: path/to/playwright/folder # update accordingly
     run: |
       npm config set @microsoft:registry=https://npm.pkg.github.com
       npm set //npm.pkg.github.com/:_authToken ${{secrets.PAT_TOKEN_PACKAGE}} 
       npm install
   
   - name: Run Playwright tests
     working-directory: path/to/playwright/folder # update accordingly
     env:
       # Access token and regional endpoint for Microsoft Playwright Testing
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
       PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
     run: npx playwright test
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install reporting package"
     inputs:
       targetType: 'inline'
       script: |
           'npm config set @microsoft:registry=https://npm.pkg.github.com'
           'npm set //npm.pkg.github.com/:_authToken ${PAT_TOKEN_PACKAGE}'
           'npm install'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PowerShell@2
     enabled: true
     displayName: "Run Playwright tests"
     env:
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       PLAYWRIGHT_SERVICE_RUN_ID: $(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt)
     inputs:
       targetType: 'inline'
       script: 'npx playwright test -c playwright.service.config.ts --workers=20'
       workingDirectory: path/to/playwright/folder # update accordingly
   

   İpucu

   Test sonuçlarını bulutta barındırılan tarayıcılar özelliğinden bağımsız olarak portalda yayımlamak için Microsoft Playwright Testing hizmetini kullanabilirsiniz.

İlgili içerik

Playwright testlerinizi bulutta barındırılan tarayıcılarda büyük ölçekte çalıştırmak için sürekli uçtan uca test iş akışını başarıyla ayarladınız.

• Kullanıcılara çalışma alanına erişim izni verme

• Çalışma alanlarınızı yönetme