Usage of var EC = protractor.ExpectedConditions gets browser stuck - protractor

I am new to protractor and I am having following code to click the user
var EC = protractor.ExpectedConditions;
var userlink = element(by.id('menu.user'));
var isLinkClickable = EC.elementToBeClickable(userlink);
browser.wait(isLinkClickable, 5000).then(function() {
userlink.click();
});
What I see is usage of ExpectedConditions actually blocks the test and it doesn't go ahead. If I remove it then my tests exit abruptly by coming "Element not visible". Am I using the right option?

var EC = protractor.ExpectedConditions;
var userlink = element(by.id('menu.user'));
browser.wait(EC.elementToBeClickable(element(by.id('menu.user'))), 30000, "menu user element is not clickable").then(function() {
userlink.click();
}

"An Expectation for checking an element is visible and enabled such that you can click it." Probably your "userlink" does not becomу either enabled or visible. You can addd .catch to handle error, or add last argument to show message "browser.wait(isLinkClickable, 5000, 'Not clickable for 5 seconds')". The option is right, but perhaps locator is not right.

Related

Refresh page every 5 secs in Protractor until element is present

Scenario: I am working with Protractor testing framework and I need to refresh the page every 5 seconds until the element is present on the web page but I am not sure how to do it.
I have seen protractor documentation and I have come across this page https://www.protractortest.org/#/api?view=ProtractorExpectedConditions even this doesn't refresh the page
var EC = protractor.ExpectedConditions;
var ele = element(by.control({controlType: "sap.m.ObjectIdentifier", id: /clone/,
properties: {text: "MANAGER"}}));
var isVisible = EC.visibilityOfElementLocated(ele);
browser.wait(isVisible, 5000); //wait for an element to become visible
browser.sleep(3000)
Any suggestions
You can use browser.refresh() in a loop:
while(true) {
if(/*element not visible */) {
browser.refresh();
} else {
break;
}
browser.sleep(5000);
}

Protractor page object definition not working as expected

I apologize for the slightly vague title, I'm not sure how exactly to word this.
I have my Page Object which, with one exception, works perfectly. Here's the excerpt:
module.exports = function(){
this.facilityList = element(by.name('facility')).all(by.tagName('option'));
this.randomFacility = element(by.name('facility')).all(by.tagName('option')).count().then(function(numberOfItems) {
var rnum = parseInt(Math.random() * numberOfItems);
return rnum;
}).then(function(randomNumber) {
element(by.name('facility')).all(by.tagName('option')).get(randomNumber)
});
}
I can access and use facilityList just fine. But then I realized that I'm almost always doing the same thing to facilityList so why don't I just create another line to make it choose a random one. So I create randomFacility using the code from the main conf.js.
It didn't work. The error I see displayed is:
Failed: Error while waiting for Protractor to sync with the page: "both angularJS testability and angular testability are undefined. This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping. See http://git.io/v4gXM for details"
I'm confused. Is this saying I can't do all that processing in the page object to get the random one or do I simply have to manipulate facilityList in the conf.js and be done with it?
You nee to know the mechanism about how protractor to find element. Protractor only to start find element from page when protractor's action API be called, like getText(), click(), count() etc.
So when you define variable to represent certain element on page, when Nodejs execute this line, protractor won't to start find element from page:
// page object login.page.js
module.exports = function LoginPage(){
this.sumbitButton = element(by.css('#submit'));
this.countName = element.all(by.css('.username')).count();
}
// use page object in conf.js
var LoginPage = require('./login.page.js');
var loginPage = new Loginpage();
When Nodejs execute line var loginPage = new Loginpage();, all lines in function LoginPage will be executed.
When execute the first line, protractor not to find element from current open page,
When execute the second line, protractor will find element from current open page, But at this time point, protractor is possible to launching browser with a blank page, the target page have not been opened or navigated to.
To fix your problem, you need to define randomFacility as class's Method, rather than Property:
module.exports = function() {
this.facilityList = element(by.name('facility')).all(by.tagName('option'));
this.randomFacility = function() {
return element(by.name('facility'))
.all(by.tagName('option')).count()
.then(function(numberOfItems) {
console.log('count: '+numberOfItems);
var rnum = parseInt(Math.random() * numberOfItems);
console.log('random index: '+rnum);
return rnum;
})
.then(function(randomNumber) {
console.log('argument randomNumber: '+randomNumber);
return element(by.name('facility'))
.all(by.tagName('option')).get(randomNumber)
});
}
};
// how to use
pageObject.randomFacility().then(function(ele){
return ele.click();
});

How to verify number of tagName with protractor

I'm a newbie in protractor.
I've written a test with Selenium in Java and everything is OK.
But now, i need to do the same test in protractor and it driving me crazy!
I've to check the numbre of element by tagName in my page.
My code is something like this :
// Click on a button
element(by.id('e2e-idAutomate')).click();
// Wait for the next page to be present
var isPresent0 = EC.visibilityOf(element(by.tagName('ngx-carousel')));
var isPresent1 = EC.visibilityOf(element(by.tagName('cmyardneo-action-button')));
var condition = EC.and(isPresent0, isPresent1);
browser.wait(condition, 5000);
// Ok, here i want to chek the number of div by tagName
// First try!
expect<any>(element.all(by.tagName("div"))).toContain(40);
// Doesn't work... Fall in timeout!
// Second try
element.all(by.tagName("div")).then((liste) => { //Same Problem, fall in timeout
expect<any>(liste.length).toBe(40);
});
How can i read the liste return by the element.all?
Thanks!
For time our issue, please refer to http://www.protractortest.org/#/timeouts
One issue in your code:
// First try!
expect(element.all(by.tagName("div")).count()).toBe(40);
// element.all().count() is to get count of found elements
Ok,
After another tests, my problem is not about element.all
but about page change....
What i want to do is :
Open a first page
Click on a button that make à routing to a
second page
check this second page
I ve done something like that :
describe('test of application', function () {
beforeAll( () => {
TR.closeTabs();
browser.driver.manage().window().maximize();
browser.get('/ardoise');
browser.waitForAngularEnabled();
browser.wait(EC.visibilityOf(element(by.id("e2e-idAutomate"))),5000);
});
it('Click on the button', () => { // I will go on the second page
element(by.id('e2e-idAutomate')).click();
});
it('Check the second page', () => {
// brower.sleep(5000);
var isPresent0 = EC.visibilityOf(element(by.tagName('ngx-carousel')));
var isPresent1 = EC.visibilityOf(element(by.tagName('cmyardneo-action-button')));
var condition = EC.and(isPresent0, isPresent1);
// Here i want to be sure the second page is loaded
browser.wait(condition, 5000);
// Next check....
});
});
And the last condition is never OK (I've checked, the two tagName are OK!!!)
It sounds like protractor hasnot seen that a routing occurs...

How to detect Google places AutoComplete load issues?

I'm using the API successfully but encountered an error this morning with "OOPS! Something went wrong" sitting in the textbox and the user cannot type into it. I found the issue to be key related and fixed, however, this brought to light that some issue may arise and the user cannot complete because of this blocking. I'd like to be able to detect in javascript if there is some issue with the google.maps.places.Autocomplete object and not bind it to the textbox.
For anyone else wanting to do this.
Thanks to the folks for the idea over at:
Capturing javascript console.log?
// error filter to capture the google error
(function () {
var oldError = console.error;
console.error = function (message) {
if (message.toLowerCase().includes("google maps api error")) {
document.getElementById('<%=hdnGoogleSelected.ClientID %>').value = "DISABLE";
triggerUpdatePanel();
//alert(message);
}
oldError.apply(console, arguments);
};
})();
Mine is in an update panel so I triggered the update which sets the onfocus back to this.select(); for the textbox which effectively disables the autocomplete attempts.
tbAddress1.Attributes["onfocus"] = "javascript:this.select();";
Another option:
Google will return an error after about 5 seconds from loading.
"gm-err-autocomplete" class indicates any error with the autocomplete component.
You can periodically check for the error class google returns. I do it for 10 seconds after loading:
function checkForGoogleApiErrors() {
var secCounter = 0;
var googleErrorCheckinterval = setInterval(function () {
if (document.getElementById("AddressAutocomplete").classList.contains("gm-err-autocomplete")) {
console.log("error detected");
clearInterval(googleErrorCheckinterval);
}
secCounter++;
if (secCounter === 10){
clearInterval(googleErrorCheckinterval);
}
}, 1000);
}

protractor browser.actions().mouseMove() not showing hover effects

I am new to protractor and trying to add tests for a slider panel which is closed by default and hovering mouse over will open it and then there are a list of items on the slider panel to pick.
<div class="slider" [ngClass]="{ closed: state === 1, open: state === 2}" (click)="onClick($event)" (mouseover)="onMouseOver($event)" (mouseleave)="onMouseLeave($event)">
I tried multiple ways, none of them work.
First attempt:(no hover effect, ie, do nothing)
browser.actions().mouseMove(element(by.css('.slider.closed'))).perform();
Second attempt:( got an error: An invalid or illegal selector was specified)
browser.actions().mouseMove(element(by.css('[(mouseover)="onMouseOver($event)"]'))).perform();
Third attempt: (got an error: No element found using locator)
browser.actions().mouseMove(element(by.css('[mouseover="onMouseOver($event)"]'))).perform();
This should work, unless you have multiple elements with class .slider. At which point, you might try including a parent object, or another locator strategy.
browser.actions().mouseMove($('.slider')).perform();
I used webdriver and made it work. browser.executeScript('arguments[0].click()',browser.driver.findElement(By.css('.slider')));
I just have the same problem, after 2 hours, I found this work for me:
src: java mouse over using javascript
let loginElement = await driver.findElement(By.id('header-user'));
let strJavaScript = "var element = arguments[0];"
+ "var mouseEventObj = document.createEvent('MouseEvents');"
+ "mouseEventObj.initEvent( 'mouseover', true, true );"
+ "element.dispatchEvent(mouseEventObj);";
await driver.executeScript(strJavaScript, loginElement);
I got the same issue when run tests with firefox
and find out a solution as below
if (browser.isFirefox) {
var script = `if(document.createEvent) {
var evObj = document.createEvent('MouseEvents');
evObj.initEvent('mouseover', true, false);
arguments[0].dispatchEvent(evObj);
} else if (document.createEventObject) {
arguments[0].fireEvent('onmouseover');
}`;
browser.executeScript(script, elm.getWebElement());
return elm.click();
} else {
return browser.actions()
.mouseMove(elm.getWebElement())
.click()
.perform();
}
Test with:
Protractor: 5.1.1
Selenium: 3.4.0