Web Controls

Simple Controls

Over 30 well-known web controls with actions and properties that are most relevant to them.

Since WebDriver is not a test framework, it is written in most generic manner. All web elements share a common IWebElement interface- containing the same methods and properties. For example- you use SendKeys method to type text in the text field, to click a button using Enter key or upload a file. Or why do you need Click method for DIV or text field?

WebDriver example

IWebElement agreeCheckBox = driver.FindElement(By.Id("agreeChB"));
agreeCheckBox.Click();

IWebElement firstNameTextField = driver.FindElement(By.Id("firstName"));
firstNameTextField.SendKeys("John");

IWebElement avatarUpload = driver.FindElement(By.Id("uploadAvatar"));
avatarUpload.SendKeys("pathTo\myAvatar.jpg");

IWebElement saveBtn = driver.FindElement(By.Id("saveBtn"));
agreeCheckBox.SendKeys(Keys.Enter); 

One more thing, if you don’t use suffixes in the names of your variables or properties, you won’t know what type of elements they are. In the case that you want to perform specific verifications, this might be important. For example, anchor web elements cannot be disabled, although buttons can. BELLATRIX offers over 30 strongly-typed web controls such as: anchor, button, text field, checkbox, etc. Each specific control contains well-named actions and properties that are most relevant to it.

BELLATRIX Example

CheckBox agreeCheckBox = App.ElementCreateService.CreateById<CheckBox>("agreeChB");
agreeCheckBox.Check();

TextField firstNameTextField = App.ElementCreateService.CreateById<TextField>("firstName");
firstNameTextField.SetText("John");

InputFile avatarUpload = App.ElementCreateService.CreateById<InputFile>("uploadAvatar");
avatarUpload.Upload("pathTo\myAvatar.jpg");

Button saveBtn = App.ElementCreateService.CreateById<Button>("saveBtn");
saveBtn.ClickByEnter();

While reading the code, you can quickly find out the type of the elements since it is the first thing you see. Moreover, the specific action methods and properties make the code more self-explanatory.

Learn more

Complex Controls (Grid, Table)

Learn how to use BELLATRIX grid and table controls

The difference between a table and grid is that usually, the grids are more complex than a regular HTML table. In them, you can have dynamic data. Moreover, inside the column, you can have other HTML elements such as buttons, text fields, selects, other tables. Or you can filter, sort the columns, and have paging for the grid. Instead of getting specific cells or rows by custom locators- we have created the Table and Grid controls, which ease the selection of cells/rows and assertion of the data. Moreover, in many cases there isn’t a unique item which you can use to select the row/cell.

Table

private static Table Table => App.ElementCreateService.CreateById<Table>("table1")
    .SetColumn("Last Name")
    .SetColumn("First Name")
    .SetColumn("Email")
    .SetColumn("Due")
    ////.SetColumn("Web Site")
    .SetColumn("Action");

BELLATRIX gives you API for easing the work with HTML tables. Through the SetColumn you map the headers of the table if for some reason you don’t want some column, just don’t add it. The method returns a list of all rows’ data as C# data mapped to the map you provided. Since we haven’t the SetColumn for the WebSite- this property won’t be asserted if you use the AssertTable method.

Learn more

Grids

public Grid TestGrid => App.ElementCreateService.CreateById<Grid>("sampleGrid")
    .SetColumn("Order", typeof(TextField), Find.By.Tag("input"))
    .SetColumn("Firstname")
    .SetColumn("Lastname")
    .SetColumn("Email Personal")
    .SetColumn("Email Business")
    .SetColumn("Actions", typeof(Button), Find.By.Xpath("./input[@type='button']"));

BELLATRIX gives you API for easing the work with HTML grids. Through the SetColumn you map the headers of the table if for some reason you don’t want some column, just don’t add it. The method returns a list of all rows’ data as C# data mapped to the map you provided. Since we haven’t the SetColumn for the WebSite- this property won’t be asserted if you use the AssertTable method. You can get the cell converted to the element specified by the grid SetColumn method. Also, since some of this simple controls sometimes are wrapped inside DIV or SPAN elements, you can specify additional locator for finding the element.

Learn more

Try Now Bellatrix

Build up to 100 tests using full product capabilities.

Download