Angular Support

Learn more about the BELLATRIX Angular support.

Example

[Test]
public void ShouldGreetUsingBinding()
{
    App.Navigation.Navigate("http://www.angularjs.org");
    var textField = App.Components.CreateByNgModel<TextField>("yourName");

    textField.SetText("Julie");

    var heading = App.Components.CreateByNgBinding<Heading>("yourName");

    heading.ValidateInnerTextIs("Hello Julie!");
}

[Test]
public void ShouldListTodos()
{
    App.Navigation.Navigate("http://www.angularjs.org");
    var labels = App.Components.CreateAllByNgRepeater<Label>("todo in todoList.todos");

    Assert.AreEqual("build an AngularJS app", labels[1].InnerText.Trim());
}

[Test]
public void Angular2Test()
{
    App.Navigation.Navigate("https://material.angular.io/");
    App.Browser.WaitForAngular();

    var button = App.Components.CreateByXpath<Button>("//a[@routerlink='/guide/getting-started']");
    button.Click();

    Assert.AreEqual("https://material.angular.io/guide/getting-started", App.Browser.Url.ToString());
}

Explanations

var textField = App.Components.CreateByNgModel<TextField>("yourName");

<input type="text" ng-model="yourName" placeholder="Enter a name here" class="ng-pristine ng-valid ng-empty ng-touched">

BELLATRIX can find elements through Angular locators, for example by the Angular ng-model attribute.

var heading = App.Components.CreateByNgBinding<Heading>("yourName");

Find element by Angular ng-binding.

var labels = App.Components.CreateAllByNgRepeater<Label>("todo in todoList.todos");

<li ng-repeat="todo in todoList.todos" class="ng-scope">

Find element(s) by Angular ng-repeat.

App.Browser.WaitForAngular();

If the automatic wait for Angular is turned off, you can tell the framework explicitly to wait.

Configuration

If you open the testFrameworkSettings.json file, you will find the property waitForAngular. If it is set to true, BELLATRIX automatically wait for Angular operations when a page is reloaded, or the element is found.

"webSettings": {
  "isParallelExecutionEnabled": "false",
  "artificialDelayBeforeAction": "0",
  "automaticallyScrollToVisible": "false",
  "waitUntilReadyOnElementFound": "false",
  "waitForAngular": "false",
  "shouldHighlightElements": "true",
  "shouldCaptureHttpTraffic": "false",
  "pathToSslCertificate": "path",

Available Create Methods

On top of all BELLATRIX element selectors you can find the following supporting Angular ones. They work on both ComponentCreationService and App.Components level.

CreateByNgBinding

App.Components.CreateByNgBinding<Anchor>("youName");

Searches the element by ng-binding locator.

CreateByNgModel

App.Components.CreateByNgModel<Anchor>("youName");

Searches the element by ng-model locator.

CreateByNgRepeater

App.Components.CreateByNgRepeater<Option>("youName");

Searches the element by ng-repeater locator.

CreateByNgSelectedOption

App.Components.CreateByNgSelectedOption<Option>("yourOption");

Searches the element by current selected Angular option.

You have similar methods for finding a list of elements.