--- title: "Using Selenium and NUnit for Front-end Testing" slug: "using-selenium-and-nunit-for-front-end-testing" updated: 2024-10-25T15:22:22Z published: 2024-10-25T15:22:22Z --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt > Use this file to discover all available pages before exploring further. # Using Selenium and NUnit for Front-end Testing ## Overview **Unit Testing** early and often is a necessary development best-practice, especially ahead of deployments and upgrades. Unit Testing Results reveal how changes to code or processes affect a solution's functionality with expected input, as well as how that solution handles unexpected input. Unlike typical back-end [Unit-testing and Debugging](https://documentation.decisions.com/docs/running-unit-tests-from-the-flow-designer) done through Decisions' unit-tests for Flows and Rules, the following article reviews the basics of performing automated front-end testing for UI interactions, such as navigating the portal, navigating through Forms, simulating data-entry, etc. --- ## Pre-Configured Resource "Selenium Example.zip" (53MB) contains: - Visual Studio Project using Selenium and NUnit packages - methods from the Decisions.Core.UnitTests.Web library [Selenium Example.zip](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/Selenium%20Example.zip) --- ## Decisions Setup 1. Download the preconfigured **Selenium Example.zip** file from above. 2. **Unzip**the contents of the folder. 3. [Import](https://documentation.decisions.com/v9/docs/importing-and-exporting-projects) “Decisions Project Export.zip” into **Decisions**. --- ## Visual Studio Project Setup 1. Locate the **DemoProject.sln** within the **DemoSeleniumProject**subfolder of the Pre-Configured Resource file (**Selenium Example.zip**). 2. Use **Visual****Studio**to open DemoProject.sln.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2020-02-18_16h29_02.png)![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2020-02-18_17h15_27.png) 3. Open the **Test****Explorer**in Visual Studio.All test methods will be displayed in the Test Explorer. 4. Click on the **Run****Test**or **Run All Tests** button.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2020-02-18_17h15_28.png) ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2020-02-18_17h42_56.png)Test results will be displayed in the Test Explorer, with green check-marks or red X-marks depending on the results (as well as error messages and stack traces if applicable).  The example Visual Studio project (“DemoProject.sln”) assumes the default admin account credentials are still in use. Tests will run as the default user. --- ## Writing New Tests Requirements [Visual Studio](https://visualstudio.microsoft.com/downloads/) is installed with the following packages: - NUnit - NUnit3TestAdapter - Selenium.WebDriver.ChromeDriver - Decisions installed on the machine The example Visual Studio project (“DemoProject.sln”) is pre-configured for the packages listed above; packages are also contained in the "Selenium Example.zip" file. --- ## **Notable Class and Method attributes for Writing Tests** | TestFixture | Marks a class as the “test set” class. This contains **Test**methods, and possibly may include the **SetUp**and **TearDown** methods. | | --- | --- | | SetUp | Marks a method to be called before each time a **Test**method is called. | | Test | Indicates the method will be called as a **Test**. | | TearDown | A method with this attribute will be called each time a **Test**method completes. | ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2020-02-18_17h51_37.png) --- ## Writing a New Test The**Decisions UnitTests dll**is used in this Project to find front-end controls/components and to utilize helper methods capable of performing actions on said components. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2020-02-18_18h03_47.png) To find a **Textbox** control on a **Form**, define an object with the **class**‘SilverTextbox’ by passing a **data-component-id argument** to the “GetComponentByID” method, such as: ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2020-02-18_18h11_08.png) Classes exist for every Form Control.  To define an object of a specific class, simply provide the **data-component-id**of the control to the appropriate **method**(“GetComponentByID”). This is especially useful since each UI control has a unique data-component-id. --- ## Finding the Data-component-id of a UI element Make sure that the UI element being targeted is actively displayed in the browser (this example uses Chrome). 1. Open **Chrome Developer Tools**by following one of the methods below.Chrome Developer Tools - Launch Options: - Press **F12** on the keyboard. - Press **CTRL + Shift + I** - Use Chrome browser menus ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2020-02-18_18h18_18.png) 2. Click the far-left menu icon (shown below) to allow on-screen inspection of **CSS**elements. Once enabled, clicking on any **UI**element will reveal relevant CSS for that element. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2020-02-18_18h22_36.png) 3. Locate and note the **data-component-id** and **data-component-name**needed to target the UI control/component that are using **Decisions.Core.UnitTests.Web** methods.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2020-02-18_18h22_44.png) --- For further information on Administration, visit the [Decisions Forum](https://community.decisions.com/categories/Administration).