Protractor: Protractor unable to locate element though it is present in the DOM in angular 4 app

[hemachandsai]

Hi Everyone,

Iam using protractor in an angular 4 app.I am trying to find an element by css.Iam unable to locate the element though it is present in the DOM.I had tried to fix this in multiple ways like adding delay and using browser.wait(browser.ExpectedConditions.presenceOf(elem8),10000,"Waiting for textarea") but failed to fix this. i had verified mutiple times that the element is present in DOM during the runtime.Iam attaching the runtime log here.Please help me in fixing this.
element locator: element(by.css('textarea');

webdriver-chrome:v2.40
Message:
Failed: Timed out waiting for asynchronous Angular tasks to finish after 21 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
While waiting for element with locator - Locator: By(css selector, textarea)
Stack:
ScriptTimeoutError: asynchronous script timeout: result was not received in 21 seconds
(Session info: chrome=67.0.3396.99)
(Driver info: chromedriver=2.40.565498 (ea082db3280dd6843ebfb08a625e3eb905c4f5ab),platform=Windows NT 10.0.17134 x86_64)
at Object.checkLegacyResponse (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\error.js:639:15)
at parseHttpResponse (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\http\index.js:538:13)
at client_.send.then.response (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\http\index.js:472:11)
at ManagedPromise.invokeCallback_ (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:1379:14)
at TaskQueue.execute_ (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2913:14)
at TaskQueue.executeNext_ (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2896:21)
at asyncRun (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2820:25)
at C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:639:7
at
at process._tickCallback (internal/process/next_tick.js:188:7)
From: Task: Protractor.waitForAngular() - Locator: By(css selector, textarea)
at Driver.schedule (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\webdriver.js:377:17)
at ProtractorBrowser.executeAsyncScript_ (C:\Users\awdev1\Desktop\mm-ngx\node_modules\protractor\built\browser.js:235:28)
at runWaitForAngularScript (C:\Users\awdev1\Desktop\mm-ngx\node_modules\protractor\built\browser.js:266:30)
at ProtractorBrowser.waitForAngular (C:\Users\awdev1\Desktop\mm-ngx\node_modules\protractor\built\browser.js:269:16)
at ElementArrayFinder.getWebElements (C:\Users\awdev1\Desktop\mm-ngx\node_modules\protractor\built\element.js:167:29)
at ElementFinder.isPresent (C:\Users\awdev1\Desktop\mm-ngx\node_modules\protractor\built\element.js:1037:46)
at C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\webdriver.js:716:14
at TaskQueue.execute_ (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2913:14)
at TaskQueue.executeNext_ (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2896:21)
at asyncRun (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2820:25)
From: Task:
at pollCondition (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2359:16)
at C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2355:9
at new ManagedPromise (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:1082:7)
at C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2354:14
at TaskQueue.execute_ (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2913:14)
at TaskQueue.executeNext_ (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2896:21)
at asyncRun (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2775:27)
at C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:639:7
at
From: Task: Waiting for textarea
at ControlFlow.wait (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2352:17)
at Driver.wait (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\webdriver.js:712:29)
at ProtractorBrowser.to.(anonymous function) [as wait] (C:\Users\awdev1\Desktop\mm-ngx\node_modules\protractor\built\browser.js:62:29)
at Object. (C:\Users\awdev1\Desktop\mm-ngx\dist\e2e\specs\specs\app.component.e2e-spec.ts:68:13)
at Generator.next ()
at C:\Users\awdev1\Desktop\mm-ngx\dist\e2e\specs\app.component.e2e-spec.js:7:71
at new Promise ()
at __awaiter (C:\Users\awdev1\Desktop\mm-ngx\dist\e2e\specs\app.component.e2e-spec.js:3:12)
at Object.it (C:\Users\awdev1\Desktop\mm-ngx\dist\e2e\specs\specs\app.component.e2e-spec.ts:16:43)
at C:\Users\awdev1\Desktop\mm-ngx\node_modules\jasminewd2\index.js:94:23
From: Task: Run it("Should test functionality") in control flow
at Object. (C:\Users\awdev1\Desktop\mm-ngx\node_modules\jasminewd2\index.js:79:14)
at C:\Users\awdev1\Desktop\mm-ngx\node_modules\jasminewd2\index.js:16:5
at ManagedPromise.invokeCallback_ (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:1379:14)
at TaskQueue.execute_ (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2913:14)
at TaskQueue.executeNext_ (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2896:21)
at asyncRun (C:\Users\awdev1\Desktop\mm-ngx\node_modules\selenium-webdriver\lib\promise.js:2775:27)
From asynchronous test:
Error
at Suite.describe (C:\Users\awdev1\Desktop\mm-ngx\dist\e2e\specs\specs\app.component.e2e-spec.ts:16:3)
at Object. (C:\Users\awdev1\Desktop\mm-ngx\dist\e2e\specs\specs\app.component.e2e-spec.ts:4:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)

[IgorSasovets]

Hi, @chandu379 ! Try to use browser.ignoreSynchronization = true.

[hemachandsai]

First of all thanks for the help @IgorSasovets .Can you detail it more and relate how it can help me and what exactly it does??In the mean while i will try it out!!

[IgorSasovets]

I had similar problem to yours. Reason is that protractor is waiting for element which is always in pending status and then crash. Especially this problem appears when app uses angular 4 + material. For me, custom synchronization fixed issue. Please provide test example and your config file if possible.

[hemachandsai]

Thanks for the help @IgorSasovets. It fixed my issue but raised several other errors, anyhow i fixed them.
I have couple of questions
1)If i have a console.log without appended to promise they get printed before even the actual test starts.Why??
2)Protractor inbuilt method like is presenceof all of these are not waiting till the delay given but throwing error immediately as "StaleElementReferenceError: stale element reference: element is not attached to the page document".Why?
3)Other protractor methods such as visibilityof or stalenessof are immedialtely throwing error without even waiting for the given delay argument.What may be the cause??

[IgorSasovets]

1) I need to review code because it can be caused by few reasons main of which is log location in test.
2) As I said, some elements are always in pending state and it causes such errors.
3) I recommend you to use elementToBeClickable instead or in combination with visibilityOf. I also had similar issues and even implemented custom synchronization for some parts of application.

[IgorSasovets]

Also, please close this issue if it's fixed.