Can't locate web element using Protractor API

[bharukaRupesh]

Hi,

I am using chrome headless browser in protractor for testing of Angular WebApp. But, the problem is headless browser is not locating the web element and giving below error,
- Failed: No element found using locator: By(css selector, *[id="login_form_login"])

obviously because it doesn't wait to load browser, css elements etc.

How it can be resolved to locate web element for headless browser?

[IgorSasovets]

Hi, @bharukaRupesh ! Please provide your config file and test example.

[bharukaRupesh]

Hi @IgorSasovets ,
Thanks for quick response..!

I have attached 3 files i.e.,
1)config.js file
2)LoginPage.ts - As I am using page object model in this example
3)login_spec.ts

Config_File.txt
LoginPage.txt
login_spec.txt

Please check it and let me know if I am going wrong anywhere.

[IgorSasovets]

Thanks) I'll check it and provide feedback.

[IgorSasovets]

@bharukaRupesh , I modified it a bit. Please try and provide feedback. Also, if it's Angular app I would recommend you to comment line browser.waitForAngularEnabled(false); in your config file. Which version of Angular used in your application?

Config_File.txt
login_spec.txt
LoginPage.txt

[bharukaRupesh]

@IgorSasovets , I tried with the latest code modified by you, still I am getting the same error as below,
- Failed: No element found using locator: By(css selector, *[id="login_form_login"])

Basically, the application which I am working on is hybrid i.e. the login page is in "Angular Js" and post login it is in "Angular 5" that's why I have kept browser.waitForAngularEnabled(false); line in my config.js file.

[IgorSasovets]

I need to take a look at application. Could you share link to app if it's possible?

[bharukaRupesh]

@IgorSasovets The application is still under development and not hosted anywhere.

[IgorSasovets]

Ok, but I still need example app to help you with this issue. Do you know some app with similar logic?

[bharukaRupesh]

I can't share the application since it's under development. I just want to understand, what you need to see in the app. so that I can check it for you and update you.

It would be better if you give me any other pointers to look into.

[IgorSasovets]

I want to see integration of Angular5 into AngularJS because I had a lot of issues with Angular5 and synchronization. I used before hooks and worked with synchronization settings using browser.ignoreSynchronization = (false - if I want to work with angularjs | true - angular5).

[bharukaRupesh]

As I said, the "Login" page is in "AngularJs" so for that I have kept browser.waitForAngularEnabled(false); in my config.js file and once I login to the application it's working fine for Angular 5 as well.

In other way, if I set browser.waitForAngularEnabled(true) to true, I get an error on login page itself that's why I kept it false so that it'll not wait for Angular to load since the login page is not in "Angular"

Apart from this, I don't have any other integration in my application.

[CrispusDH]

@bharukaRupesh have you tried to use explicit waiter?

[bharukaRupesh]

@CrispusDH, Yes I have one util package inside which I have written 2 methods with explicit wait( ) code as below,

util.txt

Please have a look at this utility methods and let me know if I am going wrong anywhere. This code is working perfectly with UI browser.

Waiting for your response!

[CrispusDH]

@bharukaRupesh I did not find element with *[id="login_form_login"] locator in the LoginPage. Could you provide class with this element?

[bharukaRupesh]

@CrispusDH I am providing you 3 different files as below,

1. Config.js file
2. LoginPage.ts
3. login_spec.ts

Config_File.txt
login_spec.txt
LoginPage.txt

This files are already checked by @IgorSasovets and suggested few changes but that also didn't work.