We Keep Coding

How to click on text in Puppeteer?

Is there any method (didn't find in API) or solution to click on element with text?
For example I have HTML:
<div class="_5THWM1">flex
<span class="_2i7N3j">Sort By</ span>
<div class="_10UF8M 3LsR0e>Relevance</div>
<div class="_10UF8M">Popularity</div>
<div class-"_10UF8M'>Price -- Low to High</div>
<div class="_10UF8M>Price -- High to Low</div>
<div class="_10UF8M" >Newest First</div>
</div>
I want to click on Price -- Low to high but with the same classes I don't know how to click and I don't know how to click on text. Can anyone help me with this, please?
I am using Puppeteer and please write code to this.

Not really but you can use xpath or you can use find:
page.$$eval('div', divs => divs.find(div => div.innerText.match(/some text')).click())

Question about these filter or dropdown menus

The problems: (dont mind the upper section)
When I click a checkbox the result of the other checkbox also display and it also seems to be adding a margin at the bottom because the popup is moving down.
Second I cant seem to find a way find a way to display the 2 sections side by side.
Is there a way that I could make it that only one checkbox per section can be selected? And if the use changes their mind and click a different checkbox it will also change the displayed result.
heres the codepen link:
https://codepen.io/racrdvz/pen/RwWZrog
<div class="pickerSection">
<section>
<div class="watchingFor">
<p class="type">Watching for:</p>
<div class="menuToggle">
<div class="menuToggleBtn"><img src="https://i.imgur.com/Id2MrBQ.png" alt="" id="watchfor-btn" class="menuBtn"> </div>
<div class="menuToggleBtn">
<span class='display beginner'>30 days</span>
<span class='display intermediate'>60 days</span>
<span class='display advanced'>90 days</span>
</div>
</div>
</div>
</div>
</section>
heres the look im going for:
Forgive me for the multiple questions, any help and suggestion will be much appriciated. Thanks

the solution to point 1 - use the different name of id and class for checkboxes
the solution to point 2 - USe row and col classes to get them in the same row

Loading hidden HTML content into DIV from anchor link

I am trying to create a group of links or buttons that will change the content of a div
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
Each employee has a different image and description but each div are the same size, the first employee will be shown by default as so to have no empty space but when the other 3 are selected the div is filled with the respective div according to it, then you can cycle through the profiles as you wish. Here is my div structure
<div id="employee">
</div>
<div id="employee1">
</div>
<div id="employee2">
</div>
<div id="employee3">
</div>
<div id="employee4">
</div>
Here is the javascript im trying to use
<script type="text/javascript" charset="utf-8">
$('button').bind('click', function() {
$('div#employee').html($('div#employee' + ($(this).index()+1)).html());
});
</script>
All the help i can get would be really appreciated, im not that great at java script and really need a hand with this. Im not sure i explained myself very well but i did try.
Just to confirm, all the divs are hidden until the button is pressed, then the div for that employee will appear, except the first profile which will appear by default on load.
Thanks for your help in advance.
James

Here's a pretty simplified example. It may or may not be the most efficient, but it should do what you want. This is assuming that you're pre-loading all of the content into the divs, but just hiding it at the beginning. If you are wanting to dynamically load the content, then you'll want to use some ajax
HTML
<p><button id="button1">EMPLOYEE One</button></p>
<p><button id="button2">EMPLOYEE Two</button></p>
<p><button id="button3">EMPLOYEE Three</button></p>
<p><button id="button4">EMPLOYEE Four</button></p>
<p><button id="button5">EMPLOYEE Five</button></p>
<br/><br/>
<div id="employee1" class="employeeInfo">
Employee1 is a good employee
</div>
<div id="employee2" class="employeeInfo">
Emloyee2 is an alright employee
</div>
<div id="employee3" class="employeeInfo">
Emloyee3 is the best employee ever!
</div>
<div id="employee4" class="employeeInfo">
Employee4 is not a very good employee
</div>
<div id="employee5" class="employeeInfo">
Employee5 is about to be fired
</div>
Javascript
$(function(){
$("#employee1").show();
$("button").on("click", function(){
$(".employeeInfo").hide();
$("#employee"+String($(this).attr("id").substring(6))).show();
// OR if you don't want to have to give IDs to the buttons
// $("#employee"+String($("button").index($(this))+1)).show();
});
});
CSS
.employeeInfo {
display: none;
}
JSFiddle

If element found, hide only the element after

So let's say I have this scenario of articles:
I have a photo in the left and the content of the article right after the image.
In the content area I have a reservation button.
If the article is reserved, then it will be displayed a small image over the bottom of the photo (transparent written "Reserved").
This stuff is all done.
What I want to do next is to remove the hyperlink-button "Reserve" from the article if it's reserved. Should look like this:
-NormalIMG- [Reservation-Button]
-NormalIMG- [Reservation-Button]
-ReservedIMG- *
-NormalIMG- [Reservation-Button]
-ReservedIMG- *
-NormalIMG- [Reservation-Button]
and so on.
*here's no reservation button
So it's something like this:
Reserve
<!-- reserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"><img src="reserved.jpg" /></div>
<div class="content">
Reserve
</div>
</div>
<!-- reserved article //-->
<!-- unreserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"></div>
<div class="content">
Reserve
</div>
</div>
<!-- unreserved article //-->
<!-- reserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"><img src="reserved.jpg" /></div>
<div class="content">
Reserve
</div>
</div>
<!-- reserved article //-->
I tried with jQuery something like this:
if(!($('.image-reserved').find(img))) {
$('.reserveLink').addCSS('display', 'none');
}
But I got all the "Reserve" links removed...
I realized that I need something that should apply that CSS attribute only after the element 'img' was found.
After that, it should continue the search and apply it when it has to.
I lost all my day trying to figure out a way to get out of this by implementing different structures (using find, has, next, etc.) similar to the above example... but no success.
I'm posting here as a last resort, my hope is completely lost to something that seemed to be so easy to implement...
IMPORTANT NOTE: I know the structure looks weird and it might be really hard for what I want to be implemented, but I am not allowed to modify any code that was written already.

You shoud iterate over each image-reserved :
// For each image reserved
$(".image-reserved").each(function(){
// Count the children
var count = $(this).children("img").length;
// If there's a child (The reserved img), then we delete the following links
if(count > 0){
$(this).next().children(".reserveLink").hide();
}
});

$('.image-reserved').next().hide()

I'd suggest:
$('.content').filter(function(){
return $(this).prev('div.image-reserved').find('img').length;
}).find('a').remove();
JS Fiddle demo.
References:
filter().
find().
prev().
remove().

$('div.image-reserved:not(:empty)+.content a.reserveLink') will find all .image-reserved divs that have content, and select the .reserveLink links in the .content element after them.

Load content on image click

I am trying to create a team page for website.
A picture of each member is laid out in a "grid" type of view. There are two boxes below this grid with some content.
Box 1: Basic div with some text.
Box 2: Div with some sample % or value based bars.
When a website visitor click on a team members picture, the boxes will get populated with information about that member.
Box 1: Description about the person and maybe some links.
Box 2: The data in the bars will change to values that represent the skills the member has.
Can this be done in any way other than: pagify.js?
EDIT*** (16 Aug 2013)
The first part of my question is sovled.
For the second box, I wanted to make a animated skill bar like the ones here http://www.alessioatzeni.com/blog/css3-skill-bar-animation/
How can i update these dynamically?
EDIT*** (17 Aug 2013)
I managed to implement this features :). Thanks.
Thanks

Javascript/jQuery onClick show and hide events should do what you want.
http://www.w3schools.com/jquery/jquery_hide_show.asp - basics
http://www.mkyong.com/jquery/jquery-show-and-hide-example/ - workinging example
http://www.goldensearch.net/content/tutorials/show-hidden-content-with-javascript.php - pure javascript :-)
If this isn't what you're looking for we (or at least I) will need more detail in the question.

Of course you could use AJAX to achieve this behaviour but as long as we're not talking about thousands of team members, a simpler but yet powerful solution is to hide all detailed information and only show them for an active member the user clicked on.
Update: (Working version on JsFiddle [http://jsfiddle.net/9kfKw/])
HTML (Example)
<ul id="members">
<li>Member 1</li>
<li>Member 2</li>
</ul>
<div id="details">
<div>
<div class="left">
<p>Some Info about Member 1</p>
</div>
<div class="right">
<p>Some more Info Member 1..</p>
</div>
</div>
<div>
<div class="left">
<p>Some Info about Member 2</p>
</div>
<div class="right">
<p>Some more Info about Member2..</p>
</div>
</div>
</div>
JavaScript
$(function() {
$('#members li').click(function() {
var index = $(this).index();
$('#details > div').hide().eq(index).show();
});
});
Demo
Find a working version on JsFiddle (http://jsfiddle.net/9kfKw/)