السابق

التالي

تمرين - تشغيل اختبارات واجهة المستخدم محليا وفي البنية الأساسية لبرنامج ربط العمليات التجارية

مكتمل

قبل أن يقوم أندي وأميتا بإجراء اختباراتهما في البنية الأساسية لبرنامج ربط العمليات التجارية، يريدون التحقق من أن اختبارات واجهة المستخدم الجديدة الخاصة بهم تفعل ما يجب عليهم القيام به. في هذا القسم، ستتابع عن طريق تشغيل اختبارات Selenium UI أولا محليا ثم في البنية الأساسية لبرنامج ربط العمليات التجارية.

كتابة الاختبارات التلقائية هي عملية تكرارية، تماما مثل كتابة أي نوع آخر من التعليمات البرمجية. بالنسبة لتطبيقاتك الخاصة، ستحتاج على الأرجح إلى تجربة بعض الأساليب، والرجوع إلى الوثائق المرجعية ومثال التعليمات البرمجية، وإصلاح أخطاء البناء.

اختياري: تثبيت برنامج تشغيل Selenium ل Microsoft Edge

اتبع هذا القسم إذا كنت تريد رؤية الاختبارات تعمل محليا على Microsoft Edge.

تقوم حزمة NuGet ل Chrome وFirefox بتثبيت برنامج التشغيل ضمن دليل الحاوية ، جنبا إلى جنب مع التعليمات البرمجية للاختبار المحول برمجيا. بالنسبة إلى Edge، تحتاج إلى تثبيت برنامج التشغيل يدويا. للقيام بذلك:

1. تثبيت Microsoft Edge.

2. افتح Edge وانتقل إلى edge://settings/help. لاحظ رقم الإصدار. إليك مثال:

   

3. انتقل إلى صفحة تنزيلات برنامج تشغيل Microsoft Edge وقم بتنزيل برنامج التشغيل الذي يطابق رقم إصدار Edge. إليك مثال:

   

4. استخراج الملف .zip إلى الدليل bin/Release/net6.0 ضمن دليل مشروعك Tailspin.SpaceGame.Web.UITests. أنشئ هذه الدلائل إذا لم تكن موجودة.

على macOS، قد تحتاج إلى تحديث نهج النظام للسماح بتشغيل msedgedriver . للقيام بذلك، في Visual Studio Code، قم بتشغيل الأمر التالي spctl من المحطة الطرفية:

spctl --add Tailspin.SpaceGame.Web.UITests/bin/Release/net6.0/msedgedriver

تصدير متغيرات البيئة

لاحقا في هذه الوحدة النمطية، ستقوم بتشغيل اختبارات Selenium على Windows Server 2019. تسرد الوثائق البرنامج المثبت مسبقا لك.

يسرد القسم Selenium Web Drivers إصدارات برنامج تشغيل Selenium المتوفرة ل Chrome وFirefox وEdge. إليك مثال:

لكل برنامج تشغيل، لديك متغير البيئة الذي يعين إلى موقع برنامج التشغيل هذا. على سبيل المثال، ChromeWebDriver يتم تعيين موقع برنامج تشغيل Chrome.

تم إعداد التعليمات البرمجية لاختبارات الوحدة بالفعل لقراءة متغيرات البيئة هذه. تخبر هذه المتغيرات Selenium بمكان العثور على الملفات القابلة للتنفيذ لبرنامج التشغيل. لتشغيل اختبارات الوحدة محليا، تحتاج إلى تصدير نفس متغيرات البيئة هذه.

من Visual Studio Code، انتقل إلى المحطة الطرفية. ثم قم بتشغيل هذه الأوامر. استبدل المسار الموضح بالمسار الكامل إلى مشروع mslearn-tailspin-spacegame-web-deploy .

هام

تأكد من تشغيل هذه الأوامر وتعيين متغيرات البيئة في نفس نافذة المحطة الطرفية التي تستخدمها لتشغيل الاختبارات.

Windows

driverDir="C:\Users\user\mslearn-tailspin-spacegame-web-deploy\Tailspin.SpaceGame.Web.UITests\bin\Release\net6.0"

export ChromeWebDriver=$driverDir
export EdgeWebDriver=$driverDir
export GeckoWebDriver=$driverDir

ماك

driverDir="/Users/user/mslearn-tailspin-spacegame-web-deploy/Tailspin.SpaceGame.Web.UITests/bin/Release/net6.0"

export ChromeWebDriver=$driverDir
export EdgeWebDriver=$driverDir
export GeckoWebDriver=$driverDir

تشغيل اختبارات واجهة المستخدم محليا

ينتقل الأسلوب Setup في HomePageTest.cs إلى صفحة Space Game الرئيسية بعد تعيين متغير العضو driver.

على الرغم من أنه يمكنك ترميز عنوان URL للموقع، إلا أننا هنا نقرأ عنوان URL من متغير بيئة يسمى SITE_URL. بهذه الطريقة، يمكنك تشغيل الاختبارات عدة مرات مقابل عناوين URL مختلفة.

// Navigate to the site.
// The site name is stored in the SITE_URL environment variable to make 
// the tests more flexible.
string url = Environment.GetEnvironmentVariable("SITE_URL");
driver.Navigate().GoToUrl(url + "/");

نظرا لأنك لم تقم بعد بنشر موقع Space Game على بيئة App Service، ستستخدم الموقع الذي تستضيفه Microsoft لتشغيل الاختبارات محليا.

لتشغيل الاختبارات محليا:

1. في Visual Studio Code، انتقل إلى المحطة الطرفية المتكاملة وافتح نافذة محطة طرفية جديدة.

2. قم بتشغيل الأوامر التالية في نافذة المحطة الطرفية الجديدة.

   dotnet build --configuration Release
   dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
   

3. دون ملاحظة عن ارتباط موقع الويب المحلي، في هذا المثال هو http://localhost:5000.

4. قم بالتبديل مرة أخرى إلى نافذة المحطة الطرفية حيث قمت بتعيين متغيرات البيئة في الخطوة السابقة، وتأكد من أنك في الدليل الجذر لمشروعك. إليك مثال:

   cd ~/mslearn-tailspin-spacegame-web-deploy
   

5. SITE_URL تصدير متغير البيئة. استخدم الارتباط قيد التشغيل محليا الذي حصلت عليه من الخطوة السابقة.

   export SITE_URL="http://localhost:5000"
   

   يشير هذا المتغير إلى موقع ويب Space Game الذي تستضيفه Microsoft.

6. قم بتشغيل اختبارات واجهة المستخدم.

   dotnet test --configuration Release Tailspin.SpaceGame.Web.UITests
   

   تقوم هذه التعليمة البرمجية بتشغيل الاختبارات الموجودة في مشروع Tailspin.SpaceGame.Web.UITests .

   أثناء تشغيل الاختبارات، يظهر مستعرض واحد أو أكثر. يتحكم Selenium في كل متصفح ويتبع خطوات الاختبار التي حددتها.

   إشعار

   لا تقلق إذا لم تظهر المستعرضات الثلاثة. على سبيل المثال، لن ترى الاختبارات قيد التشغيل على Chrome إذا لم يكن Chrome مثبتا لديك أو كان لديك إصدار غير متوافق. ستساعدك رؤية مستعرض واحد فقط على منحك الثقة في عمل اختباراتك. في الممارسة العملية، في بيئة التطوير المحلية الخاصة بك، قد تحتاج إلى إعداد جميع المتصفحات التي تريد الاختبار مقابلها. سيسمح لك هذا الإعداد بالتحقق من أن الاختبارات الخاصة بك تتصرف كما هو متوقع في كل تكوين قبل تشغيل الاختبارات في البنية الأساسية لبرنامج ربط العمليات التجارية.

7. من المحطة الطرفية، تتبع إخراج كل اختبار. لاحظ أيضا ملخص تشغيل الاختبار في النهاية.

   يوضح هذا المثال أنه من بين تسعة اختبارات، نجحت جميع الاختبارات التسعة دون تخطي أي اختبارات:

   Passed!  - Failed:     0, Passed:     9, Skipped:     0, Total:     9, Duration: 5 s 
   

إضافة متغير SITE_URL إلى Azure Pipelines

في وقت سابق، قمت بتعيين SITE_URL متغير البيئة محليا بحيث تعرف اختباراتك مكان توجيه كل مستعرض. يمكنك إضافة هذا المتغير إلى Azure Pipelines. تشبه العملية كيفية إضافة متغيرات لمثيلات App Service. عند تشغيل العامل، يتم تصدير هذا المتغير تلقائيا إلى العامل كمتغير بيئة.

دعونا نضيف متغير المسار الآن، قبل تحديث تكوين البنية الأساسية لبرنامج ربط العمليات التجارية. للقيام بذلك:

1. في Azure DevOps، انتقل إلى مشروع Space Game - web - Functional tests .

2. ضمن Pipelines، حدد Library.

3. حدد مجموعة متغيرات الإصدار.

4. ضمن المتغيرات، حدد + إضافة.

5. للحصول على اسم المتغير الخاص بك، أدخل SITE_URL. نظراً لقيمته، أدخل عنوان URL لمثيل خدمة التطبيق الذي يتوافق مع بيئتك الاختبارية، مثل http://tailspin-space-game-web-test-10529.azurewebsites.net.

6. بالقرب من أعلى الصفحة، حدد Save لحفظ المتغير الخاص بك في المسار.

   يجب أن تشبه مجموعة المتغيرات هذه:

   

تعديل تكوين البنية الأساسية لبرنامج ربط العمليات التجارية

في هذا القسم، يمكنك تعديل تكوين البنية الأساسية لبرنامج ربط العمليات التجارية لتشغيل اختبارات Selenium UI أثناء مرحلة الاختبار .

1. في Visual Studio Code، افتح ملف azure-pipelines.yml . ثم قم بتعديل الملف كما يلي:

   تلميح

   يحتوي هذا الملف على بعض التغييرات، لذلك نوصي باستبدال الملف بأكمله بما تراه هنا.

   trigger:
   - '*'
   
   variables:
     buildConfiguration: 'Release'
     dotnetSdkVersion: '6.x'
   
   stages:
   - stage: 'Build'
     displayName: 'Build the web application'
     jobs: 
     - job: 'Build'
       displayName: 'Build job'
       pool:
         vmImage: 'ubuntu-20.04'
         demands:
         - npm
   
       variables:
         wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
         dotnetSdkVersion: '6.x'
   
       steps:
       - task: UseDotNet@2
         displayName: 'Use .NET SDK $(dotnetSdkVersion)'
         inputs:
           version: '$(dotnetSdkVersion)'
   
       - task: Npm@1
         displayName: 'Run npm install'
         inputs:
           verbose: false
   
       - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
         displayName: 'Compile Sass assets'
   
       - task: gulp@1
         displayName: 'Run gulp tasks'
   
       - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
         displayName: 'Write build info'
         workingDirectory: $(wwwrootDir)
   
       - task: DotNetCoreCLI@2
         displayName: 'Restore project dependencies'
         inputs:
           command: 'restore'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Build the project - $(buildConfiguration)'
         inputs:
           command: 'build'
           arguments: '--no-restore --configuration $(buildConfiguration)'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Publish the project - $(buildConfiguration)'
         inputs:
           command: 'publish'
           projects: '$(System.DefaultWorkingDirectory)/**/Tailspin.SpaceGame.Web.csproj' 
           publishWebProjects: false
           arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
           zipAfterPublish: true
   
       - publish: '$(Build.ArtifactStagingDirectory)'
         artifact: drop
   
   - stage: 'Dev'
     displayName: 'Deploy to the dev environment'
     dependsOn: Build
     jobs:
     - deployment: Deploy
       pool:
         vmImage: 'ubuntu-20.04'
       environment: dev
       variables:
       - group: Release
       strategy:
         runOnce:
           deploy:
             steps:
             - download: current
               artifact: drop
             - task: AzureWebApp@1
               displayName: 'Azure App Service Deploy: website'
               inputs:
                 azureSubscription: 'Resource Manager - Tailspin - Space Game'
                 appName: '$(WebAppNameDev)'
                 package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'
   
   - stage: 'Test'
     displayName: 'Deploy to the test environment'
     dependsOn: Dev
     jobs:
     - deployment: Deploy
       pool:
         vmImage: 'ubuntu-20.04'
       environment: test
       variables:
       - group: 'Release'
       strategy:
         runOnce:
           deploy:
             steps:
             - download: current
               artifact: drop
             - task: AzureWebApp@1
               displayName: 'Azure App Service Deploy: website'
               inputs:
                 azureSubscription: 'Resource Manager - Tailspin - Space Game'
                 appName: '$(WebAppNameTest)'
                 package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'
     - job: RunUITests
       dependsOn: Deploy
       displayName: 'Run UI tests'
       pool:
         vmImage: 'windows-2019'
       variables:
       - group: 'Release'
       steps: 
       - task: UseDotNet@2
         displayName: 'Use .NET SDK $(dotnetSdkVersion)'
         inputs:
           version: '$(dotnetSdkVersion)'
       - task: DotNetCoreCLI@2
         displayName: 'Build the project - $(buildConfiguration)'
         inputs:
           command: 'build'
           arguments: '--configuration $(buildConfiguration)'
           projects: '$(System.DefaultWorkingDirectory)/**/*UITests.csproj'
       - task: DotNetCoreCLI@2
         displayName: 'Run unit tests - $(buildConfiguration)'
         inputs:
           command: 'test'
           arguments: '--no-build --configuration $(buildConfiguration)'
           publishTestResults: true
           projects: '$(System.DefaultWorkingDirectory)/**/*UITests.csproj'
   
   - stage: 'Staging'
     displayName: 'Deploy to the staging environment'
     dependsOn: Test
     jobs:
     - deployment: Deploy
       pool:
         vmImage: 'ubuntu-20.04'
       environment: staging
       variables:
       - group: 'Release'
       strategy:
         runOnce:
           deploy:
             steps:
             - download: current
               artifact: drop
             - task: AzureWebApp@1
               displayName: 'Azure App Service Deploy: website'
               inputs:
                 azureSubscription: 'Resource Manager - Tailspin - Space Game'
                 appName: '$(WebAppNameStaging)'
                 package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'
   

   يتضمن الملف هذه التغييرات الثلاثة:

   • dotnetSdkVersion يتم نقل المتغير إلى أعلى الملف بحيث يمكن الوصول إلى مراحل متعددة. هنا تتطلب مرحلة البناء ومرحلة الاختبار هذا الإصدار من .NET Core.

   • تنشر مرحلة الإنشاء حزمة موقع ويب Space Game فقط كأداة بناء. في السابق، قمت بنشر البيانات الاصطناعية مثل هذا:

     - task: DotNetCoreCLI@2
       displayName: 'Publish the project - $(buildConfiguration)'
       inputs:
         command: 'publish'
         projects: '**/*.csproj'
         publishWebProjects: false
         arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
         zipAfterPublish: true
     

     تنشئ هذه المهمة نوعين من البيانات الاصطناعية للبناء: حزمة موقع ويب Space Game واختبارات واجهة المستخدم المحولة برمجيا. نقوم بإنشاء اختبارات واجهة المستخدم أثناء مرحلة الإنشاء للتأكد من أنها ستتحول برمجيا أثناء مرحلة الاختبار ، لكننا لسنا بحاجة إلى نشر التعليمات البرمجية للاختبار المحول برمجيا. نقوم ببنائه مرة أخرى أثناء مرحلة الاختبار عند تشغيل الاختبارات.

   • تتضمن مرحلة الاختبار مهمة ثانية تقوم بإنشاء الاختبارات وتشغيلها. تشبه هذه المهمة المهمة التي استخدمتها في الوحدة النمطية تشغيل اختبارات الجودة في البنية الأساسية لبرنامج ربط العمليات التجارية للبناء باستخدام Azure Pipelines . في هذه الوحدة النمطية، قمت بتشغيل اختبارات NUnit التي تحققت من وظيفة تصفية لوحة المتصدرين.

     تذكر أن مهمة التوزيع هي نوع خاص من المهام التي تلعب دورا مهما في مراحل التوزيع الخاصة بك. المهمة الثانية هي مهمة عادية تقوم بتشغيل اختبارات Selenium على عامل Windows Server 2019. على الرغم من أننا نستخدم عامل Linux لإنشاء التطبيق، فإننا نستخدم هنا عامل Windows لتشغيل اختبارات واجهة المستخدم. نحن نستخدم عامل Windows لأن أميتا تقوم بإجراء اختبارات يدوية على Windows، وهذا ما يستخدمه معظم العملاء.

     RunUITests تعتمد الوظيفة على Deploy الوظيفة للتأكد من تشغيل المهام بالترتيب الصحيح. ستقوم بنشر موقع الويب على App Service قبل تشغيل اختبارات واجهة المستخدم. إذا لم تحدد هذه التبعية، يمكن تشغيل المهام داخل المرحلة بأي ترتيب أو تشغيل بالتوازي.

2. في الوحدة الطرفية المتكاملة، أضف azure-pipelines.yml إلى الفهرس، وقم بتثبيت التغييرات، وادفع الفرع إلى GitHub.

   git add azure-pipelines.yml
   git commit -m "Run Selenium UI tests"
   git push origin selenium
   

شاهد Azure Pipelines تقوم بتشغيل الاختبارات

هنا، يمكنك مشاهدة تشغيل البنية الأساسية لبرنامج ربط العمليات التجارية. يقوم المسار بتشغيل اختبارات Selenium UI أثناء مرحلة الاختبار .

1. في Azure Pipelines، انتقل إلى البنية وتتبعها أثناء تشغيلها.

   أثناء الإنشاء، سترى الاختبارات التلقائية يتم تشغيلها بعد نشر موقع الويب.

   

2. بعد انتهاء البناء، انتقل إلى صفحة الملخص.

   

   لاحظ أن عملية النشر واختبارات واجهة المستخدم قد انتهت بنجاح.

3. بالقرب من أعلى الصفحة، لاحظ الملخص.

   لاحظ أن البيانات الاصطناعية للبناء لموقع Space Game يتم نشرها تماما كما هو الحال دائما. لاحظ أيضا قسم الاختبارات والتغطية ، الذي يظهر أن اختبارات Selenium قد اجتازت.

   

4. حدد ملخص الاختبار لمشاهدة التقرير الكامل.

   ويبين التقرير أن جميع الاختبارات التسعة قد اجتازت. تتضمن هذه الاختبارات ثلاثة اختبارات عبر ثلاثة مستعرضات.

   

   إذا فشل أي اختبار، فستحصل على نتائج مفصلة للفشل. من هناك، يمكنك التحقق من مصدر الفشل، وإصلاحه محليا، ثم دفع التغييرات الضرورية لجعل الاختبارات تمر في البنية الأساسية لبرنامج ربط العمليات التجارية.

أميتا: هذه الأتمتة مثيرة! لدي الآن اختبارات واجهة المستخدم التي يمكنني تشغيلها في البنية الأساسية لبرنامج ربط العمليات التجارية. ستوفر لنا الاختبارات الوقت على المدى الطويل. لدي أيضا نمط يجب اتباعه لإضافة المزيد من الاختبارات. والأفضل من ذلك كله، تمنحنا اختبارات واجهة المستخدم ثقة إضافية في جودة التعليمات البرمجية الخاصة بنا.

أندي: كل شيء صحيح. تذكر أن الاختبارات التي تقوم بتشغيلها يدويا بشكل متكرر هي مرشحات جيدة للأتمتة. حظا سعيدا إضافة المزيد. إذا واجهتك مشكلة أو كنت بحاجة إلى مراجع تعليمات برمجية، فأنت تعرف أين تجدني.

متابعة