0

I've recently added end-to-end tests using Protractor to my AngularJS application. I've run the tests locally and they all pass, however when I commit to GitHub and Travis for CI most of the tests fail.

I've noticed that the failing tests are those that require routing to other states (I'm using Angular UI Router).

scenarios.js

describe('Test', function () {

    beforeEach(function () {
        browser.get('/');
    })

    it('should open the user page', function () {

        //browser.get("/");
        browser.sleep(3000);
        var button = element(by.id('createSession'));
        button.click().then(function () {
            browser.sleep(3000);
            expect(browser.getLocationAbsUrl()).toEqual("/user");
        });
    });

    it('should create a session and add a user', function () {

        //browser.get("/");
        browser.sleep(3000);
        var button = element(by.id('createSession'));
        button.click();
        browser.sleep(3000);
        var input = element(by.id('username'));
        input.sendKeys('Simona');
        var joinButton = element(by.id('joinSession'));
        joinButton.click();
        browser.sleep(3000);
        expect(element(by.id('addStart')).isPresent()).toBe(true);

    });

    it('should join an existing session', function () {

        //browser.get("/");
        browser.sleep(3000);
        var inputSession = element(by.id('sessionId'));
        inputSession.sendKeys('testing123');
        var joinSessionBtn = element(by.id('enterSession'));
        joinSessionBtn.click();
        browser.sleep(3000);
        var input = element(by.id('username'));
        input.sendKeys('Simona1');
        var joinButton = element(by.id('joinSession'));
        joinButton.click();
        browser.sleep(3000);
        expect(element(by.id('addStart')).isPresent()).toBe(true);

    });

    it('should add user to active users', function () {

        //browser.get("/");
        browser.sleep(3000);
        var inputSession = element(by.id('sessionId'));
        inputSession.sendKeys('testing123');
        var joinSessionBtn = element(by.id('enterSession'));
        joinSessionBtn.click();
        browser.sleep(3000);
        var input = element(by.id('username'));
        input.sendKeys('Simona');
        var joinButton = element(by.id('joinSession'));
        joinButton.click();
        browser.sleep(3000);
        var user = element(by.id('Simona'));
        expect(user.isPresent()).toBe(true);

    });

    it('should not join a non-existing session', function () {

        //browser.get("http://localhost:8000/");
        browser.sleep(3000);
        var inputSession = element(by.id('sessionId'));
        inputSession.sendKeys('simonovaSesija');
        var joinSessionBtn = element(by.id('enterSession'));
        joinSessionBtn.click();
        browser.sleep(3000);
        var warning = element(by.id('warningSession')).isDisplayed();
        expect(warning).toBe(true);

    });


    it('should add an anonymous user on empty username input', function () {

        //browser.get("http://localhost:8000/");
        browser.sleep(3000);
        var inputSession = element(by.id('sessionId'));
        inputSession.sendKeys('testing123');
        var joinSessionBtn = element(by.id('enterSession'));
        joinSessionBtn.click();
        browser.sleep(3000);
        var input = element(by.id('username'));
        input.sendKeys('');
        var joinButton = element(by.id('joinSession'));
        joinButton.click();
        browser.sleep(4000);
        var user = element(by.id('Anonymous'));
        expect(user.isPresent()).toBe(true);

    });

});

protractor.conf.js

    exports.config = {

      allScriptsTimeout: 11000,

      specs: [
        "scenarios.js"
      ],

      capabilities: {
        "browserName": "chrome"
      },

      baseUrl: "http://localhost:8000/",

      framework: "jasmine",

      jasmineNodeOpts: {
        defaultTimeoutInterval: 30000
      }

    };

package.json

    {
      "name": "angular-seed",
      "private": false,
      "version": "0.0.0",
      "description": "A starter project for AngularJS",
      "repository": "https://github.com/angular/angular-seed",
      "license": "MIT",
      "devDependencies": {
        "bower": "^1.7.7",
        "http-server": "^0.9.0",
        "jasmine-core": "^2.4.1",
        "karma": "^0.13.22",
        "karma-chrome-launcher": "^0.2.3",
        "karma-firefox-launcher": "^0.1.7",
        "karma-jasmine": "^0.3.8",
        "karma-junit-reporter": "^0.4.1",
        "protractor": "^3.2.2"
      },
      "scripts": {
        "postinstall": "bower install",
        "prestart": "npm install",
        "start": "http-server -a localhost -p 8000 -c-1 ./app",
        "pretest": "npm install",
        "test": "karma start karma.conf.js",
        "test-single-run": "karma start karma.conf.js --single-run",
        "preupdate-webdriver": "npm install",
        "update-webdriver": "webdriver-manager update",
        "preprotractor": "npm run update-webdriver",
        "protractor": "protractor e2e-tests/protractor.conf.js",
        "update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+'    //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
      },
      "dependencies": {
        "bower": "^1.7.9",
        "express": "^4.14.0"
      }

}

.travis.yml

language: node_js
node_js:
  - '4.4'

addons:
  firefox: "latest"

# blocklist
branches:
  except:
    - master

# safelist
branches:
  only:
    - dev

before_script:
  - export CHROME_BIN=chromium-browser
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
  - npm start > /dev/null &
  - npm run update-webdriver
  - sleep 1 # give server time to start

script:
  - node_modules/.bin/karma start karma.conf.js --no-auto-watch --single-run --reporters=dots
  - node_modules/.bin/protractor e2e-tests/protractor.conf.js

As you can see, I'm using angular-seed's Angular template.

Any suggestions on why this is happening?

Andrej Naumovski
  • 573
  • 2
  • 9
  • 23

1 Answers1

1

It would be most helpful to know what kind of errors you're getting, but regardless, you've got a couple obvious culprits...

  1. CI is running headless (ie. via XVFB), your local is not. The two will have different timing issues.
  2. You have a lot of sleeps, which can cause your tests to behave differently on different environments (eg. CI vs. local). This is one of the reasons sleeps are bad. This would also lead me to believe your app is not Angular? If that is true, then it's better to handle any waits yourself. If that is not true, then why all the sleeps?

Hope that helps a bit.

Brine
  • 3,733
  • 1
  • 21
  • 38
  • The app is Angular, the sleeps were added later to the code when the original build failed, I thought that it might have something to do with not loading the page etc. I will try removing the sleeps and re-configuring Travis and see what happens. – Andrej Naumovski Jul 25 '16 at 08:01