About the Protractor

The Protractor is preceded by a brief introduction to end-to-end testing (E2E testing), which validates all layers of an application. This includes not only your front-end code, but all the associated back-end services and infrastructure that are more representative of the environment in which your users live. End-to-end testing is often key to improving confidence that an application is working properly by testing how user actions affect the application. Protractor is an end-to-end testing framework for Angular and AngularJS applications. It runs tests against applications running in real browsers and interacts with users with the following features.

Simulate the real user testing process

Protractor is built on top of WebDriverJS, which uses native events and browser-specific drivers to interact with users’ applications.

Angular supports friendliness

Protractor supports an Angular specific locator policy that lets you test Angular specific elements without setting anything up.

Automatic waiting

Instead of adding wait and sleep for tests, Protractor automatically executes the next step of the test after the page completes its pending task, so you don’t have to worry about waiting for the test to synchronize with the page.

Install the configuration

Install the Node

Protractor is a Node.js project that requires you to install the Node environment first.

Install the Jdk

Since the official documentation tutorial will run a local stand-alone Selenium server to control the browser for testing, you will need to install the Java Development Kit (JDK) to run the standalone Selenium server. This is the Jdk installation tutorial, after the installation is complete, you can run Java -version from the command line to check whether it is effective.

Install the Protractor

After configuring the base environment, you can install the Protractor framework body globally

npm install -g protractor
Copy the code

This command will install two tools, Protractor and webdriver-manager, and check if they are valid using the Protractor –version command. Webdriver-manager is a helper tool that makes it easy to get a running Selenium Server instance. You will need to download the necessary binaries with the following command:

webdriver-manager update
Copy the code

You can start the service now

webdriver-manager start
Copy the code

This will start the Selenium server and output a bunch of informational logs to which your Protractor test will send requests to control the local browser. Keep the server is running, you can view the information about the state of the server on http://localhost:4444/wd/hub.

The official case

Create an empty project folder and create two files in it, a test code file spec.js and a configuration file conf.js. Let’s start with a simple test, the test to jump to the sample AngularJS application and check its title, this is the sample test page address: “super calculator” juliemr. Making. IO/protractor -…

// spec.js
describe('Protractor Demo App'.function() {
  it('should have a title'.function() {
    browser.get('http://juliemr.github.io/protractor-demo/');

    expect(browser.getTitle()).toEqual('Super Calculator');
  });
});
Copy the code

Describe and IT syntax comes from the Jasmine framework, and Browser is a global variable created by Protractor to perform browser-level commands, such as navigation using browser.get.

// conf.js
exports.config = {
  framework: 'jasmine'.seleniumAddress: 'http://localhost:4444/wd/hub'.specs: ['spec.js']}Copy the code

This configuration tells Protractor which test frame (Framewrok), the name of the test file (spec), and the Selenuim Server address (selenuimAddress) to select. It specifies that we will use the Jasmine test framework, use the default Settings for all other configurations, and Chrome is the default browser.

Run Protractor to test Protractor conf.js you should see a Chrome browser window open and navigate to “Calculator”, then close itself. The test output should be one test, one assertion, and zero failures. Congratulations, you’ve run your first ProTractor test!

Syntax parsing

The core of the end-to-end testing of a web page is finding, interacting with, and getting information about the current state of the application. Here is the basic syntax for how to locate and perform operations on DOM elements using Protractor.

Locators

// Find elements by class
by.css('.myclass')

// Find elements by id
by.id('myid')

// Find elements by name
by.name('field_name')

// Find elements by ng-model
// Please note that only AngularJS apps currently support this feature
by.model('name')

// Find the element bound to the given variable
// Please note that only AngularJS apps currently support this feature
by.binding('bindingname')
Copy the code

The locator is passed to the Element function as follows:

element(by.css('some-css'));
element(by.model('item.name'));
element(by.binding('item.name'));
Copy the code

When using CSS selectors as locators, you can use the $() shortcut notation:

$('my-css');

// This is equivalent to:

element(by.css('my-css'));
Copy the code

Trigger event (Action)

The Element () function returns an ElementFinder object that knows how to use the locator you passed in as an argument to locate the DOM element, but has not actually done so yet, and does not contact the browser until the action method is called. The following are the most common trigger methods:

A single element

var el = element(locator);

// Click the element
el.click();

// Enter key values into elements (usually Input boxes).
el.sendKeys('my text');

// Clears the value of an element (usually an Input box).
el.clear();

// Obtain the attribute value, for example, the Input value
el.getAttribute('value');
Copy the code

Since all actions are asynchronous, all action methods return a Promise, so to record the text of the element, do the following:

var el = element(locator);
el.getText().then(function(text) {
  console.log(text);
});
Copy the code

Any action available in WebDriverJS on WebFinder can be used in ElementFinder to see the full listing.

List of elements

To process multiple DOM elements, use the element.all function with a locator as its only argument.

element.all(by.css('.selector')).then(function(elements) {
  // The finder gets an array element
});
Copy the code

Element.all () has several helper methods:

// The number of elements
element.all(locator).count();

// Get the element according to Index
element.all(locator).get(index);

// The first and last elements
element.all(locator).first();
element.all(locator).last();
Copy the code

When using CSS selectors as locators, you can use the $$() shortcut notation:

$$,'.selector');

// This is equivalent to:

element.all(by.css('.selector'));
Copy the code

Child elements

To find the child elements, simply link the element and element.all functions together, as follows:

Use a single locator to find:

An element:

  • element(by.css('some-css'));

Element list:

  • element.all(by.css('some-css'));

Use the link’s locator to find:

Child elements:

  • element(by.css('some-css')).element(by.tagName('tag-within-css'));

Find the list of child elements:

  • element(by.css('some-css')).all(by.tagName('tag-within-css'));

You can also use get/first/last as follows:

element.all(by.css('some-css')).first().element(by.tagName('tag-within-css'));
element.all(by.css('some-css')).get(index).element(by.tagName('tag-within-css'));
element.all(by.css('some-css')).first().all(by.tagName('tag-within-css'));
Copy the code