Protractor - Element not found

Question

I'm new to protractor and trying write a script. But every time I try to locate an element "The Element not found" error is coming.

These are the error messages I'm getting:

     Failed: No element found using locator: By(xpath, //*[@id="firstName"])
     Failed: No element found using locator: By(css selector,*[id="firstName"])

I have tried below codes. But everything is failing.

    element(by.xpath('//*[@id="firstName"]')).sendKeys('Mátyás');

    element(by.id('firstName')).sendKeys('Mátyás');

    browser.findElement(by.id('firstName')).sendKeys('Mátyás');

This is the element I'm trying to access.

    <input _ngcontent-c9="" class="form-control ng-pristine ng-invalid ng-touched" formcontrolname="firstName" id="firstName" name="firstName" type="text" ng-reflect-name="firstName" placeholder="First Name">

What am I doing wrong?

Answer 1

Verify the element is present inside a Frame. If so then switch into the frame first and access the element.

browser.switchTo().frame(id or webelement);

Answer 2

In software testing companies we overcome such situation by using Protractor's ElementFinder function rather than using selenium element finder for locating Angular specific locators.

Basically, this function finds a single element. When you are looking for elements in Protractor all actions are asynchronous where all actions are sent to the web browser being controlled using the JSON Webdriver Wire protocol. The browser then performs the action as user natively would.

A locator tells Protractor how to find a certain DOM element. Here are some example of common locator you can use to find Angular specific elements in order to avoid the "element not found" error you are facing:

// Find an element using a css selector.
by.css('.myclass')

// Find an element with the given id.
by.id('myid')

// Find an element using an input name selector.
by.name('field_name')

// Find an element with a certain ng-model.
// Note that at the moment, this is only supported for AngularJS apps.
by.model('name')

Hopefully using Angular specific element locator will resolve this problem.

Answer 3

The issue was not in the syntax or the code. The problem was this spec file executed before the loginSpec. Therefore the browser couldn't find the element and test was failed.

As a solution we can use protractor onPrepareproperty in conf.js and it will help to do a global preparation for tests.

Referred this link : https://www.protractortest.org/#/system-setup

If we are targeting test suites we can use beforeAll and afterAll.