Develop Reference

Puppeteer select option from drowpdown menu using xpath

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')]`);

Find part of string throughout site and replace with new text

I am still having trouble understanding regex. I am also not even sure if you can target a whole page...but without knowledge of how to format regex, its getting play with it.
I have a trademarked name that appears throughout my page. I'd like to use JS to add a (r) to the end of it every time it appears.
Can jquery/js accomplish this?
$("body").each(function() {
this.innerHTML = this.innerHTML.replace(
'breathe right',
'breathe right(r)');
});
Thanks!

This is a good use case for the CSS :after pseudo-element:
CSS
.product-name:after {
content: " \00AE"; /* add restricted symbol after every element with the product-name class */
}
HTML
<span class="product-name">My Product</span>
Working Demo
The easiest way is to wrap your product name in a span and tag it with a class. I'm not sure if that's less work that just adding the symbol to your markup to begin with, though.
The benefit of this approach is it would allow you to easily apply other styles to your product name, like bolding the text or changing the font color.
You can read more about the :after pseudo-element here.

Yes, but it won't be efficient if you tell jQuery to search the entire document. To make it efficient, you'll need to have jQuery get a specific location to search if you want any efficiency in it.

You don't need jQuery :
document.body.innerHTML = document.body.innerHTML.replace(/breathe right/g, 'breathe right(r)')

Overflow-y not working in javascript?

I want to make an onClick event on the link.
the code:
<a onclick="document.getElementById('myBodyID').style.overflow-y='hidden'" title="my title">Anchor text</a>
Why isn't this working? I want to disable vertical scrolling when the link is clicked.
How could I fix this code? It is not working at the moment :(

Use:
document.getElementById('myBodyID').style.overflowY='hidden'
As CSS properties with special characters are camel cased.
You can also use brackets (document.getElementById('myBodyID').style["overflow-y"]).

You cannot use - inside such a property literal. Instead, use the [] notation.
.style['overflow-y'] =
Currently, you're fetching .style.overflow and subtracting y (as with numbers), which does not make sense here.

how to disable/hidden a list element using Javascript or jQuery

Once my eraser is clicked, I want the color to hidden or shouldn't show its dropdown elements. I tried..here is my partial code.
$('#chooseEraser').mousedown(function(e){
curTool = "eraser";
checkEraser = true;
$('#color').remove();
});
Here is the link

I just tried $("#color").hide(); and it did work on your page.
Your code is just missing the # symbol.
Also, try using jQuery instead of just $: jQuery("#color").hide();. The $ shortcut might not always be available (redefined in some scopes).

I don't exactly understand your question and I don't think you're doing anything wrong in your code. But just for clarification, there are a few ways that you can hide/disable elements using jQuery:
This will hide the element but the element will continue to take up space on the page:
$('#colorId').css('visibility', 'hidden');
This will hide the element and no longer occupy any space on the page:
$('#colorId').hide();
This will disable the element:
$('#colorId').attr('disabled', 'disabled');

How to use onmouseover?

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