Protractor: How to navigate to external url by click an element using id ?

[jakviru]

I am using protractor test at react js based webapplication. My test is simple, here is part of the code which i am using in my test script

var logo = element(by.id('facebook-logo')); browser.actions().mouseMove(logo).click().perform();

when i execute it i got this result in my terminal
"W/element - more than one element found for locator By(css selector, *[id="facebook-logo"]) - the first result will be used"

test passed but it is not navigating to external url.

Could you please help to solve this issue?

[ajitesh11]

You need to switch to new window by using below code

browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function(){
//do your stuff on the new window
});
});

When you need to switch back to parent window do like below
browser.driver.close();
browser.driver.switchTo().window(handles[0]);

[jakviru]

@ajitesh11 Do i need to define "handles" in my code?. Could you please give an example usage ?

[ajitesh11]

@jakviru : No you do not need to define it.
this method/api >> getAllWindowHandles() will give you all browser handles opened at the current time. So say if you have opened one browser on which test are running and you click on a link and on clicking the link a new tab with new url opens then
window(handles[0]) is the handle for first tab
window(handles[1]) is the handle for the new tab opened.
I suggest you add a small sleep here (probably 1 or 2 sec) after you click on the element , so that browser gets time to open new tab and then you getAllWindowHandles() gives you two browser handles

You need to switch the driver focus from one tab to the new tab or vice versa and you can switch driver focus by using switchTo() method and then you append where you want to switch , browser tab 1 (browser.driver.switchTo().window(handles[0]);) or browser tab 2 browser.driver.switchTo().window(handles[1]);

Actually i missed to ask you , when you said in your question on clicking on an element it is not navigating to external url, does that external url opens in new browser tab or in the same browser tab?

[jakviru]

@ajitesh11 when i run my test i got this message at console

"more than one element found for locator By(css selector, *[id="facebook-logo"]) - the first result will be used"
But it is not navigating to anywhere and facebook page is not yet opened as a popup or in a new tab/in same window.

[ajitesh11]

Then it looks like the click action is not being performed on webelement logo.
Its really difficult to say why click is not being performed or why the navigation is not happening unless we see the entire code you are trying to do this steps.
I am actually surprised and confused about how can an application have multiple web elements with same id.

I am just shooting a bullet in dark but may be you can try below snippet:

Instead of
var logo = await element(by.id('facebook-logo'));
browser.actions().mouseMove(logo).click().perform();

You can try
var logo = $("#facebook-logo");
await browser.executeScript('arguments[0].scrollIntoView(true);', logo.getWebElement())
await browser.executeScript('arguments[0].click();', logo.getWebElement());

and if you want to click first found element
var logo = $(".facebook-logo"); // not here css selector used here is className
await browser.executeScript('arguments[0].scrollIntoView(true);', logo[0].getWebElement())
await browser.executeScript('arguments[0].click();', logo[0].getWebElement());

@jakviru fyi I edited the answer a little bit

[jakviru]

@ajitesh11 when i try the above code i am getting this syntax error
SyntaxError: await is only valid in async function

will this work in protractor ?

[ajitesh11]

@jakviru To use await you need to mark the function as async.
It ('test123' , async(() =》{
// Your test code here
}

[ajitesh11]

Also please provide the code snippet and protractor version along with protractor config which you are using to run protractor tests. Its easier to help you out then.

[jakviru]

@ajitesh11 : Thanks!
Protractor: Version 5.4.2
The test is on our stage url so it only work on our internal network.
// conf.js exports.config = { framework: 'jasmine', seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['spec.js'] }

// spec.js describe('Protractor Demo App', function () { it('should have a title', function () { browser.waitForAngularEnabled(false); browser.get('url-stage'); browser.driver.manage().window().setSize(1280, 1024); browser.driver.sleep(2000); logo = element.all(by.id('elementid ')); // logo = element.all(by.class('classname')); browser.actions().mouseMove(logo).click().perform(); console.log("its working"); browser.driver.sleep(1000); }); })

[ajitesh11]

Why you are using element.all with locator id ? element.all is used when you have multiple elements with same locator it is similar to driver.findElements method of selenium
In your example question you were not using element.all

to make use of async await you can write async just before function () like it('should have a title', aysnc function () {
await works here
}

[jakviru]

@ajitesh11 its is working :)
Thanks