When the complexity and size of an application increase, it is impractical to rely on manual testing of the reliability, bug capture and regression testing of new features.
To solve this problem, we established Angular Scenario Runner to mimic user operations and help us verify the robustness of angular applications.
1. Summary
We can write scenario tests in javascript to describe the behavior of our application and to interact with certain states. A scenario consists of one or more "it" blocks (we can treat these as requirements for our application), which are composed in turn of commands and expectations. The command tells the Runner to do something in the application (such as going to a page or clicking a button), and the expectation tells the runner to judge something about state (such as the value of a certain domain or the current URL). If any expectation fails, runner tags this "it" as "false" and then continues with 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 include helper functions to avoid duplicate code in the "it" block.
Here is a simple scenario example:
describe('Buzz Client', function() { it('should filter results', function() { input('user').enter('jacksparrow'); element(':button').click(); expect(repeater('ul li').count()).toEqual(10); Input('filterText').enter('Bees'); expect(repeater('ul li').count()).toEqual(1); });});This scenario describes the requirements of the network client, and explicitly, it should have the ability to filter users. It starts by entering a value into the “user” input box, clicking the only button on the page, and then it verifying that there is a list of 10 items. Then, it enters "Bees" into the input box of "filterText" and then verify that the list will be reduced to only one item.
The following API chapter lists command and expectation available in Runner.
2. API
Source code: https://github.com/angular/angular.js/blob/master/src/ngScenario/dsl.js
pause()
Pause the execution of the test until we call resume() in the console (you can also click the resume link in the Runner interface)
sleep(seconds)
Pause test execution for N seconds.
browser().navigateTo(url)
Load the specified url in the setframe.
browser().navigateTo(url,fn)
Load the URL returned by fn in the test frame. The url parameter here is just used as the test output. This API can be used when the destination url is dynamic (the address is still unknown when writing tests).
browser().reload()
Refresh the currently loaded page in the test frame.
browser().window().href()
Return to 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()
Return to the window.location.search of the current page of the test frame.
browser().window().hash()
Returns the window.location.hash (not including #) of the current page of the test frame.
browser().location().url()
Return the result of $location.url() of the current page (http://docs.angularjs.org/api/ng.$location)
browser().location().path()
Return the result of $location.path() of the current page (http://docs.angularjs.org/api/ng.$location)
browser().location().search()
Return the result of $location of the current page. Search () (http://docs.angularjs.org/api/ng.$location)
browser().location().hash()
Return the result of $location. hash() of the current page (http://docs.angularjs.org/api/ng.$location)
expect(future).{matcher}
Determines whether the given future value satisfies the matcher. All API declarations return a future object with a specified value obtained after they are executed. The matcher is defined using angular.scenario.matcher, and they use the value of futures to execute the 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 the expected expectations of the specified matcher.
using(selector, label)
Scopes the next DSL element selection. (presumably limits the scope of the selector, label estimates are used for testing output)
example:
using('#foo', "'Foo' text field").input('bar')
binding(name)
Returns the first binding that matches the specified name (perhaps related to ng-bind).
input(name).enter(value)
Enter the specified value to the specified form field of name.
input(name).check()
Select or uncheck the checkbox of the specified name.
input(name).select(value)
Select input[type=”radio”] with the specified name's radio median value.
input(name).val()
Returns the current value of the input of the specified name.
repeater(selector,label).count()
Returns the number of rows of the repeater that matches the specified selector (jQuery selector). label is used only as test output.
repeater('#products table', 'Product List').count() //number of rows
repeater(selector,label).row(index)
Returns an array, binding the rows specified in the repeater matching the specified index. label is only used for testing output.
repeater('#products table', 'Product List').row(1) //all bindings in row as an array
repeater(selector,label).column(binding)
Returns an array with the value of the column in the repeater matching the specified binding that matches the specified selector (jQuery selector). label is only used for testing output.
repeater('#products table', 'Product List').column('product.name') //all values across all rows in an array
select(name).option(value)
Select the option to specify the value in the select of the specified name.
select(name).option(value1,value2)
Select the option (multiple choice) of the specified value in the select of the specified name.
element(selector,label).count()
Returns the number of elements matching the specified selector. label is used only as test output.
element(selector,label).click()
Click the element that matches the specified selector. label is used only as test output.
element(selector,label).query(fn)
Execute the specified fn (selectedElements, done), and selectedElement is the set of elements that match the specified selector; and done is a function that will be executed after the fn is executed. label is used only as test output.
element(selector,label).{method}()
Returns the return value of executing the method on the element matching the specified selector. The method can be the following jQuery methods: val, text, html, height, innerHeight, outerHeight, width, innerWidth, outerWidth, position, scrollLelft, scrollTop, offset. label is used only as test output.
element(selector,label).{method}(value)
Execute the specified method on the element matching the specified selector, and use the key and value as parameters. The method can be the following jQuery methods: val, text, html, height, innerHeight, outerHeight, width, innerWidth, outerWidth, position, scrollLelft, scrollTop, offset. label is used only as test output.
element(selector,label).{method}(key)
Returns the result of executing a specified method on the element matching the specified selector. These methods can be the following jQuery methods: attr, prop, css. label is used only as test output.
element(selector,label).{method}(key,value)
Execute method on the element matching the specified selector and take key and value as parameters. These methods can be the following jQuery methods: attr, prop, css. label is used only as test output.
JavaScript is a dynamically typed language that brings powerful expressions, but it also gives us little help from the compiler. Therefore, we strongly feel that any code written in javascript requires a lot of 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. (-_-!!)
The above is a collection of information about AngularJs E2E Testing. We will continue to add relevant information in the future. Thank you for your support for this site!