Let’s Sync Cypress Tests with Azure Like a Pro (No More Manual Linking!)

Cypress tests + Azure Test Plans + a ton of manual clicks & types? Nah. Let’s automate that boring part..

You know this drill:

1. You write some beautiful Cypress tests, your coverage is solid, you push everything to your repo and then…

2. You have to manually go to Azure Test Plans, update test cases.

3. Mark them as Automated.

4. Then again come back to your Cypress script and update the each test title with the test case Id.

Ugh! I’ve been there. Too many times! So I decided to fix it!

---

Introducing my new Cypress plugin: cypress-azure-sync

This tiny yet mighty plugin lets you sync your Cypress test cases with Azure Test Plans like a breeze, no more tedious updates, no more forgetting to change the test status, and definitely no more grumbling at the screen.

Let me walk you through what it does, how it works, and how you can get started in just a few minutes!

---

What does cypress-azure-sync do?

Simply put, it reads your Cypress spec files, extracts the test case IDs based on a pattern you define (like TC1234or [1234]), and automatically updates your Azure Test Plan test cases:

• Marks them as Automated if they’re not.

• If the Cypress test case title does not have a test case id, it creates a new test case in Azure Test Plans:
  
  - In the defined Area Path.- With the test case title.
  
  - Adding the tags mentioned in the test case too.

• If a new test case created, retrieves the test case id and updates the Cypress test case title with the id in the spec file.

Magic? Nah. Just good automation ❤

⚠️ Note: This plugin currently does not publish test results to Azure Test Plans. That feature is on the roadmap!

---

How does it identify and map tests?

The plugin uses a simple naming convention. In your Cypress test case title, include the Azure test case ID in the following format:

it('1234: should successfully login with valid credentials', { tags: ['tagOne', 'tagTwo'] }, () => {
  // test steps
});

---

Quick Setup — How to use it in your project

Install the Plugin

Install the plugin using a simple command: npm install cypress-azure-sync --save-dev

Configure the Plugin

As usual in Cypress, you need to configure the plugin in the cypress.config.ts file as follows:

import { defineConfig } from 'cypress';
import { initAzureSync } from 'cypress-azure-sync';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      return initAzureSync()(on, config);
    },
  },
});

Define the Azure Configurations

You can define the Azure Configurations in different ways. For local executions, you can add a .env file to define the configurations as below and add it to .gitignore file.

# Azure DevOps Configuration
AZURE_DEVOPS_ORG=YOUR_ORG_NAME
AZURE_DEVOPS_PROJECT=YOUR_PROJECT_NAME
AZURE_DEVOPS_TOKEN=YOUR_PERSONAL_ACCESS_TOKEN
AZURE_DEVOPS_API_VERSION=7.0
AZURE_AUTOMATION_STATE_FIELD=Custom.AutomationState

# Test Plan Configuration
AZURE_TEST_PLAN_ID=YOUR_TEST_PLAN_ID
AZURE_TEST_SUITE_ID=YOUR_TEST_SUITE_ID

# Cypress Configuration
CYPRESS_SPEC_PATTERN=cypress/e2e/**/*.spec.ts

Defining the Test Plan Configuration is optional here, you will know why below. The other ways of configuring this can be found in the plugin page here.

Set the MetaData on Spec Files

If we being rational, in most cases the tests in one Spec file should go to one Area Path in Azure Test Plans and another set of tests in another Spec should go some other Area Path. So the plugin uses metadata to map this accordingly.

On each of your Spec file, define the Test Plan ID, Test Suite ID and Area Path as a JSDoc comment (or as a regular comment, i prefer this).

/**
 * TestPlanId = 170880
 * TestSuiteId = 170921
 * AreaPath = 'Project XYZ\Application XYZ\Cache Service'
 */

All done! Now it’s time to see the magic happen (sorry not the magic! see the automation in action!)..

Execute the Sync Process

There are two ways execute the Sync. You can decide what you prefer!

1. Use a Hook: You can add this simple command in a before() or after() hook (I prefer in a before() hook defined in the commands.ts file 😉):

after(() => {
    cy.task("syncWithAzure");
});

2. Execute a NPX Command (CLI):

You can also run npx cypress-azure-sync in your terminal/command-prompt to start the Sync.

---

Why I Built This Plugin (a mini behind-the-scenes)

So here’s the story…

I was happily cruising along with Cypress and Azure DevOps pipelines, until I hit a familiar bump — one that always made me sigh:

“Why is there no easy way to sync test cases & metadata in Azure?”

Then came the rock. One of our API projects landed with 500+ test cases. Yep, you read that right. And guess what? All of them needed to be created in Azure Test Plans. Manually.

Not just that — after creating them, we had to go back and update every test script to include the corresponding Azure Test Case ID. That whole thing screamed “manual pain”.

That’s when I knew enough was enough. I rolled up my sleeves and started building a plugin that would take care of the annoying bits: mapping, syncing, updating metadata. Basically, everything that wastes our time and energy.

And thus, cypress-azure-sync was born. Built from frustration, refined by passion. I hope it saves you the hours it’s already saving me! Now it’s open-source, and I hope it helps you too!

---

What’s Next for the Plugin?

Here’s what I have in mind:

• Publishing test results directly to Azure Test Runs (yep, it’s coming! Hooray!!!)

• Support for multiple test case ID formats in a single test title

• Handle custom fields in Azure test cases

Your ideas are welcome too! Just drop a comment below!

So go ahead, give cypress-azure-sync a try. Let magic do the heavy lifting — while you focus on writing awesome tests.

Until next time, keep Testing Smart!