Setting Up a CI/CD Pipeline with Azure and Playwright for StyleMate

I’ve been developing a web application called style companion. Initially, I started this project to practice my C# and .NET skills. Over time, I added more pages and features and started exploring advanced features. Recently, I integrated Gronk LL.M. Generate smart clothing recommendations and Weather API Enhanced advice based on current weather conditions.

After merging these functions I decided to add a CI/CD pipeline for automated deployment and integration test Go to my project. Here’s how I set up the pipeline, handled the challenges, and implemented a staging environment for robust testing.

Add a new deployment pipeline

To deploy StyleMate, I built an Azure web application Free App Service Plan and a SQL database. The database costs approximately $5 per month using Azure credits. To simplify deployment, I configured Deployment center In Azure Web App.

Challenges with pre-pipeline

Initially, use the preset pipeline established by the deployment center Subscription number, Tenant IDand Resource ID for deployment. However, I want to use Post profile method, this method is simpler and suitable for smaller projects.

After some research I found that I need to enable SCM basic certification released Under Web Application Configuration Settings. This configuration allows the pipeline to be deployed using a release profile.

pipeline code

Here is the pipeline I configured to build and deploy StyleMate:

name: Build and deploy .NET Core application to Web App StyleMate
on:
  workflow_run:
    workflows:
      - Build and deploy ASP.Net Core app to Azure Web App - StyleMate-Staging
    types:
      - completed
env:
  AZURE_WEBAPP_NAME: StyleMate
  AZURE_WEBAPP_PACKAGE_PATH: .\published
  CONFIGURATION: Release
  DOTNET_CORE_VERSION: 8.0.x
  WORKING_DIRECTORY: .
jobs:
  build:
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    runs-on: windows-latest
    steps:
    - uses: actions/checkout@v4
    - name: Setup .NET SDK
      uses: actions/setup-dotnet@v3
      with:
        dotnet-version: ${{ env.DOTNET_CORE_VERSION }}
    - name: Restore
      run: dotnet restore "${{ env.WORKING_DIRECTORY }}"
    - name: Build
      run: dotnet build "${{ env.WORKING_DIRECTORY }}" --configuration ${{ env.CONFIGURATION }} --no-restore
    - name: Install Playwright Browsers
      run: npx playwright install
    - name: Test
      run: dotnet test "${{ env.WORKING_DIRECTORY }}" --no-build
    - name: Publish
      run: dotnet publish "${{ env.WORKING_DIRECTORY }}" --configuration ${{ env.CONFIGURATION }} --no-build --output "${{ env.AZURE_WEBAPP_PACKAGE_PATH }}"
    - name: Publish Artifacts
      uses: actions/upload-artifact@v3
      with:
        name: webapp
        path: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
  deploy:
    runs-on: windows-latest
    needs: build
    steps:
    - name: Download artifact from build job
      uses: actions/download-artifact@v3
      with:
        name: webapp
        path: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
    - name: Deploy to Azure WebApp
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.StyleMate_84FD }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

Integration testing

I added tests to the pipeline to ensure the application was functioning properly before deploying to production. The pipeline includes:

1. Unit testing Use xUnit to verify core logic.
2. End-to-end (E2E) testing Use Playwright to simulate real user interactions.

End-to-end testing challenges

Playwright tests are run on actual websites. If a code change breaks functionality, deploying it directly to production can cause problems. Ideally, the test should be in staging environment To prevent this from happening.

First try: Deployment slots

Azure Application Services Deployment slot Great for stage performances. However, deployment slots are not supported on the free App Service plan.

Staging environment solutions

As a workaround I created another Azure Web App called StyleMate-Staging. Then I updated the pipeline to:

1. Deploy the application to Temporary web application (StyleMate-Staging).
2. Execute Playwright tests on the staging environment.
3. Deploy the application to Production web applications (StyleMate) Only if all tests pass.

final workflow

The pipeline works as follows:

1. Build and test:

   • The application is built and unit tested.
   • Build and upload artifacts for deployment.

2. Phased deployment:

   • The application is deployed to StyleMate-Staging.
   • Playwright tests take place at the show.

3. Production deployment:

   • If all tests pass, the application is deployed to the production web application, StyleMate.

in conclusion

By integrating CI/CD pipelines and testing workflows, I ensure the reliability and quality of StyleMate. The staging environment allows me to safely perform Playwright E2E testing without impacting production users. While Azure’s free App Service plan has limitations (e.g., no deployment slots), the workaround using a separate temporary app works seamlessly.

This setting provides a solid foundation for deploying high-quality code and further enhancing StyleMate.

If you want to check out the project, here it is GitHub repository.