Question 301566 in Azure Question posted in
The official documentation to get you started can be found here.

How do I run Cypress tests for .Net and Angular in Azure Pipelines

I have a .NET Angular App (from the dotnet new angular cli command) that has Cypress setup in the /ClientApp folder. I can run the tests that I have on my local computer.

What I am wanting to do is to be able to run an azure pipeline, which spins up the angular and .net app. Then run the cypress tests and then if it finds an error stop the pipeline, otherwise just move onto the next step.

I have tried using a powershell script in the pipeline yml, and I have tried running the dotnet run & script but it just either hangs or just isn’t around for the next step of the process when cypress runs as cyrpress complains that it cannot reach the localhost:44442 location.

I was wondering if perhaps running this in Docker in the azure pipeline might help? Or whether cypress has trouble connecting to the localhost domain within the pipeline because its in a different task?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So it took a little while but I finally found a solution I was happy with. So within my angular project I added the npm packages: concurrently and wait-on.

    Then I added the following commands to my ClientApp/package.json file:

    {
    "cy:run": "cypress run",
    "run-dotnet": "cd ../ && dotnet run",
    "e2e": "concurrently "npm run run-dotnet" "npm run start" "npx wait-on https://localhost:44415 && npm run cy:run" --kill-others --success first"
}

    So the run-dotnet command will spin up an instance of the .NET web app. Now normally this waits until someone tries to access one of the .NET provided urls before it starts angular. Which we don't want to wait on.

    So then the command npm run start is executed to run the angular project.

    Then the npx wait-on https://localhost:44415 && npm run cy:run waits until the angular localhost port: 44415 is used (this is the usual port that your angular project runs on locally) and then runs the cypress commands.

    This will run cypress and then when it has finished its tests it will finish returning a success code.

    So to run this in azure_pipelines.yml I added this:

    - task: CmdLine@2
  displayName: Test E2E
  inputs:
    script: |
      cd src/MyApp/ClientApp
      
      npm run e2e

    Thanks to everyone who responded above and your questions gave me some direction but this seemed less of a hacky solution and also easier to run locally and without the need for Visual Studio.


  2. 0

    Yes, You can Dockerize your Asp.net core + Angular app and Publish your application to Azure Container Registry, Then create a DockerFile with docker-compose.yml file and run below YAML script to run the Cypress Test, Refer below:-

    I Published my .Net + Angular app to Azure Container Registry like below:-

    enter image description here

    enter image description here

    My docker-compose.yml file:-

    Include it in the root of your repository:-

    version: '3.4'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
      - api
  api:
    build:
      context: .
      dockerfile: Dockerfile.api
    ports:
      - "5000:5000"
  cypress:
    image: cypress/included
    depends_on:
      - web
    volumes:
      - ./:/e2e
    environment:
      - CYPRESS_baseUrl=http://web:80
    command: ["npm", "run", "test:e2e"]

    My Azure DevOps yaml pipeline:-

    trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: DockerCompose@0
  inputs:
    containerregistrytype: 'Azure Container Registry'
    azureSubscription: 'xxx subscription (xxxxxxxxx6e97cb2a7)'
    azureContainerRegistry: '{"loginServer":"siliconacr79.azurecr.io", "id" : "/subscriptions/xxxxxx7cb2a7/resourceGroups/siliconrg98/providers/Microsoft.ContainerRegistry/registries/siliconacr79"}'
    dockerComposeFile: '**/docker-compose.yml'
    action: 'Build services'
- script: |
    docker-compose run --rm cypress npm run test
  displayName: 'Run Cypress tests'

    Make sure you run all these tasks in the same stage.

    After running your cypress tests, You can inspect the Test results with Powershell task in your yaml pipeline like below:-

    - task: PowerShell@2
  displayName: 'Handle Cypress test results'
  condition: succeeded('cypress_test_run')
  inputs:
    targetType: 'inline'
    script: |
      # Get Cypress test results
      $cypressExitCode = (docker inspect --format='{{.State.ExitCode}}' cypress_test_run)

      # Stop containers
      docker stop dotnet-angular-app
      docker rm dotnet-angular-app
      docker rm cypress_test_run

      # Process Cypress test exit code
      if ($cypressExitCode -eq 0) {
        Write-Host "Cypress tests passed!"
        # Add additional steps
      } else {
        Write-Host "Cypress tests failed!"
        exit 1  
      }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search