this.When(/^the user clicks on login button$/, function () {
return browser.wait(wagLoginPage.loginPage.signIn.isPresent().then(function (visible) {
if(visible){
console.log("element is visible !!!!!!!");
wagLoginPage.loginPage.signIn.click().then(function(){
expect(visible).to.be.true;
});
}
else{
expect(visible).to.be.true;
}
}, function () { chai.assert.isFalse(true, "SingIn is not visible!") }));
});
My test randomly fails in the above step. For the above code, in console window protractor prints 'element is visible'. But if I perform click event on the element it throws element is not visible exception.
Update
Questions is answered here
Your element is present, but it's probably not visible.
Try this:
return browser.wait(wagLoginPage.loginPage.signIn.isDisplayed().then(function (visible){
//Your stuff
}
Note, I'm using isDisplayed() vs. isPresent().
isPresent() is useful if you are checking if an element is on the page, but may or may not be visible.
isDisplayed() is useful if you are checking if an element is visible on the page.
Related
Ran into the issue, where the test code should click the button Process in the iframe. Used npm i cypress-iframe lib, but came up to nothing. Cypress could not find the button.
Tried cy.iframe('[class="resp-iframe"]').find('resp-iframe[id="submit"]')
HTML of the problem
Tried the other ways to click on iframe button:
cy.get('iframe[class="resp-iframe"]').then($element => {
const $body = $element.contents().find('body')
cy.wrap($body).find('resp-iframe[class="btn btn-block btn-primary"]').eq(0).click();
})
also
cy.get('[class="resp-iframe"]').then($element => {
const $body = $element.contents().find('body')
let stripe = cy.wrap($body)
stripe.find('[class="resp-iframe"]').click(150,150)
})
and
cy.iframe('#resp-iframe').find('[name="submitButton"]')
Error
Error 2
Updated FYI:
The first part of code - clicking the Google button in bottom-right:
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('[id="popup-contentIframe"]')
.its('0.contentDocument.body')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
getIframeBody().find('[id="payWithout3DS"]').click()
Then, waiting for secure payment preloader to finish up:
cy.wait(20000)
Then, trying to catch the Process button by suggestions:
cy.iframe('[name="AcsFrame"]').find('#submit').click()
or
cy.iframe('[class="resp-iframe"]').find('[id="submit"]')
whole code part looks:
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('[id="popup-contentIframe"]')
.its('0.contentDocument.body')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
getIframeBody().find('[id="payWithout3DS"]').click()
cy.wait(20000)
cy.iframe('[name="AcsFrame"]').find('#submit').click()
But still, getting:
Maybe anyone had something like that?
Thanks.
How about you try this:
cy.iframe('[name="AcsFrame"]').find('#submit').click()
You don't need to repeat the resp-iframe inside the .find().
The selector .find('resp-iframe[id="submit"]') means look for HTML like this: <resp-iframe id="submit"> but the element you want is <input id="submit">.
Everything else looks ok
cy.iframe('[class="resp-iframe"]').find('[id="submit"]')
I am using cypress test to check all the buttons in the page whether they can be clicked or not.
I have used this line of code:
cy.get('button').click({ force: true }).should('have.attr', 'href')
and gives error
CypressError: cy.click() can only be called on a single element. Your
subject contained 5 elements. Pass { multiple: true } if you want to
serially click each element.
After that changed code with:
cy.get('button').click({ multiple: true }).should('have.attr', 'href')
and got another error
CypressError: Timed out retrying: cy.click() failed because this
element is not visible:
...
This element
''
is not visible because it has CSS property: 'display: none'
Fix this problem, or use {force: true} to disable error checking.
https://on.cypress.io/element-cannot-be-interacted-with
Is there any way to use both object to solve the problem?
This should work (I don't have a situation to test it when both needed, but it doesn't result in an error):
cy.get('button')
.click({ multiple: true, force: true })
.should('have.attr', 'href')
Here is a generic way of doing it -
cy.get('button').each(($btn) => {
if ($btn.hasClass('disabled')) {
// logic to deal with disabled button
}
else {
// click button or do whatever
cy.wrap($btn).should('have.attr', 'href').click();
}
})
each will help you loop through every button, whatever may be the count. This allows you to not worry about force clicking an element (button in this case).
I'm trying to get to controls inside a frame that is located inside a frame that is located inside another frame.
The last (deepest) frame is used only for login - that I manage to do.
The problem is that after the login I basically need to return to the upper frame and click a button. For some reason I keep getting the error:
NoSuchElementError: no such element
BTW, all the code in the frames is non-angular.
This is my code for the test:
it('Should get to drive sample app', function () {
login.get();
login.clickLogin();
browser.ignoreSynchronization = false;
login.goToUsecases(); //getting to the page
$('[href="/developers/api/1542"]').click();
browser.sleep(5000);
//iframe issue starts here
browser.switchTo().frame(0);
browser.ignoreSynchronization = true;
browser.switchTo().frame(0);
browser.switchTo().frame(0);
browser.driver.findElement(by.id('userName_str')).sendKeys("username");
browser.driver.findElement(by.id('password')).sendKeys("password");
browser.driver.findElement(by.name('submit')).click();
// login succeeded
browser.sleep(10000);
browser.driver.switchTo().defaultContent();
browser.driver.findElement(by.id('home')).click();
browser.sleep(10000);
});
The problem is that after the login I basically need to return to the upper frame and click a button.
From what I see in your code, you are switching to the default content, but, as you said, the button is inside the upper iframe, switch to it:
browser.driver.switchTo().defaultContent();
browser.switchTo().frame(0);
browser.driver.findElement(by.id('home')).click();
You can try this may be this helps you.. As this works for me for handling different windows.
browser.getAllWindowHandles().then(function (handles) {
newWindowHandle = handles[1];
browser.ignoreSynchronization = true;
browser.switchTo().window(newWindowHandle).then(function () {
browser.sleep(500).then(function () {
browser.ignoreSynchronization = true;
browser.driver.findElement(by.id('userName_str')).sendKeys("username");
browser.driver.findElement(by.id('password')).sendKeys("password");
browser.driver.findElement(by.name('submit')).click();
//login succeeded
});
//to close the current window
browser.driver.close().then(function () {
//to switch to the previous window
browser.switchTo().window(handles[0])
browser.driver.findElement(by.id('home')).click()
browser.sleep(10000);
});
});
});
Instead of ::browser.switchTo().frame(0);
try giving the locate of the iframe where you want to switch too.. that might help.
// Switch to iframe context in order to see inside iframe
browser.switchTo().frame(element(by.tagName('iframe')));
Posting this here in case someone else has the same problem...
When using a select2 dropdown in a C# MVC4 site, the page is not scrolled to the correct position when validation fails. Validation as such works and error scrolling also works for other controls, just not select2's. The reason AFAICS is that select2 replaces the original select with it's own markup and then set the original select as display:none. jquery.validate then has no valid target to scroll to.
We are using twitter bootstrap for styling, but I don't think it has any impact on this problem.
The jquery.validate documentation (as well as many answers here on StackOverflow) suggests that you use $.validator.setDefaults to assign the invalidHandler, but I couldn't get this to work in asp.net (it does work for focusInvalid however), probably due to us using the MS unobtrusive library. Instead I used this code in my jquery ready handler:
$(function() {
$.validator.setDefaults({
focusInvalid: false
});
function scrollToError(error, validator) {
var elem = $(validator.errorList[0].element);
if (elem.length) {
if (elem.is(':visible'))
return elem.offset().top - 16;
elem = elem.prev($(".select2-container"));
if (elem.length) {
return elem.offset().top - 16;
}
}
return 0; // scroll to top if all else fails
}
$('form').bind('invalid-form.validate', function(error, validator) {
// fix scrolling and validation for select2
if (!validator.numberOfInvalids())
return;
$('html, body').animate({
scrollTop: scrollToError(error, validator)
}, 500);
});
...
I set focusInvalid to false to disable and avoid conflict with the standard scroll and focus behavior.
The bind() call is used instead of the invalidHandler option and is the same as used by the validate plugin.
scrollToError() selects the first invalid element and returns the position to scroll to, either a normal visible element or a previous item with the 'select2-container' class (i.e a select2 element) or top of page if all else fails.
Standard behavior (showing validation errors etc) still works as before.
Hope this helps someone and if you have a better solution I would be very interested in knowing about it.
I have a WinJS application with listviews in which if quickly navigate between pages before the listview is fully loaded, the next page shows the listview with all elements in it bound as "undefined".
So say I have a hub page with a "to do" that is filtered to only show 6 items, and there is a header that navigates to the full "to do" page, when the hub page is displayed but before it is fully loaded I click on the header link to the "to do" page, the app then goes to the "to do" page, but the items show up with all the properties in the tile as "undefined".
I am using IndexedDB as my data store.
My home page code looks like this:
WinJS.UI.Pages.define("/pages/home/home.html", {
ready: function (element, options) {
WinJS.Utilities.query("a").listen("click", function (e) {
e.preventDefault();
WinJS.Navigation.navigate(e.currentTarget.href);
}, false);
viewModel = new HomeViewModel(element);
viewModel.load(); //loads from indexed db
},
//etc...
To Do Page:
WinJS.UI.Pages.define("/pages/ToDo/ToDo.html", {
ready: function (element, options) {
viewModel = new ToDoViewModel(element);
viewModel.load();
},
etc//
I know there isn't much to go off, but any ideas would be appreciated.
Also tips on how to debug something like this would be great.
Update
I narrowed it down to this one line from the Hub Page:
myLib.GetData(todaysDate, function (result) {
that.trendsModel.today = result;
WinJS.Binding.processAll(that.el.querySelector("#dataPanel"), that.trendsModel); //<--Right Here
});
If I remove that, then when I load the second page the data doesn't show as undefined. What is interesting is the data initially shows correctly on the second page and then it changes to "undefined".
Solution
My fix:
myLib.GetData(todaysDate, function (result) {
var element = that.el.querySelector("#dataPanel");
that.trendsModel.today = result;
if(element) {
WinJS.Binding.processAll(element, that.trendsModel);
}
});
At the point when when the callback returns, I am already on the second page. So the selector was not found returning null. If you pass null to processAll it tries to bind the whole page which is why I was able to see the correct data for a second then it changes to undefined...Wow, what a doozy. I guess it makes sense but what a pain to find.
Hope it helps someone in the future :)
Your ToDoViewModel, and HomeViewModel need to be observable. This means they need to mix in from WinJS.Binding.mixin, and for the properties that you pull in asynchronously, they need to call this.notify("propertyName", newVal, oldVal) from the property setter.
Note that you need to have getter/setter properties. e.g.
var bindingBase = WinJS.Class.mix(function() {}, WinJS.Binding.mixin);
WinJS.Namespace.define("YourNamespace", {
ToDoViewModel: WinJS.Class.derive(bindingBase, function constructor() {
}, {
_titleStorage: "",
title: {
get: function() { return this._titleStorage; },
set: function(newValue) {
if(newValue === this._titleStorage) {
return;
}
var old = this._titleStorage;
this._titleStorage = newValue;
this.notify("title", newValue, old);
}
}
}),
});
myLib.GetData(todaysDate, function (result) {
var element = that.el.querySelector("#dataPanel");
that.trendsModel.today = result;
if(element) {
WinJS.Binding.processAll(element, that.trendsModel);
}
});
At the point when when the callback returns, I am already on the second page. So the selector was not found returning null. If you pass null to processAll it tries to bind the whole page which is why I was able to see the correct data for a second then it change to undefined...Wow, what doozy. I guess it makes sense but what a pain to find.