Angularjs e2e Testing Detailed _angularjs

When the complexity and size of an application increases, it is impractical to rely on manual testing of the reliability of new features, bug-catching and regression testing.

In order to solve this problem, we have established angular scenario Runner, imitate the user's operation, help us to verify the robustness of the angular application.

First, the overall

We can write the scenario test (scenario Test) in JavaScript, describe the behavior of our application and give some interaction in some state. A scenario consists of one or more "it" blocks (which we can use as a requirement for our application), followed by commands (command) and expectations (expectation). Command tells runner to do something in the application (such as go to a page or click a button), expectation tells runner to judge something about the state (such as the value of a field or the current URL). If any expectation fails, then runner marks this "it" as "false" and then continues to the next "it". Scenario can also have "Beforeeach" and "Aftereach" blocks that run before or after each "it" block, regardless of whether it passes.

In addition to the above elements, scenario can also contain helper function to avoid duplicate code in the "it" block.

Here is a simple example of scenario:

Describe (' Buzz Client ', function () {
 It (' Should filter results ', function () {
  input (' user '). Enter (' Jacksparrow ');
  Element (': Button '). Click ();
  Expect (Repeater (' ul Li '). Count ()). Toequal (a);
  Input (' FilterText '). Enter (' Bees ');
  Expect (Repeater (' ul Li '). Count ()). Toequal (1);
 });

This scenario describes the requirements of the network client, specifically, it should have the ability to filter the user. When it starts, enter a value into the "User" input box, click the only button on the page, and then verify that there are 10 list of items. It then enters the "Bees" into the "filtertext" input box, and then verifies that the list is reduced to just one item.

The following API chapters list the command and expectation that are available in runner.

Second, the API

Source code: Https://github.com/angular/angular.js/blob/master/src/ngScenario/dsl.js

Pause ()

Pause execution of the test until we call resume () in the console (or click the Resume link in the Runner interface)

Sleep (seconds)

Pause the test execution n seconds.

Browser (). NavigateTo (URL)

Loads the specified URL in the Tset frame.

　Browser (). NavigateTo (URL,FN)

Loads the URL address returned by FN in the test frame. The URL parameter here is used only as a test output. This API can be used when the destination URL is dynamic (when the test is written, the address is unknown).

Browser (). Reload ()

Refreshes the currently loaded page in the test frame.

　Browser (). window (). href ()

Returns the window.location.href of the current page of the test frame.

Browser (). window (). Path ()

Returns the window.location.pathname of the current page of the test frame.

Browser (). window (). Search ()

Returns the window.location.search of the current page of the test frame.

Browser (). window (). hash ()

Returns the Window.location.hash of the current page of the test frame (not including #).

Browser (). location (). URL ()

Returns the result (Http://docs.angularjs.org/api/ng. $location) of the $location.url () of the current page of the test frame.

　Browser (). location (). Path ()

Returns the $location of the current page of the test frame. return result of Path () (Http://docs.angularjs.org/api/ng. $location)

　Browser (). Location (). Search ()

Returns the $location of the current page of the test frame. return result of Search () (http://docs.angularjs.org/api/ng. $location)

　Browser (). Location (). Hash ()

Returns the $location of the current page of the test frame. Return result of Hash () (Http://docs.angularjs.org/api/ng. $location)

　　Expect (future). {Matcher}

Determines whether a given expectation (future) value satisfies matcher. All API declarations return a future object that gets the specified value after they have finished executing. Matcher are defined using Angular.scenario.matcher, and they use futures values to perform expectation. For example:

expect (browser (). location (). href ()). Toequal (' http://www.google.com ');

Expect (future). Not (). {Matcher}

Determines whether the value of a given future is the opposite of what is expected from a specified matcher.

　using (Selector,label)

　　Scopes the next DSL element selection. (Presumably the scope of the qualifier selector, the label estimate is used to test the output)

Example:

using (' #foo ', ' ' foo ' Text field '). Input (' bar ')

　Binding (name)

Returns the first binding (perhaps related to ng-bind) that matches the specified name.

　Input (name). Enter (value)

Enter the form field specified by the specified value to name.

　　Input (name). Check ()

Select or uncheck the checkbox for the specified name.

　　Input (name). Select (Value)

Select Input[type= "Radio" with value in the radio of the specified name.

　Input (name). Val ()

Returns the current value of input for the specified name.

　　Repeater (Selector,label). Count ()

Returns the number of repeater rows that match the specified selector (jQuery selector). The label is used only as a test output.

repeater (' #products table ', ' Product List '). Count ()//number of rows

　Repeater (Selector,label). Row (Index)

Returns an array that specifies the row for index in repeater that matches selector (jQuery selector). The label is used only for test output.

repeater (' #products table ', ' Product List '). Row (1)//all bindings in row as a array

Repeater (Selector,label). Column (Binding)

Returns an array of columns that match the specified binding in a repeater that matches the specified selector (jQuery selector). The label is used only for test output.

repeater (' #products table ', ' Product List '). Column (' Product.name ')//all values across all rows in an array

　Select (name). option (value)

Selects option with the specified value in the select of the specified name.

　Select (name). Option (value1,value2)

Select option with the specified value in the select of the specified name (multiple selections).

　　Element (Selector,label). Count ()

Returns the number of elements that match the specified selector. The label is used only as a test output.

　Element (Selector,label). Click ()

Click the element that matches the specified selector. The label is used only as a test output.

　Element (Selector,label). Query (FN)

Executes the specified FN (selectedelements,done), Selectedelement is the set of elements that match the specified selector, and the done is a function that executes after the FN has finished executing. The label is used only as a test output.

　Element (Selector,label). {Method} ()

Returns the return value of method execution on the element that matches the specified selector. Method can be the following jquery methods: Val, text, HTML, height, innerheight, outerheight, Width, innerwidth, outerwidth, Position, Scrolllelft, scrolltop, offset. The label is used only as a test output.

　　Element (Selector,label). {Method} (value)

Executes the specified method on the element that specifies the selector match, with key, value as the parameter. Method can be the following jquery methods: Val, text, HTML, height, innerheight, outerheight, Width, innerwidth, outerwidth, Position, Scrolllelft, scrolltop, offset. The label is used only as a test output.

Element (Selector,label). {Method} (key)

Returns the result of a specified method that is executed on a specified selector matching element, which can be the following jquery method: Attr,prop,css. The label is used only as a test output.

Element (Selector,label). {Method} (Key,value)

Executes method on the specified selector matching element and takes key and value as parameters, which can be the following jquery method: Attr,prop,css. The label is used only as a test output.

JavaScript is a dynamically typed language that brings a powerful expression, but it also gives us little help from the compiler. As a result, we are acutely aware that any code written in JavaScript requires extensive, comprehensive testing. Angular has many features that allow us to test our applications more easily. So we have no excuse not to write tests. (-_-!!)

The above is the ANGULARJS e2e testing data collation, follow-up continue to increase the relevant information, thank you for your support of this site!