How to select from autopopulating google maps dropdown using protractor? - google-maps

Question

I am using protractor with Jasmine framework for automating angular5 application. My developers have used API/created google maps dropdown as mentioned in the link
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
When user types on the address, google maps API is invoked and lists the places related to search, this will not populate/change any tags of developer tools HTML. So basically when user types address then it will populate the address dropdown and I want to select any address either through mouse/keyboard arrow key. When I am automating, I could reach till passing string to the address web element later it errors saying
No details available for input:'Mumbai'
with the popup displayed on the window. Any help is greatly appreciated.
I tried below code,
browser.actions().mouseMove(element(by.id('fromAddress-input')).sendKeys("Mumbai")).perform();
browser.actions().sendKeys(protractor.Key.ENTER).perform();
browser.actions().sendKeys(protractor.Key.ARROW_DOWN).perform();
browser.actions().sendKeys(protractor.Key.ENTER).perform();

Answer 1

First you need to switch to the Iframe that contains the elements you want, use this to change to the Iframe:
var driver = browser.driver;
var loc = by.tagName('iframe');
var el = driver.findElement(loc);
browser.switchTo().frame(el);
Create a function with this code and place after you load the page.
Then your code will work but remove the first enter, do this for example:
browser.actions().mouseMove(element(by.id('fromAddress-input')).sendKeys("Mumbai")).perform();
browser.actions().sendKeys(protractor.Key.ARROW_DOWN).perform();
browser.actions().sendKeys(protractor.Key.ENTER).perform();
change back to the main frame using this:
browser.switchTo().defaultContent();