Cannot get protractor to wait for existing item to be clickable (condition.elementToBeClickable)

Question

We have an Angular 1.5 application in which there is a login screen, nothing has been changed in the application code or in our tests. we use a protractor (with horseradish protractor, etc.)
versions:

  "dependencies": {
    "async": "^0.9.0",
    "chalk": "^1.1.1",
    "fs-extra": "^0.24.0",
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-protractor-runner": "^4.0.0",
    "grunt-protractor-webdriver": "^0.2.5",
    "jshint-stylish": "^1.0.0",
    "load-grunt-tasks": "~3.1.0",
    "lodash": "^2.4.1",
    "log4js": "^0.6.21",
    "protractor": "^4.0.11",
    "selenium-webdriver": "^3.0.1"
  }

All our tests are in the following format:

• enter the app and sleep

• tests (he). each of them receives the done () function, which is called at the end of the test from the browser .sleep ('1000'), and then the promise is made (jasmine syntax).

  describe('login', function () {
      browser.get('/');
      components.login.loginDefault();
      console.log('done login');
      browser.driver.manage().window().maximize(); // just in case the driver wont reach the '.add-new-type' button 
      browser.sleep(1000);
  });
  
  describe('post login', function () {
      it('just a test for after user loged in', function (done) {
          console.log('post login');
          const ec = protractor.ExpectedConditions;
          const getStarted = element(by.css('.add-new-type')); // just a button appears on the next page
          console.log('getStarted ' + JSON.stringify(getStarted));
          browser.wait(ec.elementToBeClickable(getStarted), 5000);
          console.log('post wait');
          browser.sleep(5000).then(done);
     })});  
  

, , , ( ) , -

Session created: count=1, browserName=chrome, chromeOptions={args=[--no-sandbox, --test-type=browser, --disable-extensions], prefs={download={default_directory=./e2e/tmp, prompt_for_download=false}}}
node path changed
done login
Started
post login
F 

- , " ". (), ...

element(by.css('.add-new-type')).getText()

- /

!

Answer 1

, , , - css , $timeout. , - - - ... . (protractor github repo)

$interval - , , .

Answer 2

URL-?

'use strict';

var WaitUtils = function () {

    this.waitElement = function (element , timeout) {
        timeout = timeout || browser.params.time.long;
        var expected = protractor.ExpectedConditions;
        return browser.wait(expected.visibilityOf(element), timeout, "Element not found");
    };

    this.waitUrl = function (url, timeout) {
        timeout = timeout || browser.params.time.long;
        var expected = protractor.ExpectedConditions;
        return browser.wait(expected.urlContains(url), timeout, "URL has not contains "+url);
    };
};

module.exports = WaitUtils;

Answer 3

, , , , ;

describe('post login', function () {
it('just a test for after user loged in', function (done) {
    console.log('post login');
    const ec = protractor.ExpectedConditions;
    const getStarted = element(by.css('.add-new-type'));

    browser.wait(ec.visibilityOf(getStarted), 5000);

    console.log('getStarted ' + JSON.stringify(getStarted));
    browser.wait(ec.elementToBeClickable(getStarted), 5000);
    console.log('post wait');
    browser.sleep(5000).then(done);
})});  

, !