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);
}
Related
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...
I have an angular application running inside iFrame. I must need to launch parent application URL as it provide some flag which makes angular app working as expected. Now I need to write protractor tests for angular app in iFrame.
Here is the code.
describe('French page', function() {
var IFRAME = "iframe",
TITLE_FR = 'Découverte automatique',
PAGE_URL = '/SAAS/admin/app/page',
pagePaths = browser.params.paths;;
beforeEach(function (done) {
LOGIN_PAGE.goToPageAndLogin().then(function (){
browser.driver.ignoreSynchronization = true;
browser.get(PAGE_URL); // application has angular app in iFrame
browser.sleep(5000);
browser.waitForAngular();
done();
});
});
afterEach(function (done) {
demoPause();
LOGIN_PAGE.logout().then(done);
});
it('should be able to launch with fr-FR locale', function (done) {
browser.driver.switchTo().frame(IFRAME); //Switch to angular app in iFrame
// Check if element text is in french
browser.driver.findElement(by.css('.app-menu li:nth-child(1) p')).then(function (elem) {
elem.getText().then(function (text) {
expect(text).toBe(TITLE_FR); // I can see that both texts are same here while debugging
browser.driver.ignoreSynchronization = true;
done();
});
});
});
});
The test condition passed but it exit with below error.
Message:
Failed: Angular could not be found on the page
https://host/abcd/admin/app/page
retries looking for angular exceeded
The issue got fixed by putting
browser.ignoreSynchronization = true;
before
browser.get(PAGE_URL);
Few things:
The parameter IFRAME passed into:
browser.driver.switchTo().frame(IFRAME); needs to be the ID
property of the element, not the tag name of the element, example:
your iframe element
<iframe id="myIframeId" name="frame3">...</iframe>
you would in this case do
browser.diver.switchTo().frame("myIframeId");
Don't call browser.waitForAngular(); on a non-angular page. Since only your iframe element is Angular, I suggest doing the following to make sure a specific element is present before continuing:
browser.driver.wait(function() {
return browser.driver.isElementPresent(by.css("your_selector")).then(function(present) {
return present;
});
}, 20000);
This will wait for an element to be present for 20 seconds, regardless of the page being Angular or not and then continue.
After you switch to the iframe element, you should call browser.driver.ignoreSynchronization = false; to turn on Angular synchronization back on. Since your code inside your iframe is Angular.
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.
I've tried this:
browser.wait(function () {
return browser.executeScript('return document.readyState==="complete" &&' +
' jQuery !== undefined && jQuery.active==0;').then(function (text) {
return text === true;
});
}, 30000);
If jQuery.active==0 then page is completely loaded. This should work for sites with JQuery and non angular pages.
However, I have many problems of instability to test for non angular sites.
How to fix this?
By default protractor waits until the page is loaded completely. If you are facing any error then it is because protractor is waiting for the default time to be completed, that you have specified in your conf.js file to wait until page loads. Change the value to wait a for longer time if you think your app is slow -
// How long to wait for a page to load.
getPageTimeout: 10000, //Increase this time to whatever you think is better
You can also increase the defaultTimeoutInterval to make protractor wait a little longer before the test fails -
jasmineNodeOpts: {
// Default time to wait in ms before a test fails.
defaultTimeoutInterval: 30000
},
If you want to wait for any particular element, then you can do so by using wait() function. Probably waiting for last element to load is the best way to test it. Here's how -
var EC = protractor.ExpectedConditions;
var lastElement = element(LOCATOR_OF_LAST_ELEMENT);
browser.wait(EC.visibilityOf(lastElement), 10000).then(function(){ //Alternatively change the visibilityOf to presenceOf to check for the element's presence only
//Perform operation on the last element
});
Hope it helps.
I use ExpectedConditions to wait for, and verify page loads. I walk through it a bit on my site, and example code on GitHub. Here's the gist...
Base Page: (gets extended by all page objects)
// wait for & verify correct page is loaded
this.at = function() {
var that = this;
return browser.wait(function() {
// call the page's pageLoaded method
return that.pageLoaded();
}, 5000);
};
// navigate to a page
this.to = function() {
browser.get(this.url, 5000);
// wait and verify we're on the expected page
return this.at();
};
...
Page Object:
var QsHomePage = function() {
this.url = 'http://qualityshepherd.com';
// pageLoaded uses Expected Conditions `and()`, that allows us to use
// any number of functions to wait for, and test we're on a given page
this.pageLoaded = this.and(
this.hasText($('h1.site-title'), 'Quality Shepherd')
...
};
QsHomePage.prototype = basePage; // extend basePage
module.exports = new QsHomePage();
The page object may contain a url (if direct access is possible), and a pageLoaded property that returns the ExepectedCondition function that we use to prove the page is loaded (and the right page).
Usage:
describe('Quality Shepherd blog', function() {
beforeEach(function() {
// go to page
qsHomePage.to();
});
it('home link should navigate home', function() {
qsHomePage.homeLink.click();
// wait and verify we're on expected page
expect(qsHomePage.at()).toBe(true);
});
});
Calling at() calls the ExpectedCondidion (which can be be an and() or an or(), etc...).
Hope this helps...
I'm building a Metro app using the single-page navigation model. On one of my pages I start an async ajax request that fetches some information. When the request returns I want to insert the received information into the displayed page.
For example:
WinJS.UI.Pages.define("/showstuff.html", {
processed: function (element, options) {
WinJS.xhr(...).done(function (result) {
element.querySelector('#target').innerText = result.responseText;
});
}
};
But how do I know that the user hasn't navigated away from the page in the meantime? It doesn't make sense to try to insert the text on a different page, so how can I make sure that the page that was loading when the request started is still active?
You can compare the pages URI with the current WinJS.Navigation.location to check if you are still on the page. You can use Windows.Foundation.Uri to pull the path from the pages URI to do this.
WinJS.UI.Pages.define("/showstuff.html", {
processed: function (element, options) {
var page = this;
WinJS.xhr(...).done(function (result) {
if (new Windows.Foundation.Uri(page.uri).path !== WinJS.Navigation.location)
return;
element.querySelector('#target').innerText = result.responseText;
});
}
};
I couldn't find an official way to do this, so I implemented a workaround.
WinJS.Navigation provides events that are fired on navigation. I used the navigating event to build a simple class that keeps track of page views:
var PageViewManager = WinJS.Class.define(
function () {
this.current = 0;
WinJS.Navigation.addEventListener('navigating',
this._handleNavigating.bind(this));
}, {
_handleNavigating: function (eventInfo) {
this.current++;
}
});
Application.pageViews = new PageViewManager();
The class increments a counter each time the user starts a new navigation.
With that counter, the Ajax request can check if any navigation occurred and react accordingly:
WinJS.UI.Pages.define("/showstuff.html", {
processed: function (element, options) {
var pageview = Application.pageViews.current;
WinJS.xhr(...).done(function (result) {
if (Application.pageViews.current != pageview)
return;
element.querySelector('#target').innerText = result.responseText;
});
}
};