Automated tests are essential to ensure that your code behaves as expected, especially in user interfaces, which can be affected by changes in different parts of the system. Selenium is one of the most popular tools for automating UI tests and can be easily integrated into Blazor projects. In this article, we’ll learn how to use Selenium to run automated tests in a Blazor project, simulating navigation between screens and interaction with UI components.
What is Selenium?
Selenium is an automation tool for web applications. It simulates user actions such as clicking buttons, filling in text fields, and navigating between pages, and is widely used to validate UI functionality.
Main Components of Selenium
WebDriver: Selenium’s main interface to directly interact with the browser, performing user-like actions.
Selenium IDE: A tool to record and replay browser interactions.
Selenium Grid: Allows you to run tests in parallel across different browsers and operating systems.
In this article, we’ll focus on using Selenium WebDriver, integrating it with a Blazor project to automate tests
Installing Selenium in the Test Project
Before writing the tests, we’ll create a Blazor Server project. We’ll use a basic Blazor project with page navigation. Then, we’ll create a test project to automate navigation between Blazor pages using Selenium.
To do this, right-click the solution and choose “Add” > “New Project”. Then search for “MSTest” and select “MSTest Test Project”. Continue the setup and select “MSTest” as the test runner.
Now add the Selenium WebDriver package via NuGet:
dotnet add package Selenium.WebDriver
dotnet add package Selenium.WebDriver.ChromeDriver
Configuring the WebDriver
Selenium can use ChromeDriver (or Firefox, Edge, etc.) to control the browser. In our example, we’ll configure ChromeDriver for automation.
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
namespace BlazorApp.Tests
{
[TestClass]
public class BlazorAppTests
{
private IWebDriver driver;
[TestInitialize]
public void Setup()
{
driver = new ChromeDriver();
}
[TestMethod]
public void TestLoginPageNavigation()
{
// Login test
}
[TestCleanup]
public void Cleanup()
{
driver.Quit();
}
}
}
In the code above, we have the BlazorAppTests class marked with [TestClass], identifying it as an automated test class. We declare the driver variable of type IWebDriver, the main Selenium interface for controlling the browser.
The class has three parts:
Setup:
[TestInitialize]indicates that the method runs before each test. It initializes the Chrome browser for Selenium to control.Test:
[TestMethod]marks the test method where we’ll implement the login test, validating expected UI behavior.Cleanup:
[TestCleanup]runs after each test and handles cleanup, such as closing the browser.
Implementing the Tests
Now inside the TestLoginPageNavigation method, we’ll implement the login test:
driver.Navigate().GoToUrl("https://localhost:7298/");
Assert.IsTrue(driver.Title.Contains("Home"));
Here, we open the browser at our app’s URL using GoToUrl, then validate that the title contains “Home” to ensure successful navigation.
driver.FindElement(By.LinkText("Login")).Click();
Assert.IsTrue(driver.Url.Contains("Login"));
We use FindElement with By.LinkText("Login") to locate the “Login” link and simulate a click. We then verify that the browser navigated to the login page.
To fill in the login form:
var emailInput = driver.FindElement(By.XPath("/html/body/div[3]/div/div/div[1]/form/div/div[1]/div/div/div/input"));
var passwordInput = driver.FindElement(By.XPath("/html/body/div[3]/div/div/div[1]/form/div/div[2]/div/div/div/input"));
emailInput.SendKeys("nwe@email.com");
passwordInput.SendKeys("N3xtW@v3");
driver.FindElement(By.XPath("/html/body/div[3]/div/div/div[1]/form/div/div[4]/button")).Click();
We locate the email and password fields using XPath and fill them using SendKeys, then submit the form by clicking the login button.
To find an XPath, right-click the desired element in the browser, choose “Inspect”, then right-click in the Elements panel and choose “Copy” > “Copy full XPath”.
After clicking the login button, the application sends a request to the backend. This process may take a few seconds, so Selenium allows us to wait until a specific element is visible using WebDriverWait:
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
IWebElement element = wait.Until(driver => driver.FindElement(By.XPath("/html/body/div[3]/div/h3")));
In this example, Selenium waits up to 10 seconds for the element to appear, ensuring the page has fully loaded before continuing.
Conclusion
Selenium is a valuable tool for testing web application interfaces, offering automation and reliability in functional validation. By following best practices, you can build robust and maintainable tests.