Latest updates in your mailbox

Getting Started with BELLATRIX in 15 Minutes

1. Install BELLATRIX Following UI Installer Wizard

1.1 Click Next

1.2 Accept End-User License Agreement and click Next.

1.3 Select BELLATRIX modules you would like to install and proceed with.

1.4 Click Install and agree to run the installer with Administrative permissions.

1.5 Wait for the installation to finish.

Note

You can also install BELLATRIX through the command line on Windows, MacOS and Linux.

Note

Since BELLATRIX is a set of C# libraries and tools (it isn’t a UI tool or IDE), you need programming knowledge on how to write C# code. To write tests, we use the standard .NET code editors- Visual Studio or Visual Studio Code . The suggested one for beginners is Visual Studio since it is more visual and easier to use. For this tutorial, I will use Visual Studio.

2. Open a New Instance of Visual Studio IDE and Click The Create a New Project Button.

2.1 Search for ‘bellatrix web’.

2.2 Select Bellatrix.Web.NUnit.Tests template and click Next.

2.3 Choose the location where the project will be created. Set project and solution name. Click Create.

Now you have a preconfigured BELLATRIX web test project. You can start writing web tests immediately. How about creating our web login automated test?

3. Open BellatrixSampleTests.cs file. Rename The File and The Class To BellatrixLoginTests.cs

3. Open BellatrixSampleTests.cs file. Rename the file and the class to BellatrixLoginTests.cs.

3.1 Change the browser type to Chrome- this way- our tests will be executed in the Chrome browser instead of in Edge

3.2 Next, our login is located on the http://demos.bellatrix.solutions/my-account/ URL, so we need to open it before each test. Change the URL in the App.NavigationService.Navigate method. Here is how our code will look:

[TestFixture]
[Browser(BrowserType.Chrome, BrowserBehavior.ReuseIfStarted)]
public class BellatrixLoginTests : WebTest
{
    public override void TestInit() => App.NavigationService.Navigate("http://demos.bellatrix.solutions/my-account/");

    [Test]
    public void CorrectTextDisplayed_When_ClickDownloadButton()
    {
        var downloadButton = App.ElementCreateService.CreateByInnerTextContaining<Anchor>("Download");

        downloadButton.Click();

        var heading1 = App.ElementCreateService.CreateById<Heading>("feature-title");

        heading1.EnsureInnerTextIs("Download");
    }
}

The TestInit method will be executed before each method marked with the Test attribute, which means that you don’t need to write a code for navigating to the page in each test.

3.3 Rename CorrectTextDisplayed_When_ClickDownloadButton test method to SuccessfullyLoggedIn_When_DefaultCredentialsUsed. Delete the body of the method. Here we will place our login test logic.

3.4 To log in to the shop’s my account, we need to set the username and password fields. Then click the ‘Log in’ button and verify somehow that we are logged in. To fill the info in the fields, we need to use BELLATRIX to locate and ‘create’ them on the page. After a component (button, text field, select, etc.) is found, you can perform actions against it- set text, clicking, and so on. First, we need to find the most appropriate way to locate the elements to do so load the http://demos.bellatrix.solutions/my-account/ page in a new Chrome browser tab. And Chrome Developers tools, which we will use to inspect the web page elements HTML and choose the best possible locator.

3.5 Now, why not find the locator for the username field? Click in the username field and right-click. From the menu, choose Inspect.

3.6 The inspected element will be highlighted in the Elements window.

Note

To be able to write any kind of automated web tests, you need to have basic HTML knowledge, and I won’t go in many details about the different types of locators here.

3.7 Usually, the best possible way to find a web element is to use its ID if there is one. Luckily for us, the username text field has an ID. Find it in the Elements window and copy it.

3.8 Next, we need to instruct BELLATRIX to create the username control using the copied ID. We will save the control in a variable which we use later to set the text into the control. To do so, use the following code:

TextField userNameField = App.ElementCreateService.CreateById<TextField>("username");

We create the userNameField variable of type TextField. Then we create the element using BELLATRIX ElementCreateService. It gives us the method CreateById, and there are many other similar methods for using the different types of locators such as CSS, XPath, Class, and so on. In the <> brackets, we need to point the type of the component that we want to be created in our case- TextField. This is essential since each component provides unique to its methods and properties. For example, the Button component doesn’t have a method SetText, but the TextField does. Lastly, as a parameter to the CreateById method, set the copied ID- “username”.

3.9 We need to create the password and button components, too, following the same procedure. You will end up with the following code:

[Test]
public void CorrectTextDisplayed_When_ClickDownloadButton()
{
    TextField userNameField = App.ElementCreateService.CreateById<TextField>("username");
    Password passwordField = App.ElementCreateService.CreateById<Password>("password");
}

3.10 The next step is to set our credentials to the username and password fields. If you use the new userNameField variable and type ‘.’ after it, Visual Studio will show you all of its available actions and properties that are at your disposal.

For setting the username, we can use the SetText method.

userNameField.SetText("info@berlinspaceflowers.com");
You have a similar method for the password field called SetPassword.
passwordField.SetPassword("@purISQzt%%DYBnLCIhaoG6$");

3.11 Lastly, we need to locate the login button. Inspect the ‘Log in’ button.

You will notice that the button doesn’t have an ID attribute. We can use the XPath selector to locate the element. An easy way to find element’s XPath is by right-clicking on the element’s HTML in the Developer Tools and clicking Copy XPath.

However, in most cases, it is better to write the XPath yourself since the one generated is not the optimal one and can lead to failure of the tests over time. This is the XPath generated by Chrome- //*[@id=”post-8″]/div/div/form/p[3]/button. I rewrote it to use the name attribute of the button- //button[@name=’login’]

Button loginButton = App.ElementCreateService.CreateByXpath<Button>("//button[@name='login']");

3.12 Write a code to click on the ‘Log in’ button. Just call the Click method of the loginButton variable.

loginButton.Click();

3.13 If the login process is successful, the following screen should be displayed.

We need to make sure that the right user succeeded in logging in. To do so, we need to add a verification step. The most appropriate info that we can check is whether the correct ‘Hello’ message is displayed. In our case- ‘Hello info1’. Our second assertion might be whether the log out button is visible.

3.14 Inspect the “Hello info1” label. You will notice that it is wrapped in an HTML div element that holds the whole information in this part of the screen. We can create such Div component with BELLATRIX and then assert that it contains the ‘Hello info1’ text. However, as you can see, we don’t have an ID for this element. However, we can find it using its class- woocommerce-MyAccount-content. You should be careful using classes since, in many cases, there is more than one element that can be returned for a class. You can check whether this is the case by pressing ctrl + F and pasting the class in the search field.

Only one result is returned, which means that this class is unique, and we can use it safely as a selector.

Div myAccountContentDiv = App.ElementCreateService.CreateByClass<Div>("woocommerce-MyAccount-content");

3.15 Verify the ‘Hello’ message. Each BELLATRIX component exposes several relevant verification methods called- ‘Ensure’ methods. They are more than a normal assertion method since it will wait a bit for the condition to happen in case of asynchronous requests and additionally will display a beatified message in case of failure. In our case, you can call the EnsureInnerTextContains method of the myAccountContentDiv variable.

myAccountContentDiv.EnsureInnerTextContains("Hello info1");

3.16 Finally, how about locating the logout link? Inspect the link.

The best option we have is to locate the anchor by its inner text ‘Log out’. To do so, we can use another BELLATRIX method called CreateByInnerTextContaining.

Anchor logoutLink = App.ElementCreateService.CreateByInnerTextContaining<Anchor>("Log out");

3.17 Assert that the log out link is visible- call the EnsureIsVisible method of the logoutLink variable.

logoutLink.EnsureIsVisible();

Here is how our code looks in the end:

[TestFixture]
[Browser(BrowserType.Chrome, BrowserBehavior.ReuseIfStarted)]
[VideoRecording(VideoRecordingMode.DoNotRecord)]
[ScreenshotOnFail(true)]
public class BellatrixLoginTests : WebTest
{
    public override void TestInit() => App.NavigationService.Navigate("http://demos.bellatrix.solutions/my-account/");

    [Test]
    public void CorrectTextDisplayed_When_ClickDownloadButton()
    {
        TextField userNameField = App.ElementCreateService.CreateById<TextField>("username");
        Password passwordField = App.ElementCreateService.CreateById<Password>("password");
        Button loginButton = App.ElementCreateService.CreateByXpath<Button>("//button[@name='login']");

        userNameField.SetText("info@berlinspaceflowers.com");
        passwordField.SetPassword("@purISQzt%%DYBnLCIhaoG6$");
        loginButton.Click();

        Div myAccountContentDiv = App.ElementCreateService.CreateByClass<Div>("woocommerce-MyAccount-content");
        myAccountContentDiv.EnsureInnerTextContains("Hello info1");

        Anchor logoutLink = App.ElementCreateService.CreateByInnerTextContaining<Anchor>("Log out");

        logoutLink.EnsureIsVisible();
    }
}

4. Run The Automated Test

4.1 Build the BELLATRIX NUnit project

4.2 Open Text Explorer and select your test. Right-click and click Run.

4.3 (Optional) If you have a newer version of the browser compared to the one installed to the template. The following error might show up:

You need to install the proper BELLATRIX package version based on your installed version of Chrome.

4.3.1 Check your Chrome version. On my machine, I have Chrome version 79, but as you can see from the error message, the installed BELLATRIX package supports version 77.


4.3.2 Update the Bellatrix.Web.Chrome package to the right version. Right-click on the project and click on the “Manage NuGet Packages” menu item.

Select the Installed tab and search for “chrome”. Select Bellatrix.Web.Chrome package.

From the Version: dropdown select the version that is equal to your installed browser’s version and click Update.

4.4 Run again the failed test

Congratulations! You have just written your first BELLATRIX web test in a couple of minutes!