Develop Reference

Trying to programatically click a button on a web page with cefsharp

I'm using cefsharp and vb.net to put some code together to move to the next page of this site:
https://www.recommendedagencies.com/search#{}
The idea is to read the list of company names on each page and store to a csv file. This part I can do.
The problem I have is that I can't find the name of the 'Next' button - presumably if I had that I could execute some javascript on the browser to press the button.
I've inspected the page in Firefox, but can't see any name I can use - I'm not really familiar enough with html/page design to know why not or how it works.
Could anyone tell me a good method to get button names from a web page? - I've done some searching and even asked a similar question myself before, but I can't find anything which helps, given my patchy knowledge.
Thanks

Inspect the DOM for the 'Next' button.
Look for id's or classes that you can use to identify it.
use document.querySelector() to find the element by the css selector
call the element.click() function to programatically press next
const nextButton = document.querySelector('.sp-pages-nav_next')
nextButton.addEventListener('click', (event) => {
console.log('something clicked next')
})
nextButton.click()
<div class="sp-pages-nav sp-pages-nav_next" data-reactid=".1.3.4.1">Next</div>
In the above snippet on load you can see the code nextButton.click() invokes the console log. You can click the word Next manually to the same effect.
in cefsharp perhaps something like:
browser.ExecuteJavaScriptAsync("(function(){ document.querySelector('.sp-pages-nav_next').click(); })();");
A very similar example can be found here :
https://github.com/cefsharp/CefSharp/wiki/General-Usage#1-how-do-you-call-a-javascript-method-from-net
// When executing multiple statements, group them together in an IIFE
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
// For Google.com pre-populate the search text box and click the search button
browser.ExecuteJavaScriptAsync("(function(){ document.getElementsByName('q')[0].value = 'CefSharp Was Here!'; document.getElementsByName('btnK')[0].click(); })();");

Get the selector of a hidden button element

Im trying to find a selector to the following button:
Inspecting Button
I need this for a Puppeteer headless chrome task.
e.g.: await page.waitForSelector(The selecor comes here);
The site: https://www.notebooksbilliger.de/
The button appears after adding a random product to cart and then redirect to: https://www.notebooksbilliger.de/kasse/anmelden
Would appreciate some help, wasted many hours trying to solve this :)

Since, there is no specific id to select. Here I'm trying with href attribute.
buttons = document.querySelectorAll("a[href='https://www.notebooksbilliger.de/kasse/unregistriert']");
Now, you can do any script work with
buttons[0]

Get link of a button and assign to other in jQuery

I am working on an ecommerce site, I have a page that shows the products grid. There are two button side by side. One contains link to the post and other opens a dialogue box with textarea inside. (see picture)
Image 1
Image 2
Now, what I want is when I click the GETLINK BUTTON button it must take the href attribute of the VIEW BUTTON and populate in the textarea. But what I get in the link of 1st product only even if I click the other Get Link Buttons.
Here's the JS code:
function opengetlink(){
var sacprodlink = document.getElementById("sac_prod_link").href;
jQuery("#sac_link_text").html(sacprodlink);
}
Help would be appreciated, thanks in advance.
EDIT: Solved
$(".open").click(function() {
var link = $(this).closest('div.viewbutton').find('a.btn-link').attr('href');
$("#link_text").html(link);
});

Ids are given to HTML elements to make them unique. Since you have many elements of the same kind and want to perform the same operation on each of them, you should use classes. Give your View and Get Link buttons a class.
$(".sac_open_link").click(function() {
var link = $(this).siblings(".sac_prod_link").href;
$(this).html(link);
});

ajax/json/? to query a webpage and return specifc div/p values

I'm trying to find code or a way to process the following:
When you click a button a site it'll go and read specific website link and then return variables that it finds in the remote page.
1) user clicks button
2) query goes to www.whatever.com/myfile.html
3) there is a specific p tag inside a div tag called 'totalamount' = <div id=WTextWrapper><p id="Amount">2,000</p></div> That I want to grab the value of and then display it on my page below the button that I clicked in step 1
I know there is a way to do it, but I have no idea how it's done.

You need to get the source of the html and use regex to extract what you need. You can use file_get_contents() function to get the source html.

changing id within javascript with onClick var?

I managed to get some js to work to my surprise, now I want to make it a little more complex which is way out of my expertise.
I have a button when clicked will reload a iframe that is on my page. I have multiple iframes all but 1 are hidden. Then I use jquery to display a different iframe and hidden the previous depending on the nav button clicked. e.g. "1-btn" (nav btn) tied to "1-win" (iframe), "2-btn" (nav btn) tied to "2-win" (iframe) etc. So when you click "2-btn", "1-win" iframe hides and "2-win" iframe is displayed. Now I want to change my code so this ties into my reload javasrcipt. Currently, my js only reloads 1 iframe via the iframe id. I want to change this id every time to a different iframe. This will allow my Reload btn to only reload the current iframe displayed and not any of the other that are hidden.
Here is my Reload js
function Reload () {
var f = document.getElementById('1-win');
f.src = f.src;
}
As you can see this reload script only works for iframe "1-win". When i click "2-btn" nav to display "2-win" iframe (and hides "1-win") the reload button still only works for "1-win". Therefore, I want it to also change. For e.g. when I click "2-btn" (nav) to display "2-win" iframe I want to change the Reload id to "2-win" also.
I was thinking of using onClick within my nav buttons which passed through the id of the iframe which that nav btn is tied to. However, I have no idea how to do this.
For full code see:
https://github.com/tmacka88/Service-Manager
Sorry if this doesn't make any sense, I cant think of an easier way to explain it.
Thanks

EDIT
This below answer may or may not still apply now that the problem has been better defined.
One approach you could try is having a hidden field on the page which contains a semi-colon separated list of the Id's of the iframes. E.g.
<input type="hidden" name="iframeids" value="1;2;3;4;5">
On the click event of your button, call some JavaScript which gets the value of the hidden field, takes the first token before the semicolon, and then reorganise the string. An example:
// Next value is 1
// Use 1 in your JS
// Put 1 to the end, next is now 2
<input type="hidden" name="iframeids" value="2;3;4;5;1">
You would contain the logic of re-arranging etc. in the JS function.

Now that the problem is better defined, we can work out a proper solution.
Here are some design considerations:
Ideally you do not want to manually add a new button for every iframe that you put on the page. Main reason being code maintenance. If you were to add a new iframe, or remove one, your code would not function correctly. Also the amount of mark-up required will be unnecessarily high
jQuery will make your life easier, although it's not required, it will cut out a lot of code. I can't stress enough the importance of knowing JavaScript basics first, but this is your responsibility to learn
For point 1, what we would like is a generic solution so that if you add more iframes, the buttons are added automatically. JavaScript is the way to do this (I'm assuming this is just HTML, not ASP.net or php or some other server side
Point 2 - jQuery will help with point 1.
Now we have this understanding, let's look at an outline of what we need to do:
In JavaScript, loop through the iframe tags on the page
For each iframe, generate a button using jquery, using the values like src and id in the iframe as attributes on the button
Add some click-event code to the button do define what it needs to do when clicked
Again using jQuery, add the newly created buttons to the DOM

This did the trick:
function Reload()
{
$("iframe").each(function()
{
if($(this).is(':visible'))
$(this).attr('src', $(this).attr('src'));
});
}