Introduction to Coded UI

What is a Coded UI Test?

Coded UI Tests are automated tests that drive your application through its user interface. These tests include functional testing of the UI controls. They let you verify that the whole application, including its user interface, is functioning correctly.

Important Note from Microsoft! CodedUI is deprecated.

OSS UI test tools such as Selenium and Appium have gained momentum and have a strong community backing. Because these frameworks have become industry standards, we deprecated Coded UI test for automated UI-driven functional testing. Visual Studio 2019 will be the final version of Visual Studio with Coded UI test features. We recommend using Selenium for testing web-applications and Appium with WinAppDriver for testing desktop and UWP apps.
Reference Page: https://docs.microsoft.com/en-us/visualstudio/releases/2019/release-notes-v16.0

Coded UI Features

  • Functional Testing
  • Generate code in C#
  • Intent aware recording and resilient playback
  • Integrated with ALM story
    • Build, deploy & test in lab or as part of build
    • Local, remote runs, data collection

Creating Coded UI Test

Coded UI Test can be created the following ways:

  • Fast Forward Automation using MTM
  • Generating your Coded UI form existing recording (Convert the recorded actions from a manual test)
  • Generating a new Coded UI Test from scratch using Coded UI Test Builder
  • Writing your own Coded UI (Advance option)

Test Automation Pyramid & Visual Studio

codedui

Creating Coded UI Tests

 1. Create a Coded UI Test project.

  • Open Visual Studio
  • Choose File < New < Project
  • Use C# Template go to Test and choose Coded UI Test Project

codedui

2. Add a coded UI test file

If you just created a Coded UI project, the first CUIT file is added automatically

codedui

In the Generate Code for Coded UI Test dialog box, choose Record actions, edit UI map or add assertions.

codedui

The Coded UI Test Builder appears and Visual Studio is minimized, choose Generate Code

coded ui

Generated Coded UI Files

CodedUITest1.cs: Contains the coded UI test class, test methods.

UIMap.uitest: This is an XML file that should only be edited by double-clicking on this file and using the UI Map Editor

UIMap.cs: This file contains custom code and maybe hand edited. It will be blank when it is initially created.

UIMap.Designer.cs: This file contains generated code. Do not edit this file as your changes will be overwritten any time visual studio regenerates this file.

Coded UI Test Example

CodedUITest1.cs

using System;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using System.Windows.Input;
using System.Windows.Forms;
using System.Drawing;
using Microsoft.VisualStudio.TestTools.UITesting;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using Microsoft.VisualStudio.TestTools.UITest.Extension;
using Keyboard = Microsoft.VisualStudio.TestTools.UITesting.Keyboard;
 
 
namespace SWTestAcademyProject
{
    /// <summary>
    /// Summary description for CodedUITest1
    /// </summary>
    [fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][CodedUITest]
    public class CodedUITest1
    {
        public CodedUITest1()
        {
        }
 
        [TestMethod]
        public void CodedUITestMethod1()
        {
            // To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
            this.UIMap.GoToWebPage(); //http://www.swtestacademy.com
            this.UIMap.ClickOnContactLink();
            this.UIMap.ClickOnSendButton();
            this.UIMap.ValidationForRequiredField();
        }
 
        #region Additional test attributes
 
        // You can use the following additional attributes as you write your tests:
 
        ////Use TestInitialize to run code before running each test
        //[TestInitialize()]
        //public void MyTestInitialize()
        //{       
        //    // To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
        //}
 
        ////Use TestCleanup to run code after each test has run
        //[TestCleanup()]
        //public void MyTestCleanup()
        //{       
        //    // To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
        //}
 
        #endregion
 
        public TestContext TestContext
        {
            get
            {
                return testContextInstance;
            }
            set
            {
                testContextInstance = value;
            }
        }
        private TestContext testContextInstance;
 
        public UIMap UIMap
        {
            get
            {
                if ((this.map == null))
                {
                    this.map = new UIMap();
                }
 
                return this.map;
            }
        }http://www.swtestacademy.com/wp-admin/post.php?post=891&action=edit#
 
        private UIMap map;
    }
}

 

UIMap.uitest

namespace SWTestAcademyProject
{
    using System;
    using System.CodeDom.Compiler;
    using System.Collections.Generic;
    using System.Drawing;
    using System.Text.RegularExpressions;
    using System.Windows.Input;
    using Microsoft.VisualStudio.TestTools.UITest.Extension;
    using Microsoft.VisualStudio.TestTools.UITesting;
    using Microsoft.VisualStudio.TestTools.UITesting.HtmlControls;
    using Microsoft.VisualStudio.TestTools.UnitTesting;
    using Keyboard = Microsoft.VisualStudio.TestTools.UITesting.Keyboard;
    using Mouse = Microsoft.VisualStudio.TestTools.UITesting.Mouse;
    using MouseButtons = System.Windows.Forms.MouseButtons;
   
    
    [GeneratedCode("Coded UITest Builder", "14.0.23107.0")]
    public partial class UIMap
    {
       
        /// <summary>
        /// ClickOnContactLink
        /// </summary>
        public void ClickOnContactLink()
        {
            #region Variable Declarations
            HtmlHyperlink uIContactHyperlink = this.UISoftwareTestAcademyWWindow.UISoftwareTestAcademyDocument.UIContactCustom.UIContactHyperlink;
            #endregion
 
            // Click 'Contact' link
            Mouse.Click(uIContactHyperlink, new Point(27, 28));
        }
       
        /// <summary>
        /// ClickOnSendButton
        /// </summary>
        public void ClickOnSendButton()
        {
            #region Variable Declarations
            HtmlInputButton uISendButton = this.UIContactSoftwareTestAWindow.UIContactSoftwareTestADocument.UIWpcf7f11p18o1Pane.UISendButton;
            #endregion
 
            // Click 'Send' button
            Mouse.Click(uISendButton, new Point(61, 23));
        }
...
...
...

 

Sample code that shows how to find objects

[GeneratedCode("Coded UITest Builder", "14.0.23107.0")]
    public class UIContactCustom : HtmlCustom
    {
       
        public UIContactCustom(UITestControl searchLimitContainer) :
                base(searchLimitContainer)
        {
            #region Search Criteria
            this.SearchProperties["TagName"] = "LI";
            this.SearchProperties["Id"] = "menu-item-20";
            this.SearchProperties[UITestControl.PropertyNames.Name] = null;
            this.FilterProperties["Class"] = "menu-item menu-item-type-post_type menu-item-object-page menu-item-20";
            this.FilterProperties["ControlDefinition"] = "class=\"menu-item menu-item-type-post_typ";
            this.FilterProperties["InnerText"] = "Contact";
            this.FilterProperties["TagInstance"] = "13";
            this.WindowTitles.Add("Software Test Academy");
            #endregion
        }
       
        #region Properties
        public HtmlHyperlink UIContactHyperlink
        {
            get
            {
                if ((this.mUIContactHyperlink == null))
                {
                    this.mUIContactHyperlink = new HtmlHyperlink(this);
                    #region Search Criteria
                    this.mUIContactHyperlink.SearchProperties[HtmlHyperlink.PropertyNames.Id] = null;
                    this.mUIContactHyperlink.SearchProperties[HtmlHyperlink.PropertyNames.Name] = null;
                    this.mUIContactHyperlink.SearchProperties[HtmlHyperlink.PropertyNames.Target] = null;
                    this.mUIContactHyperlink.SearchProperties[HtmlHyperlink.PropertyNames.InnerText] = "Contact";
                    this.mUIContactHyperlink.FilterProperties[HtmlHyperlink.PropertyNames.AbsolutePath] = "/contact/";
                    this.mUIContactHyperlink.FilterProperties[HtmlHyperlink.PropertyNames.Title] = null;
                    this.mUIContactHyperlink.FilterProperties[HtmlHyperlink.PropertyNames.Href] = "http://www.swtestacademy.com/contact/";
                    this.mUIContactHyperlink.FilterProperties[HtmlHyperlink.PropertyNames.Class] = null;
                    this.mUIContactHyperlink.FilterProperties[HtmlHyperlink.PropertyNames.ControlDefinition] = "href=\"http://www.swtestacademy.com/conta";
                    this.mUIContactHyperlink.FilterProperties[HtmlHyperlink.PropertyNames.TagInstance] = "1";
                    this.mUIContactHyperlink.WindowTitles.Add("Software Test Academy");
                    #endregion
                }
                return this.mUIContactHyperlink;
            }
        }
        #endregion
       
        #region Fields
        private HtmlHyperlink mUIContactHyperlink;
        #endregion
    }

 

Thanks.
Erdem Azikli

1 thought on “Introduction to Coded UI”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.