I'm trying to select one of the optiones from this menu:
Let's say I want to click on the "Online Webinar" option.
I have to click on the input to open up the dropdown menu
I have to target the option that I'm looking for using waitForXPath, that means that I'm targeting elements for it's text content, not by class or id
This is my HTML structure:
And this is how I'm targeting the "Online Webinar" in my code:
And this is the what I'm getting from this code
As you can see, is not selecting the "Online Webinar" option, and I think that it's because there's a whitespace at the beginning and end of the string that I'm looking to target and I think this is the problem
However I don't know to workaround this issue, should I look for a way to use the trim() method, or there's a Puppeteer way to get around it?
I found a pretty simple solution
let venueOption = await page.waitForXPath(`//li[contains(text(),'Online Webinar')]`);
Related
hello what I want it is simply like in the image below :
I want if I add #element1 so the div which have the same id ="element1" so it will get colored somehow , I just want to know what to type on google so I can find a solution because I searched for javascript hash etc but without any success.
you need to use window.location.hash to get the hash value
so if your hash is #someId23
do something like:
if (window.location.hash){
$(window.location.hash).addClass('selected');
}
This answer will help you to focus div, then you can use 'div:focus, div:active' pseudo classes and add some animation there, there are a lot, google it
This is better than jQuery manipulation. Also page performance doesn't affected
I am new to watir and ruby. I have two questions for which I am unable to get the solution. I have googled and have still not got working solution. Any assistance will be of great help.
Question 1 : How to fire Javascript event.
The html is as mentioned below.
img onclick="javascript:previousScreen(1);" alt="Back" src="/WSWeb/images/someimage.gif"/
I have tried most of the solutions likes, fireevent etc. which was on Google. Please write me a piece of code which will work for the mentioned scenario.
Question 2 : How to click or validate if the element exists for html mentioned below.
Scenario 1 : This is the html text
input onclick="history.go(-1)" type="button" value="Back"/
Scenario 2 : <center> under this-> Text - Login Id. This is all what is present. This is a cell in a table which is in a frame. Please write me a code for both the scenarios.
Well, if you have two questions, post two questions. :)
If the page is public, post a link to it, that is the best way for us to help.
Regarding javascript events, see How to find out which JavaScript events fired?
You can click the button like this:
browser.button(:value => "Back").click
For the center element, you will have to provide more HTML. I am not sure what you need to do with it.
First of all, as to selecting elements that do not have an attribute, see the answers (all three) to this SO question asked a little while back: Accessing an element with no attributes in Watir
With regard to your specific examples/question here: If you refer to the watir wiki's listing of methods supported for selecting elements you will see that an image element (img tag) can be selected by the src. So for your first thing, just do this
browser.image(:src => '/WSWeb/images/someimage.gif').click
if for some reason the click method does not work, then you could try firing the onclick event directly
browser.image(:src => "/WSWeb/images/someimage.gif").fire_event('onclick')
For the second part, you will also notice that value can be used to select 'button' elements which includes input tags of type=button. thus to see if the button is there
browser.button(:value => 'Back').exists? #(will return true or false)
For the second scenario there, Watir does not currently support selecting by most formatting tags like center, so you would need to look at what element contained that text. You say it is a table cell (td) inside a frame (which I don't know how to identify since you provide no html) and if that is the case and I am understanding it right then
browser.frame(:how => 'what').cell(:text => 'Login Id').exists?
should work (presuming the text is actually 'Login Id' and not 'Login ID')
I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..
What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>
You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.
Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.
As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.
For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage
Hey I am trying to choose option from one site with javascript. No luck, I have tried couple of methods, but none seem to work. In this site http://www.finnkino.fi/movies/maxim_helsinki there is dropdown menu which says Tänään, 13.11.2010. I need to change to to another value from the menu with javascript. Help is highly appericiated! Thanks!
Emulating the user's mouse clicks:
$('#dt_input').click();
$('#dt_input_14\\.11\\.2010').click();
Two backslashes are necessary before each dot because jQuery interprets the dot to refer to a specific HTML class; we need to escape the dots. Alternatively, use document.getElementById, which doesn't require the dots to be escaped:
$(document.getElementById('dt_input_14.11.2010')).click();
You could set the value of the <select> tag to some other value:
document.getElementById('dt').value = '08.01.2011';
This will select the option with value="08.01.2011".
Or using jquery:
$('#dt').val('08.01.2011');
I have the following DOM structure:
/*:DOC += <div id='testDiv' class='testDivClass'><div id='innerTestDiv'></div></div><span id='testSpan' class='testSpanClass'><span id='innerTestSpan'></span></span>
Now I tried to run jQuery select against them as follow. The first one returned alright, but the second one failed:
// works
var result = $('#testDiv')[0];
alert(result.id);
// failed: id is null or not an object
var result2 = $('#testSpan')[0];
alert(result2.id);
I tried selecting id instead of class and got the same results.
My question is: how can I get the second select to work? Is there some sort of invisible iterator/pointer in jQuery which I need to reset to the beginning of the DOM before the second select?
Thanks.
EDIT: Ok this is the official "does not work" version. testDiv matched, but testSpan did not, hence I got an error saying id is null or not an object error in the second alert.
UPDATE: I did a test by swapping testDiv and testSpan in the html. Now BOTH select failed.
UPDATE2: I have changed the html back to what it used to look like. I'm using JsTestDriver to write up the test, but it is actually not calling anything at the moment. The actual html looks messier than this (more nested tags). I'm trying to get this simplified version to work first. It appears that jQuery was able to get into the first select, whether it'll be span or div, but couldnt get out of it to do the second select. I've replaced jQuery.js and jsTestDriver.jar to no avail.
Thanks.
The .className selector matches by class, not ID.
Therefore, $(span.testSpan) won't match any elements.
You need to change it to $('span.testSpanClass') ot $(span#testSpan') (using the #id selector, which matches ID).
For more information, read the documentation.
I don't know why, but for me your code worked well.
I added $(document).ready(function() { before that code, and when I opened the test page, the alert box showed up perfectly, both of them! I don't know when do you want this alert box showed, but if it is when visitor open the page, just add that code. Otherwise, add
function objectid() {
var result = $('#testDiv')[0];
alert(result.id);
var result2 = $('#testSpan')[0];
alert(result2.id);
}
That code worked well for me, too.
PS: Sorry if you don't understand my bad english.
More than likely, there is something else wrong with the HTML you're actually using. Since you're posting only a tiny bit of the html, we can't actually test your problem. Post the entire page, or at least the smallest piece of it that actually has the problem when you run your test.
I tested the jQuery code you reported on JS Bin, and the code worked fine. As the code is very basic, I don't think the problem is caused by the version of jQuery used.
What I ended up doing is wrapping the entire html with a div or span tag. I found that jQuery could not get out of a div/span tag once it gets into one (in my above example), so I just make it to go into a div/span tag once.
Not sure whether this is a patch or ugly fix, but it solved my problem for now.
Thanks for all the help!
Use "#" to select by id, use "." to select by class...