In the previous article, I talked about unit tests of ng. Today I will talk about e2e (end-to-end) testing.
When we test a single functional point of a certain module, unit testing is most suitable. However, when a bug occurs when a user interacts with multiple pages, unit testing will not work. At this time, e2e has to be used to simulate user operations and restore the problem site. Of course, using e2e test can also test the robustness of the program. Many things that unit testing cannot be done by e2e tests.
Previously, ng used Angular Scenario Runner to run e2e tests, and now it has been replaced with Protractor to run e2e.
Protractor
Protractor is a framework used in Angularjs to test e2e. It itself is an npm module and is built on WebDriverJS. Protractor can truly enable your test cases to run on the browser and completely simulate the real behavior of users.
Here are some of its resource addresses:
1. Test API provided by Protractor
2. Simple use example of Protractor
3. WebDriverJs guide, this is the core of Protractor dependency, the npm module is called selenium-webdriver
Protractor operation principle
Protractor depends on the following things to run e2e tests:
1. WebDriver APIs, which are the WebDriverJs mentioned above, are related js APIs provided by Selenium to front-end testing.
2. Selenium Server, a backend jar package, is used to communicate with the browser driver
3. WebDriver browser drivers are used to display real website content and communicate with Selenium Server. This is the place to pass on real browser operations.
The entire operation process is as follows
If you want to know more about the previous interactions of these components, please click here
Use ng seed project to explain e2e
We use the seed project provided by ng to explain a real e2e example. First, use the following command to obtain the seed project
The code copy is as follows:
git clone https://github.com/angular/angular-seed.git
Then run
The code copy is as follows:
npm install
Install all dependencies related to
Here we will first talk about the configuration file required to run the e2e test. You can see that the test/protractor-conf.js file is used to configure related functions. Let’s focus on several attributes
1.specs represents the path of the test file to be run, and the one written here is e2e/*.js
2.baseUrl represents the root address of the page jump between browsers in the test file
3. Capabilities represents which browser to use to run test cases, such as using Chrome, you can set it like this
The code copy is as follows:
capabilities: {
'browserName': 'chrome'
}
framework represents which test framework to use, here is jasmine
If you want to know more about this configuration file, please click here to view it.
After talking about the configuration file, let’s take a look at the way to write test cases and post an example on the official website first.
The code copy is as follows:
'use strict';
/* https://github.com/angular/protractor/blob/master/docs/getting-started.md */
describe('my app', function() {
browser.get('index.html');
it('should automatically redirect to /view1 when location hash/fragment is empty', function() {
expect(browser.getLocationAbsUrl()).toMatch("/view1");
});
describe('view1', function() {
beforeEach(function() {
browser.get('index.html#/view1');
});
it('should render view1 when user navigates to /view1', function() {
expect(element.all(by.css('[ng-view] p')).first().getText()).
toMatch(/partial for view 1/);
});
});
describe('view2', function() {
beforeEach(function() {
browser.get('index.html#/view2');
});
it('should render view2 when user navigates to /view2', function() {
expect(element.all(by.css('[ng-view] p')).first().getText()).
toMatch(/partial for view 2/);
});
});
});
First of all, the syntax above is the writing method supported by the jasmine framework. If you don’t understand its usage, you can click here
Here we will only talk about some common methods and properties provided by protractor in the above example
1.browser, a global object, represents an instance of the current browser. The commonly used get method is used to implement the browser's address change.
2. Element, global object, provides functions such as jquery that are responsible for finding document elements, and are often used in joint use by objects.
3.by, global object, provides a selector type, for example, you can find an element through css, model, bind and other features.
For the method of element and by, please refer to the above protractor API documentation
Having said so much, it's time to run the above test cases, the command is relatively simple
The code copy is as follows:
npm run update-webdriver
This is responsible for downloading the relevant browser drivers and selenium-server local jar packages. Generally, this will fail because both resources are on the Google server, so you can use the browser to browse the wall to download it separately. The address is as follows:
1. Chrome Driver address, generally download the chromedriver_2.9.zip file.
2. Download the local jar package of selenium-server, generally download the selenium-server-standalone-2.40.0.jar file.
Then copy the selenium-server to the selenium folder in the protractor package. If the above command timed out, the file will appear here, but it will be empty, just replace it directly. You also need to copy the file after decompression of chromedriver_2.9.zip to here.
Finally, run the following command to see the test results
The code copy is as follows:
npm run protractor
If you want to know more about the command line in the ng seed project, you can click here to view it
Summarize
The ng e2e test is much more complicated than the unit test configuration, but it can do a lot of things. If you are very worth it, you can also try it. If you have any questions, you can reply to the comments.