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(); })();");

How do I switch between HTML pages in JavaScript

I've made a search bar in my web page and I'm trying to get the user input and compare it to a keyword. If it matches, show the user what he is searching for in another page.
The problem is that I don't know how to switch between pages of the HTML using JavaScript (being in page1.html and then take the user to page2.html if the keyword matches).
I've tried to implement href to a function and then running it when the search button is pressed but I haven't found a way to do it.
Here is the code:
<script>
let search = getElementById("Search").value;
if (search == "Keyword") {
//a href="page2.html" - (this is was my main idea, but i haven't found a way to implement it correctly)
}
</script>

First, you have to get the value from the input that you create and then you have to compare between the value that you get it and the specific keyword that you want, and after that, you have to create a button to submit with it. Then you can try this line
window.location.href=“./Page2.htm”;
inside if condetion.

try with:
window.location.href=“./Page2.htm”;

You can use
window.open(stringURL);
to open the html in a new window.
To open a new tab:
window.open(stringURL, “_blank”);
For more info: https://developer.mozilla.org/en-US/docs/Web/API/Window/open

Selenium doesn't click on the top-most element

Consider the following Selenium automation:
Its goal is to go to a financial chart from the website Barchart, click on the custom calendar icon (at the top right corner over the chart), input a custom range in the form that pops up over it, and validated it using the apply button.
driver = webdriver.Chrome()
url = 'https://www.barchart.com/stocks/quotes/AAPL/interactive-chart'
driver.get(url)
driver.find_element_by_css_selector('.calendar-icon').click()
driver.find_element_by_css_selector('option[label="Intraday"]').click()
driver.find_element_by_css_selector('[data-ng-model="selectedAggregation.range.from"]').send_keys('11/01/2019')
driver.find_element_by_css_selector('[data-ng model="selectedAggregation.range.to"]').send_keys('11/01/2019')
driver.find_element_by_css_selector('[data-ng-model="selectedAggregation.range.to"]').send_keys(Keys.ENTER)
driver.find_element_by_css_selector('[data-ng-click="modalConfirm()"]').click()
It works fine for the most part, until I try to validate, which never works. I then realised that sometime this last action would lead me to a promotional page whose link is located exactly beneath the Apply button. Which seems to indicate that selenium 'click through' the form onto the link below.
I have tried other selector for the apply button, which all give the same result.
I also try to use the submit() method from selenium, which returns an error. Lastly, I also try to implement the execute_script method from selenium, but I did not manage to understand what exactly is the javascript call being executed on clicking apply.
Note : this is because i need to get the cookie and xsrf token that is generated by that call, not because i need to collect the actual financial data ( I know that the financial data can be collected using 'https://www.barchart.com/proxies/timeseries/queryminutes.ashx?' + data), where data are the query string parameters.
Any help greatly appreciated.

I had a look for you, the below should accept the changes for you, I've checked this and it works for me.
javascript = 'document.querySelector("body > div.reveal-modal.fade.interactive-chart-modal-aggregation.in > div > div > div > button.bc-button.light-blue").click()'
driver.execute_script(javascript)

Insert text into editable field from web extension

I am developing a WebExtension, and one feature is to have a context menu item on editable fields, which when selected opens a confirmation window and then pastes a value into the editable field.
At the moment I have the context menu item, which opens the window, but getting some text inserted into the editable field is proving tricky. The closest I have managed so far is:
let code = 'setTimeout(function() {document.designMode = "on";document.execCommand("insertText", false, "apple");document.designMode = "off";}, 1000);';
browser.tabs.executeScript(parent_tab_id, {"code": code});
window.close()
The whole designMode thing seems it bit weird, and the code does not work very reliably. Is there a better way to do this? The root of the problem, is that I don't see any way to find the editable field that was clicked on.

I would do it like this:
let code = 'document.activeElement.value = "apple";';
browser.tabs.executeScript(parent_tab_id, {"code": code});
By the way, window.close inside a background script is browser.tabs.remove(currentTabId). You can get the current tab id by querying the tabs API (example 2): https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/query#examples

Selenium, pop up form (Python)

I am trying to fill forms on certain webpages. I am having success with most
pages however certain ones are giving me trouble.
Some pages have a format where the form is not initially visible on the page itself, instead you need to click a button which then opens a (what seems to be JavaScript) pop up within the page which then needs to be filled.
I have looked around and have seen examples which address how to fill forms which get created in a new pop up window and which get created in alert windows. However I can not seem to find any examples which can solve this particular case.
This is the code I have so far.
driver = webdriver.Chrome()
driver.implicitly_wait(10)
mouse = webdriver.ActionChains(driver)
driver.get(url)
driver.maximize_window()
value = 'fill form'
span_xpath = '//span[contains(text(), "' + value + '")]'
span_element = driver.find_element_by_xpath(span_xpath)
mouse.move_to_element(span_element).click().perform()
time.sleep(5)
Everything works till here, the fill form button gets clicked which opens the form in the browser page.
But when the following is execute an error always arises: "no such element: unable to locate element"
n =driver.find_element_by_id('name')
n.send_keys('john smith')
I have tried to locate the element by, name, id, xpath and so on but no matter what try, it can not locate any of the form elements.
I would greatly appreciate any help on this matter.

First switch using driver.switch_to_frame(0) (parent iFrame)
then switch using driver.switch_to_frame(1) (chiled iFrame)
and then find the element.
Note: instead of using index you can identify the frame using id, name, xpath etc. like any other Web Element and pass that element to switch_to_frame as an argument. This gives more consistency.