ANGULARJS Study Notes--E2E Testing

Original address: Http://docs.angularjs.org/guide/dev_guide.e2e-testing

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

To solve this problem, we set up the angular Scenario Runner, mimicking the user's actions and helping us to verify the robustness of the angular application.

First, Overall

We can write a scenario test (scenario test) in JavaScript that describes the behavior of our application and gives some interaction in a certain state. A scenario consists of one or more "it" blocks (which we can use as a requirement for our application), which in turn consists of command and expectation (expectation). Command tells runner to do something in the app (for example, to 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 of the expectation fail, then runner marks the "it" as "false" and then proceeds 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 or not.

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 (+);      Input (' FilterText '). Enter (' Bees ');      Expect (Repeater (' ul Li '). Count ()). Toequal (1);    });

This scenario describes the requirements of the network client and, clearly, it should have the ability to filter the user. It starts by entering a value into the "User" input box, clicking the only button on the page, and then verifying that there are 10 items in the list. It then enters "Bees" into the "filtertext" input box and verifies that the list is reduced to only one item.

The following API section lists the command and expectation available in runner.

Second, API

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

　　Pause ()

Pause the test until we call resume () in the console (you can also click the Resume link in the Runner interface)

　　

　　Sleep (seconds)

Pause the test execution for n seconds.

　　Browser (). NavigateTo (URL)

Loads the specified URL in the Tset frame.

　　Browser (). NavigateTo (URL,FN)

Loads the URL address of the FN returned in the test frame. The URL parameter here is only used as the test output. This API can be used when the destination URL is dynamic (when writing the test, 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 (does not contain #) of the current page of the test frame.

　　Browser (). location (). URL ()

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

　　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 with a specified value that is obtained after they have been executed. Matcher are defined using Angular.scenario.matcher, and they use the value of futures 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 for the specified matcher.

　　using (Selector,label)

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

Example:

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

　　Binding (name)

Returns the first binding that matches the specified name (perhaps associated with ng-bind).

　　Input (name). Enter (value)

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

　　

　　Input (name). Check ()

Select or uncheck the checkbox for the specified name.

　　Input (name). Select (Value)

Select the Input[type= "Radio" value in the radio that specifies name.

　　Input (name). Val ()

Returns the current value of input of the specified name.

　　Repeater (Selector,label). Count ()

Returns the number of rows of repeater 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 binds the row specified by the index in the repeater specified by selector (jQuery selector). The label is used only for test output.

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

　　Repeater (Selector,label). Column (Binding)

Returns an array with a value of selector (jQuery selector) matching the specified binding column in repeater. 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)

Select the option that specifies value in the selected select named Name.

　　Select (name). Option (value1,value2)

Select the option (multi-selection) that specifies value in the selection that specifies name.

　　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 a collection of elements that match the specified selector, and done is a function that executes after the FN executes. The label is used only as a test output.

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

Returns the return value of the method executed 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 specified selector-matched element, with key, value as the argument. 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 executing the specified method on the 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 the method on the specified selector-matched element and takes key, value as the parameter, which can be the following jquery method: Attr,prop,css. The label is used only as a test output.

　　

JavaScript is a dynamic type of language that brings powerful expressions of power, but it also gives us little help from the compiler. Therefore, we feel strongly that any code written in JavaScript requires extensive and comprehensive testing. Angular has many features that make it easier for us to test our applications. So we have no excuse not to write tests. (-_-!!)

ANGULARJS Study Notes--E2E Testing