The conveyor does not find the item

Question

I am having trouble getting the protractor to behave as expected when testing my angular app. My spec file looks like this:

describe('app login', function() { it('should allow admin user to log in', function() { browser.get('http://localhost:3008'); //we can find the log in link expect(element(by.id('login-link')).getText()).toContain('Log in'); //open login dialog element(by.id('login-link')).click(); browser.ignoreSynchronization = true; browser.sleep(1000); //enter credentials element(by.id('login-username')).sendKeys('User1'); element(by.id('login-password')).sendKeys('Password1'); browser.sleep(1000); //log in var el = element(by.id('login-btn')); //WORKS IF BELOW LINE IS COMMENTED OUT el.click(); browser.sleep(1000); //display confirms login expect(element(by.id('user-display')).getText()).toContain('User1'); }); }); 

Note that I was getting sync errors at the beginning, so I have the ignoreSynchronization flag set to true and all of these browser.sleeps files.

Now here's the thing: the test will go fine if I remove the el.click () statement (and the final call on hold). However, when this line is included, I get a NoSuchElementError: element not found using the locator: By.id ("login-username") . Note that this element is not the one I'm actually trying to click, which is part of the bizarre thing.

Answer 1

You need to wait until your element appears completely, using:

 browser.driver.wait(function() { return element(by.css(YourElement'/login-username)).isDisplayed().then(function(IsVisible) { return IsVisible; }); }, 10000); 

Or

 browser.driver.wait(function() { return element(by.css(YourElement'/login-username)).isPresent().then(function(IsVisible) { return IsVisible; }); }, 10000); 

Or do you want to check the selector used, if it is correct or not, using the GoogleChrome console by typing: document.querySelector ("Your CSS selector").

Answer 2

You can try the following:

  let EC: any = protractor.ExpectedConditions; return browser.wait(EC.visibilityOf($('#login-username')), 6000); 

I encountered the same problems when testing my login page, where the protractor looked for elements before they were displayed. Using the expected conditions of the protractor tells the framework to wait for a certain state (with a timeout limit, of course) of the element before continuing.

Answer 3

If your error may be related to the screen size of your test window, you can increase the visibility of your driver after starting the test layout.

To do this, you can include the following lines of code in your protractor.conf.js file:

 onPrepare() { browser.driver.manage().window().maximize(); }