Coded UI in WPF Charts (SfChart)

14 Jul 20216 minutes to read

Automated tests that drive your application through its user interface (UI) are known as coded UI tests (CUITs). These tests include functional testing of the UI controls. SfChart supports Coded UI automation that helps you create automated tests for inner elements and records the sequence of actions. While dragging the crosshair on UI elements, it shows the properties of the respective UI elements and you can also add assertion for each of the properties.




Level 1

Record and Identify UI Elements when you perform mouse and keyboard actions.

Level 2

Provide Custom properties for UI Elements when you drag the crosshair on the UI Element.

Level 3

CUIT generates code from recorded session. Create specialized class to access Custom Properties so the generate code is simplified.


Coded UI provides support only in,

  • Visual Studio Premium
  • Visual Studio Enterprise
  • Visual Studio Ultimate

For more info about the platforms and configurations refer here


To test SfChart with CUITs, build the Extension Project and place it in the mentioned location. You can get the Extension Project of SfChart from here.

  1. Open the extension project and build it.

  2. Get Syncfusion.SfChart.CUITExtension.WPF.dll from bin.

Place this assembly in below mentioned location, and install this assembly in GAC.

The above assembly must be placed into the following directory based on your Visual Studio version.

For Visual Studio 2010: C:\Program Files (x86)\Common Files\Microsoft Shared\VSTT\10.0\UITestExtensionPackages

For Visual Studio 2012: C:\Program Files (x86)\Common Files\Microsoft Shared\VSTT\11.0\UITestExtensionPackages

For Visual Studio 2013: C:\Program Files (x86)\Common Files\Microsoft Shared\VSTT\12.0\UITestExtensionPackages


Syncfusion.SfChart.CUITExtension.WPF.dll need to be installed in GAC location. Please refer the MSDN link for_ GAC _installation.

Getting Started

Coded UI Project Creation

Run Visual Studio in administrator mode

Create a new Coded UI Test Project as shown in the following screenshot.

Coded UI support in WPF SfChart

After you create a new Coded UI project, a CUIT file is added automatically and the Generate Code dialog box appears. In this, choose Record actions, edit UI map or add assertions.

Coded UI support in WPF SfChart

Now Coded UI project Visual Studio gets minimized and CodedUITestBuilder appears in the bottom right corner of your window. You can record the actions by clicking Start Recording in CodedUITestBuilder.

Coded UI support in WPF SfChart

You can also open the CodedUITestBuilder from existing Coded UI project by right clicking on the CodedUITestMethod1 in CUIT file and clicking the Generate Code for Coded UI Test.

Coded UI support in WPF SfChart

Record and Generate code

If you create a Coded UI Test project, UIMap – CodedUITestBuilder shown at bottom right corner.

Now you can record and perform actions in your application.

CodedUITestBuilder identify each actions and gives a tooltip message like below,

Coded UI support in WPF SfChart

If you recorded by mistake, you can choose recorded steps to delete.

Coded UI support in WPF SfChart

Once the record is completed, click the GenerateCode icon in CodedUITestBuilder for generate a test method. Then close the CodedUITestBuilder and you can see the generated code action as follows.

  • C#
  • public void RecordedMethod1()
    				 #region Variable Declarations
    				 WpfSfChart uISfChartCustom = this.UICUITestSampleDemoWindow.UISfChartCustom;
                     WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom;
                     WpfLegend uIChartLegendCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIChartLegendCustom;
                     WpfChartAxis uINumericalAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UINumericalAxisCustom;
                     WpfChartAxis uICategoryAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UICategoryAxisCustom;
                     WpfZoomingBehavior uIZoomInCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomInCustom;
                     WpfZoomingBehavior uIZoomOutCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomOutCustom;
                     WpfZoomingBehavior uIZoomResetCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomResetCustom;
                     WpfZoomingBehavior uIZoomPanCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomPanCustom;
                     WpfZoomingBehavior uISelectionZoomCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UISelectionZoomCustom;

    Add Assertion

    You can also create an assertion to check the modified chart/series properties value. Drag the crosshair to the chart series, and the Assertion window appears.

    Coded UI support in WPF SfChart

    The series properties for control is now listed in the Assertion dialog box. You can add assertion by clicking the Generate Code button in CodedUITestBuilder.

    Coded UI support in WPF SfChart

    Validate assertion property by using comparators. Also we can add assertion failure message.

    Coded UI support in WPF SfChart

    Another way for adding assertion by clicking the cross hair icon in CodedUITestBuilder, here list out all identified controls and select the control we want to validate.

    Coded UI support in WPF SfChart

    Click Generate code icon to generate assertion code then close the builder if validation is finish.

  • C#
  • public void AssertMethod1()
               #region Variable Declarations
               WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom;
              // Verify that the 'SegmentsCount' property of 'ColumnSeries' custom control equals '10'
              Assert.AreEqual(this.AssertMethod1ExpectedValues.UIColumnSeriesCustomSegmentsCount, uIColumnSeriesCustom.SegmentsCount, "Segemnts Count Mismatched...");

    Run Tests

    After all tests and assertion are created, right-click on the Test method and click Run Tests to run the test as follows.

    Coded UI support in WPF SfChart

    Open the test explorer and check test was passed or failed.

    Coded UI support in WPF SfChart

    Tables of Properties

    The following properties are for each of the UI elements in SfChart,

    UI Elements



    Header, PrimaryAxis, SecondaryAxis, Palette, AreaBackground, AreaBorderBrush, AreaBorderThickness, SideBySideSeriesPlacement, SeriesCount, BehaviorsCount, AnnotationsCount, TechnicalIndicatorsCount.


    VisibleRange, Header, HeaderPosition, OpposedPosition, Orientation, ShowGridLines, IsInversed, ShowTrackBallInfo, LabelFormat, LabelsSource, LabelExtent, LabelsPosition, MaximumLabels, LabelsIntersectAction, LabelRotationAngle, EdgeLabelsDrawingMode, EdgeLabelsVisibilityMode, TickLinesPosition.


    Area, IsSeriesVisible, Interior, Stroke, StrokeThickness, SeriesSelectionBrush, LegendIcon, VisibilityOnLegend, Label, Palette, SegmentsCount, AdornmentsCount.

    ZoomPan ToolBar

    IconBackground, ToolBarIconHeight, ToolBarIconWidth, ToolBarIconMargin


    Header, Orientation, DockPosition, LegendPosition, IconVisibility, CheckBoxVisibility, IconWidth, IconHeight, ItemMargin, Background, OffsetX, OffsetY.

    Legend Item

    IconVisibility, CheckBoxVisibility, VisibilityOnLegend, IsSeriesVisible, Label, IconWidth, IconHeight, ItemMargin.


    You can refer to our WPF Charts feature tour page for its groundbreaking feature representations. You can also explore our WPF Charts example to knows various chart types and how to easily configured with built-in support for creating stunning visual effects.