UI Testing in Copilot Studio: A Comprehensive Guide

User Interface (UI) testing in Copilot Studio ensures that the chatbot’s interface is intuitive, responsive, and accessible across different devices and platforms. This process helps identify layout issues, interaction problems, accessibility gaps, and responsiveness challenges before deployment.

This guide provides a detailed step-by-step approach to testing the UI of Copilot Studio apps, covering functional testing, accessibility checks, cross-platform compatibility, and performance validation.

Step 1: Understanding UI Testing in Copilot Studio

1. Why is UI Testing Important?

✅ Ensures the chatbot displays correctly on all platforms (Microsoft Teams, Web, Mobile).
✅ Confirms buttons, quick replies, and Adaptive Cards function as expected.
✅ Verifies that the chatbot is accessible to users with disabilities.
✅ Detects broken UI components before users experience them.

2. Key UI Elements to Test

UI Component	What to Test?
Chat Messages	Text formatting, readability, emoji support
Buttons & Quick Replies	Clickability, responsiveness, proper labeling
Adaptive Cards	Layout consistency, interactive elements (buttons, dropdowns)
Images & Media	Visibility, alt text for accessibility, loading speed
Keyboard Navigation	Tab navigation, focus order, enter key functionality
Speech-to-Text & Text-to-Speech	Voice input recognition, text readout accuracy

Step 2: Preparing for UI Testing in Copilot Studio

1. Set Up the Test Environment

📌 Ensure the chatbot is configured for multi-platform deployment (Microsoft Teams, Web, Mobile).
📌 Create test cases based on user interactions (e.g., button clicks, form submissions).
📌 Identify different user roles (admin, customer, agent) for testing custom UI elements.

2. Define Test Scenarios

✅ Message Display Tests

Are text messages properly formatted?
Do emojis and special characters render correctly?

✅ Button & Quick Reply Tests

Are quick reply buttons clickable and responsive?
Do buttons trigger the correct bot action?

✅ Adaptive Card Tests

Are all UI components aligned properly?
Does the card scale well on different screen sizes?

✅ Accessibility Tests

Can the chatbot be used without a mouse (keyboard-only navigation)?
Do screen readers correctly read messages and UI elements?

✅ Performance Tests

Does the chatbot load quickly without UI delays?
Do images and videos display properly without breaking?

Step 3: Testing Message Display & Text Formatting

1. Check Message Formatting

Verify that:
✅ Text is readable and follows proper formatting (bold, italics, bullet points).
✅ Messages display correctly across different platforms (Teams, Web, Mobile).

Example of Properly Formatted Messages

👋 **Welcome to Customer Support!**  
How can I help you today?  
- **Track Order 📦**  
- **View Reports 📊**  
- **Contact an Agent 📞**

2. Verify Special Characters & Emojis

✅ Ensure emojis render properly on different devices.
✅ Avoid special characters that might break formatting.

Step 4: Testing Buttons & Quick Replies

1. Functional Testing for Buttons

📌 Click all buttons and ensure they perform the correct actions.
📌 Check hover states and click animations for feedback.

Example Quick Reply Button Setup in Copilot Studio

{
  "type": "ActionSet",
  "actions": [
    {
      "type": "Action.Submit",
      "title": "View Balance",
      "data": {
        "action": "view_balance"
      }
    }
  ]
}

✅ Test if the button sends the correct payload.
✅ Confirm the button is visible and touch-friendly on mobile devices.

2. Keyboard Navigation Testing for Buttons

✅ Press Tab to move between buttons.
✅ Press Enter to select a button.
✅ Ensure focus clearly moves in a logical order.

Step 5: Testing Adaptive Cards

1. Layout & Alignment Check

📌 Ensure all elements in an Adaptive Card are correctly aligned and responsive.
📌 Verify that text, buttons, and images adjust properly on different screen sizes.

Example Adaptive Card for Testing

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "📊 Sales Report Summary",
      "size": "Large",
      "weight": "Bolder"
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "50%",
          "items": [
            {
              "type": "TextBlock",
              "text": "Total Revenue",
              "weight": "Bolder"
            },
            {
              "type": "TextBlock",
              "text": "$1,200,000",
              "size": "ExtraLarge",
              "color": "Good"
            }
          ]
        }
      ]
    }
  ]
}

✅ Ensure the columns stack correctly on mobile.
✅ Verify text alignment when resizing the window.

Step 6: Accessibility Testing

1. Screen Reader Compatibility

✅ Use JAWS, NVDA, or Narrator to test how messages are read aloud.
✅ Verify that alt text is present for images and buttons.

2. Keyboard-Only Navigation Testing

📌 Ensure users can interact without using a mouse:

Tab moves focus between elements.
Enter selects buttons.

3. Contrast & Readability Testing

📌 Check color contrast using WebAIM Contrast Checker.
📌 Ensure text is not too small and legible on all devices.

✅ Recommended Contrast Ratio: 4.5:1 or higher.

Step 7: Cross-Platform Testing (Web, Teams, Mobile)

1. Test in Microsoft Teams

📌 Check if the chatbot UI integrates seamlessly in Microsoft Teams.
📌 Ensure buttons, quick replies, and Adaptive Cards display correctly.

2. Test in Web Chat

✅ Ensure the chatbot works on different web browsers (Chrome, Edge, Firefox).

3. Test on Mobile Devices

📌 Verify if buttons are touch-friendly and messages wrap properly.
📌 Check if images and Adaptive Cards scale correctly on smaller screens.

Step 8: Performance & Load Testing

📌 Ensure the chatbot UI loads within 2 seconds on all platforms.
📌 Use Microsoft’s Application Insights to measure chatbot response times.
📌 Verify that large images or Adaptive Cards do not slow down interactions.

Final Thoughts: Ensuring a Flawless UI in Copilot Studio

✅ Key Takeaways:
✔ Test message formatting & readability.
✔ Verify buttons & quick replies are functional and clickable.
✔ Ensure Adaptive Cards are aligned and responsive.
✔ Conduct accessibility testing (screen readers, keyboard navigation).
✔ Test on multiple platforms (Teams, Web, Mobile).
✔ Perform performance testing to ensure fast UI response times.

By following these comprehensive UI testing steps, your Copilot Studio chatbot will be bug-free, visually appealing, and accessible to all users.

Would you like a UI testing checklist for your chatbot project? Let me know!

UI testing in Copilot Studio