Manipulating page elements with Protractor

Protractor is an end-to-end test framework tailored to the angular JS application. It can actually drive the browser, automatically complete the test of the Web application. The Protractor driver Browser uses the Webdriver standard, so it is roughly the same as the Webdriver libraries implemented in other languages. Of course, I mean the same thing. There must be a different place. If you don't pay attention to these different places will pit to you (I have been successful in the pit, so I have this article).

The core of protractor writing tests is to find DOM elements, interact with them, and see if the state of the interaction is consistent with your expectations. So it's very important to find and interact with DOM elements. Protractor provides a global function element that accepts a locator object and returns a Elementfinder object. The function returns a single element. If you want to return multiple elements, you can use the Element.all function, which takes a locator object and returns the Elementarrayfinder object. The Elementfinder object has a set of methods for element interaction, such as Click (), GetText (), SendKeys, and so on.

The creation of the locator object primarily uses the global by object, which provides some APIs to generate locator objects for use by element or Element.all functions.

Like what:

1 2 3 4 5 6 7 8 9 Ten One A - -

//Find elements by class nameby . CSS ('MyClass') //Find elements by ID by.id (' myID ') //Find elements according to Ng-model nameby . Model ('name') //Find the element that binds the specified name by.binding (' bindingname ') //Find elements in the specified repeaterby . Repeater ('myrepeater')

As you can see, the first two locator are created in the same way as the webdriver used in other languages, and the latter are designed for ANGULARJS applications to find page elements in Web applications written under the ANGUALRJS framework. This is the first difference.

Another Webdriver library implemented in different languages uses locator to find the element type webelement, and Protractor returns the Elementfinder object. The difference is that the Elementfinder object does not immediately interact with the browser, finds the elements on the page according to the specified locator, and only when you invoke the method of the Elementfinder object, does it actually interact with the browser. Some of the commonly used methods are shown below.

1 2 3 4 5 6 7 8 9 Ten One A - - the - -

//This does not interact with the browser to get element information var el = element(by. CSS ('mycss')); //Click Elements el. Click ();//Enter content for this element el. SendKeys ('text'); //clear contents within element el. Clear ();//Gets the value of the specified property el. getattribute ('value'); //Gets the text value of the element el. GetText ();

Be aware that these methods are asynchronous. All methods return a promise (I have eaten this loss, thinking that the return is a value). So for example, if you want to output the value of an element, you should write this:

1 2 3

element(by.css(‘myclass’)).getText().then(function(text) { console.log(text);}):

If you use the Expect method to validate the value of an element, the expect method will help you remove the promise value, so you only write this:

1	expect(element(by.css(‘myclass’)).getText()).toEqual(‘确定’);

The difference is that Protractor supports chaining calls to element lookups. Such a feature is quite practical. You can combine element and element.all two functions to locate elements. And Protractor also provides several helper methods to make your use more convenient.

1 2 3

element. All (locator1). First (). element (locator2); element(locator1). All (locator2); element. All (locator1). Get (index). All (locator2);

The helper methods provided by the Element.all function are:

• Filter: Provides a filter that filters the elements.

1 2 3 4 5

element. All (by. CSS ('MyClass')). Filter (function(ele, index) { return ele. GetText (). Then (function(text) { return text = = ' OK '; });});

• Get: Gets the specified element based on the index. such as Element.all (By.css (' MyClass ')). Get (0);

• First: Gets the second element. Element.all (By.css (' MyClass ')). First ();

• Last: Gets the final element, as in the previous usage.

• Count: Gets the number of elements.

It also provides methods such as Each,map,reduce to perform various operations on the list.

The auxiliary methods provided by the element function are:

• Locator: Returns the locator object.

• Getwebelement: Returns the Webelement object for the Elementfinder package.

• All: Finds one of its set of child elements.

• Element: finds its child elements.

• IsPresent: Whether the element is displayed on the page.

To sum up, the difference between protractor and other Webdriver languages is as follows:

1. Protractor is specifically designed for ANGUALRJS applications, which itself contains many wait operations, ensuring that the Angularjs script is completed before the next step, ensuring the stability and robustness of the test.

2. The by object designed by Protractor provides a number of practical methods for ANGULARJS applications, which makes it easier to define ANGULARJS application pages.

3. The element function returns a Elementfinder object that does not immediately interact with the browser unless the method of the Elementfinder object is called.

4. The method that calls the Elementfinder object returns a promise. (This is important)

5. Protractor supports chained calls when locating elements.

Manipulating page elements with Protractor