Configure e2e tests on local machine

https://www.protractortest.org

Write end-to-end tests

For writing e2e tests we will use the same Jasmine framework with Protractor test runner. It requires java to run selenium, if you have not installed java, you need to install it. Also it uses node package http-server to load pages on the project.

1. Install protractor and http-server globally:

npm install -g protractor http-server

2. End-to-end tests usually are located in a separate folder named e2e-tests. In this folder create scenarios.js file that will contain e2e tests. Since protractor uses Jasmine, the syntax of e2e tests are the same as in unit tests:

e2e-tests/scenarios.js

describe("Sample project", () => {

    describe("the main page", () => {
        let result,
            num1,
            num2,
            btn;

        beforeAll(() => {
            // it's not an Angular project
            browser.waitForAngularEnabled(false);
        });

        beforeEach(() => {
            browser.get("index.html");
            result = element(by.id('sum_result'));
            num1 = element(by.id('input_number_1'));
            num2 = element(by.id('input_number_2'));
            btn = element(by.id("sum_button"));
        });

        it('should show empty result', () => {
            expect(result.getText()).toEqual("");
        });

        it('should show 3', () => {
            num1.sendKeys('1');
            num2.sendKeys('2');
            btn.click();
            expect(result.getText()).toEqual("3");
        });

        it('should show 0', () => {
            num1.sendKeys('1');
            num2.sendKeys('-1');
            btn.click();
            expect(result.getText()).toEqual("0");
        });
    });
});

3. Create a protractor configuration file e2e-tests/protractor.conf.js:

exports.config = {
    allScriptsTimeout: 11000,
    specs: [
        '*.js'
    ],
    exclude: [
        '*.conf.js'
    ],
    capabilities: {
        'browserName': 'chrome',
    },
    baseUrl: 'http://localhost:8000/',
    framework: 'jasmine',
    jasmineNodeOpts: {
        defaultTimeoutInterval: 30000
    }
};

4. Add protractor command to package.json. Protractor requires running http server to load pages, so add start command as well:

"scripts": {
   "test": "karma start karma.conf.js",
   "protractor": "protractor e2e-tests/protractor.conf.js",
   "start": "http-server . -a localhost -p 8000 -c-1"
}

5. Download and install web drivers for selected browser by following command:

webdriver-manager update

6. Run http server in the second terminal:

npm start

7. Run protractor:

npm run protractor

If all tests passed result will be like this:

> js-frontend-tutorial@1.0.0 protractor /home/taras/Work/js-frontend-tutorial
> protractor e2e-tests/protractor.conf.js

[16:50:32] I/launcher - Running 1 instances of WebDriver
[16:50:32] I/local - Starting selenium standalone server...
[16:50:32] I/local - Selenium standalone server started at http://192.168.88.46:46910/wd/hub
Started
...


3 specs, 0 failures
Finished in 0.656 seconds

[16:50:34] I/local - Shutting down selenium standalone server.
[16:50:34] I/launcher - 0 instance(s) of WebDriver still running
[16:50:34] I/launcher - chrome #01 passed