I am testing my Ionic app.
In one page, the button to be clicked is out of the bounds of the window.
Hence the following code:
element.all(by.css('.item.item-complex')).get(9).click();
throws the error:
ElementNotVisibleError: element not visible
Hence, I am trying to scroll down the page to make the button visible in page and then try emulating the click on it. I am using the following code:
browser.executeScript('window.scrollTo(0, 200);').then(function() {
element.all(by.css('.item.item-complex')).get(9).click();
expect(browser.getTitle()).toEqual('Vegeta The Prince');
});
But the scrolling is not happening with the above code. Please help!
I am using Google Chrome.
When I encounter issues like this, I scroll into view:
var elm = element.all(by.css('.item.item-complex')).get(9);
browser.executeScript("arguments[0].scrollIntoView();", elm.getWebElement());
elm.click();
I solved this issue using
window.scrollTo(x, y)
code:
var elm = element.all(by.css('.item.item-complex')).get(9);
elm.getLocation()
.then(function (location) {
return browser.executeScript('window.scrollTo(' + location.x + ', ' + location.y + ');')
})
.then(function () {
return elm.click();
})
})
Related
I'm trying to prepend old messages to a chatbox when the user scrolls to the top. I'm using eventListeners as the code illustrates, but I'm running into an error where only the last chatbox is working properly. It seems that bodies[index].scrollTop and bodies[index].scrollHeight always returns 0 with the exception of bodies[lastIndex]. Why might this be? (logging bodies[index] correctly returns the div element)
document.querySelectorAll('.popup-messages').forEach((item, index) =>
{
item.addEventListener('scroll', async function()
{
if (chatReady[index] == true && bodies[index].scrollTop == 0)
{
chatReady[index] = false;
var previousHeight = bodies[index].scrollHeight;
await getMessages(item.id.replace(":body", ""));
var heightDiff = bodies[index].scrollHeight - previousHeight;
bodies[index].scrollTop += heightDiff;
}
})
})
Edit: If there's a different way to make multiple eventListeners dynamically, please share it with me as it would help a lot.
This problem was solved by replacing bodies[index] with item. Perhaps there was a bug that occurs when more than one variable is associated with an element.
I am new to using protractor and want to visually see my web page scroll down to an element and it is not working. I understand scroll into allows me to visually see the scroll happen window.scroll to my understanding dosent all that. Any help would be appreciated
HTML CODE
a class="button button--secondary promo--app-button" href="https://itunes.apple.com/us/app/homes.com-real-estate-search/id306423353?mt=8&uo=4" target="_blank" data-tl-object="app_referral_hdc_portalhomefeatured_ios">
Apple Store
Protractor code:
it('scroll down page for (dropdown header search)', function () {
var EC = protractor.ExpectedConditions;
var scrolldown = $$('.button button--secondary promo--app-button').get(1);
scrolldown.scrollIntoView(true);
browser.sleep(10000);
})
Try using browser.executeScript:
var scrolldown = $$('.button button--secondary promo--app-button').get(1);
browser.controlFlow().execute(function() {
browser.executeScript('arguments[0].scrollIntoView(true)', scrolldown.getWebElement());
});
This should be simple.
Just get the web-element's cor-ordinates and use Window.scroll
var elm = element(by.xpath("//blahblah"));
elm.getLocation()
.then(function(location) {
return browser.executeScript('window.scrollTo(' + location.x + ', ' + location.y + ');');
})
I am having an issue where when I have a rich text field that has design mode on that is within a sortable LI. The problem is that designMode changes to 'Off' if the LI is dragged to a new position. And even though I am able to target the correct iframe, it seems to ignore when I tell it to turn designMode back on, does anyone know why this is happening? Thank you for reading.
edit: jfiddle example: https://jsfiddle.net/LcLfaa8j/2/
function getRichTextField( itemId ) {
console.log('get rich text field');
return document.getElementById('rtf-iframe-' + itemId);
}
$(document).ready(function() {
getRichTextField("sort-textItem-1").contentWindow.document.designMode = "On";
getRichTextField("sort-textItem-2").contentWindow.document.designMode = "On";
$("#text-areas").sortable({
axis: 'y',
opacity: 0.8,
tollerence: 'pointer',
update: function(event, ui) {
var order = $(this).sortable( "serialize", { key: "order" } );
console.log("New Order = " + order);
console.log('the iframe that was moved designMode is now Off...');
var richText = getRichTextField($(this).data().uiSortable.currentItem.attr('id'));
console.log('TEST: the current is ' + $(this).data().uiSortable.currentItem.attr('id') + ' and designMode = ' + richText.contentWindow.document.designMode + ' doubleCheckOfRTFid = ' + $(richText).attr('id') + ' class = ' + $(richText).attr('class'));
richText.contentWindow.document.designMode = "On";
console.log('just attempted to turn designMode back on... but it gets ignored');
}
});
});
This is only a partial answer.The designMode isn't getting turned off; it's off by default, and the document where you set .designMode="on" gets deleted (and then recreated from scratch) when you drag it. You can see that if you put content into one of the documents and then drag it, the content disappears. Looks like the iframe is getting a new .contentWindow, which means it has a different child document too.
You can see this in the inspector by running
var before = getRichTextField("sort-textItem-2");
var beforecontentWindow=before.contentWindow;
(now drag the second iframe)
Now run:
var after = getRichTextField("sort-textItem-2");
var aftercontentWindow=after.contentWindow;
Now compare the references with ===:
before === after ;//returns true because iframe is the same
beforecontentWindow === aftercontentWindow ;//returns false because .contentWindow changed
Also see this post Jquery Sortable and Draggable between parent and child frame where he had trouble implementing draggable and sortable, but got it working eventually.
I don't know why being dragged would give your iframe a new contentWindow, but maybe someone else will be able to build on this.
It seems like adding a small delay with a setTimeout before turning designMode back on fixes this. Is this the only solution? Just curious.
I am trying to combine ContentFlow (http://jacksasylum.eu/ContentFlow/) and ColorBox (http://www.jacklmoore.com/colorbox/): when the user clicks on an image in ContentFlow I want an HTML page to be displayed in ColorBox.
I have tried using the code provided by the ColorBox examples' section to no avail. The HTML page is loaded by the browser as a normal link (not in ColorBox.)
I have even tried creating a ContentFlow addon (using the LightBox addon as an example) without any luck - nothing is displayed, not even simple images:
onclickActiveItem: function (item) {
var content = item.content;
if (content.getAttribute('src')) {
if (item.content.getAttribute('href')) {
item.element.href = item.content.getAttribute('href');
}
else if (! item.element.getAttribute('href')) {
item.element.href = content.getAttribute('src');
}
if (item.caption)
item.element.setAttribute ('title', item.caption.innerHTML);
colorbox.show(item.element);
}
}
Edited on 01/Oct/2013
The problem only manifests itself when an item contains an href. To prove this I changed the code above to show a static web page:
$.colorbox({open:true, href:"http://mysite.gr/colorbox/content/static.html"});
It the item is just a simple image the static web page is displayed in ColorBox. But if the item contains an href to the web page I want displayed in ColorBox the browser follows the link and loads the specified page. Any ideas on how to stop this from happening?
Thank you in advance for your help!
I have finally solved the problem I have described in my question. The solution involves creating a ContentFlow addon as follows:
new ContentFlowAddOn ('colorbox', {
init: function () {
var colorboxBaseDir = this.scriptpath+"../colorbox/";
var colorboxCSSBaseDir = colorboxBaseDir;
var colorboxImageBaseDir = colorboxBaseDir;
this.addScript(colorboxBaseDir+"jquery.colorbox.js");
this.addStylesheet(colorboxCSSBaseDir+"example3/colorbox.css");
},
ContentFlowConf: {
onclickInactiveItem: function (item) {
this.conf.onclickActiveItem(item);
},
onclickActiveItem: function (item) {
var content = item.content; // ContentFlow's content class
var theItem = item.item; // ContentFlow's item class - if you need access to it
var hrefToDisplay = '';
if (content.getAttribute('src')) {
if (content.getAttribute('href')) {
hrefToDisplay = item.content.getAttribute('href');
}
else if (!item.element.getAttribute('href')) {
hrefToDisplay = content.getAttribute('src');
}
$.colorbox({iframe:true, href:hrefToDisplay, title:item.caption});
}
}
}
});
The secret is to open the HTML page in an iframe.
Hope this helps!
I am using a script i found here to dynamically generate short link for my Tweet buttons and it works perfectly well, but the only thing i cant seem to do is create the link to open in either a new tab or preferably a popup window.
I have tried several variations of the window.location section of the script but so far I've had no luck. If anybody could point me in the right direct I'd be very grateful.
This is the script I am using...
<script>
var TweetThisLink = {
shorten: function(e) {
// this stops the click, which will later be handled in the response method
e.preventDefault();
// find the link starting at the second 'http://'
var url = this.href.substr(this.href.indexOf('http:', 5));
BitlyClient.shorten(url, 'TweetThisLink.response');
},
response: function(data) {
var bitly_link = null;
for (var r in data.results) {
bitly_link = data.results[r]['shortUrl'];
break;
}
var tweet_text = "Text for the Tweet goes here"
window.location = "http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
}
}
jQuery('.tweetlink').bind('click', TweetThisLink.shorten);
</script>
Many thanks in advance :)
Normally you could just do window.open:
window.open("http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
BUT, since you are doing an ajax call before this happens, chances are that this window popup will be blocked by the browser, since the window.open command is no longer associated with the click (browsers allow a certain time before a window.open command falls under non-initiated "popup").
A solution would be to first open the window on click (in your shorten function):
var win = window.open('about:blank');
And then redirect in your response function:
win.location = 'http://twitter.com/etc...';
Demo: http://jsbin.com/usovik/1
Perhaps you're looking for
window.open("http://example.com");