This works fine
https://jsfiddle.net/blazeeboy/fNPvf/
I copied it precisely to my account & editor here, and it won't work. No action on pressing the "submit" button.
https://jsfiddle.net/user/digitareous/fiddles/
function change(){
var myNewTitle = document.getElementById('myTextField').value;
if( myNewTitle.length==0 ){
alert('Write Some real Text please.');
return;
}
var title = document.getElementById('title');
title.innerHTML = myNewTitle;
}
I looked at jsfiddle "getting started" and "beginning tutorial" pages looked for other such starting points, and clicked all around in jsfiddle, run, update, etc. I also built a fiddle from the tutorial and tried to run it, no joy. Tried IE11, Chrome and Firefox. I could not get any of them make the jsfiddle run.
Something is making my jsfiddle editor "inactive".
What might that be?
In the second jsfiddle click on the javascript settings button (top right corner of the javascript code field of the editor) and in the popup field "LOAD TYPE" select "no wrap - in head".
You should now get the desired behavior.
(I get stuck on this from time to time - it is very frustrating).
Related
I am trying to set up a QSelect driven by user input in order to achieve an "autocomplete" behavior. There are a few examples on the official documentation and they make use of the #filter callback.
I have currently two problems:
Whenever I click outside of the input field the input text is lost and the popup disappears.
If I click on the input the current text remains, but the pop is hidden until I click on it again.
For the latter issue, one workaround is to force the popup to show upon click:
<q-select
ref="input"
...
#click.native.prevent="onClick"
>
...
onClick(){
if( this.searchFilter.length > 0){
this.$refs.input.showPopup()
}
}
However, the inconvenience is that the popup still shortly disappears for a short while before showing again. I've also tried using #click.native.stop instead of #click.native.prevent to no avail.
As for issue number 1 I haven't even found a workaround yet.
Here is a related issue, though the popup disappearing was a wanted behavior in his case.
I set up a basic Pen to illustrate the issue. Try clicking on the input or outside the input at the same height.
The trick was to use #click.capture.native and then conditionally stop the propagation inside the callback function via event.stopImmediatePropagation() See it working here
Ok guys,
I'm QAing a claims application by guidewire and this is where im running into an issue.
The header area has header buttons and one of them is Claims, this button has two click zones, when you click on the claims label it recalls the last claim you had opened, when you click the down arrow, it opens and shows you more options.
The option I want to get to is "New Claim"
FirePath shows me two seperate xPaths
For the claim label: .//[#id='TabBar:ClaimTab-btnInnerEl']
For the downarrow label: .//[#id='TabBar:ClaimTab-btnWrap']
Once the downarrow is initiated the xpath for New Claim: .//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']
However when I write my script:
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab-btnWrap']")).click();
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']")).click();
it constantly keeps clicking on the wrong area and recalling the last claim and the script fails.
Here is a screencast of the behavior expected:
http://screencast.com/t/jtI1kGkfmXK
and here is basically what its doing
http://screencast.com/t/s2Q6VrbJl
What can I do to circumvent this issue? Its driving me crazy.
I took help from here
Try this code, and see if it works:
driver.findElement(By.xpath("//span[#id='TabBar:ClaimTab-btnWrap']")).sendKeys(Keys.ARROW_DOWN);
Well what I can gather is you have to get to the "New Claim" span and click it.
You can use Javascriptexecutor and directly click on the "New Claim" even without bringing it up. It helps that your intended element to be clicked has a unique id.
So you can use the following :
var js = Driver as IJavaScriptExecutor;
if (js != null)
{
js.ExecuteScript("document.getElementById('TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl').click();")
}
You need to click open the window and wait for that to open.So,
Some wait needed after your first click
Then, You probably have to use switchTo() to set focus on the newly opened dropdown window. Some examples how to use it are here. After that use a textbase search for finding your element. Something like this.
EDIT:
I found text base search helps a lot in such cases.
try this:
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab-btnWrap']")).click();
//use some static delay for now. But, really you should use some fluent wait for the element to appear.
driver.findElement(By.xpath(".//*[.='New Claim']")).click();
I figured it out! I had to use the actions class but this worked!
Its a little weird but it works
WebElement element = driver.findElement(By.linkText("Claim"));
Actions builder = new Actions(driver);
Action dropdown = builder.clickAndHold(element)
.sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN)
.build();
dropdown.perform();
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']")).click();
video-js has the default toggle-pause-play button, which works fine. for a specific use, i want to a button next to it that pauses, rewinds, show the poster image and the big play button. in other words, a stop button :-)
it should be a simple plugin, but i cant find the right examples .. it would probably start with
videojs.plugin('stopbutton', function(options) {
var StopButton = videojs.Button.extend({ ....
Can anyone point me to the simplest example of adding a button ?
Have a look here for a partial answer to your question.
If you decide to build your own "stop" button on top of the videojs interface then the sequence would be something like (API ref here):
myPlayer.pause();
myPlayer.currentTime(0);
myPlayer.posterImage.show(); // as per OP plans
myPlayer.bigPlayButton.show(); // as per OP plans
I am trying to find a solution to this question posted in the Google Selenium forum a couple years ago (most similar thing I found...unfortunately no posted answer in the forum). In my Selenium testing (Python bindings), how can I click on a Highcharts data series to trigger the onClick event? I am trying to do this for a bar chart, but any examples would work. Manually this works. When I click on a data series, a new div pops up with additional information about that data series, and I would like to verify this action using Selenium. I can get the series tooltip to appear using ActionChains, but for some reason the click() event doesn't seem to fire in Selenium.
I have tried to click on elements with class 'highcharts-series', the children rects of those elements, and the overall parent element 'highcharts-series-group'. The most progress I have is by clicking the children rects of the series, since I can see the tooltip pop up (see screenshot). But no clicking action--Selenium times out waiting for the next step.
One reason might be because the Highcharts group container (highcharts-series-group) has a higher zIndex than the element I want to click (3 vs. 0.1). But clicking the entire group does nothing, and in a real browser, I believe I am clicking on an actual series, not the group container--so I assume that since it works in a real browser, the zIndex shouldn't affect my clicking? You can see how all of these series are arranged in the svg element in the second screenshot.
This is how I am trying the click now. I built this following the solution in this SO question:
parent = self.browser.find_element_by_id('student_chart')
data_series = parent.find_elements_by_class_name('highcharts-series')
data_rect = data_series[0].find_element_by_tag_name('rect')
builder = ActionChains(self.browser)
series_click = builder.click(data_rect)
series_click.perform()
Thanks for your help!
UPDATE
So this seems completely hokey, but if I click on every single series using a for loop, the last one "takes" and the expected onClick event occurs. When I test manually, though, clicking on any single series works. The code which triggers the last series is:
parent = self.browser.find_element_by_id('student_chart')
data_series = parent.find_elements_by_class_name('highcharts-series')
for series in data_series:
rect = series.find_element_by_tag_name('rect')
if rect.text == '':
rect.click()
This seems like a complete hack just to make my test work, so I am wondering if anyone knows a root cause of why clicking on a single element doesn't work, or a cleaner way to do this?
Thanks!
UPDATE #2
So I looked at the library that Robbie pointed out in his answer below, which seems to use ActionChains to build out its interactions with HighCharts. The library is cool and obviously works for others, but the author only seems to track mouseover events...and when I tried different variations of the below code for a click event, I could only get the tooltip to appear--no click event. So I still seem stuck. ActionChains seem to work okay for reading tooltips and values from HighCharts with Selenium, but click events still seem a mystery to me...
parent = self.browser.find_element_by_id('student_chart')
data_series = parent.find_elements_by_class_name('highcharts-series')
series_number = 0
for series in data_series:
if series_number == 0:
click_object = series.find_element_by_tag_name('rect')
else:
pass
series_number += 1
builder = ActionChains(self.browser)
click_me = builder.click(click_object)
click_me.perform()
Have you checked this project? https://github.com/Ardesco/Powder-Monkey/tree/master/src/main/java/com/lazerycode/selenium/graphs
When I was automating Highcharts in Selenium C# last year, I was able to dissect this java project and get a really good understanding, then write my own version in C#.
Perhaps this could give you some ideas and hints
I was not able to find this answer by myself and I apologize if my search was not deep enough.
After so much time I've been lurking in stackoverflow, I finally have the chance to drop my own question (actually it makes me sad as I'm fairly happy to show no one how dumb I am.)
I'm working on this website http://italianliving.fi (pick english language) and by far everything I needed is working as I think it's supposed to. My issues comes with catalogs page, after I open one colorbox to display some external content, my footer seems not working as supposed to. There's a [ + ] at the bottom right which is supposed to open/close the footer; it works well until I call any colorbox, after that call it goes messed up, it slides the footer up but as far as it opens it, it closes it as well. My code for that is:
$('#footer_toggle').click(function(){
if ($(this).text()== "[ + ]")
{
$(this).text("[ - ]");
$('#footer').animate({ 'height': '240px' }, 400);
} else {
$(this).text("[ + ]");
$('#footer').animate({ 'height': '20px' }, 400);
}
return false;
});
but I'm fairly sure the problem is with Colorbox itself. Any hint about how to proceed? Any other way to toggle the footer otherwise? Thank you very much in advance.
Your cards (i.e. http://italianliving.fi/pages/info_card.php?b=verysofa&lang=en) include the code.js file, but do not include the colorbox plugin. This issues an error.
I don't know if this is the source of the footer problem, but try fixing that first.
EDIT: Seems that you attach the click handler twice. When the colorbox subpage opens, it fires code.js again, which attaches the second click handler to #footer_toggle.