We Keep Coding

Using client side scripting to control an SAPUI5 app

So, we have an existing app, which I think is built on sapui5 if I am not mistaken. It's pretty much a simple search function app. I reviewed the DOM and noted that the search box form has the ID of #__xmlview0--searchField-F, and the search box container including all is under #__xmlview0--searchField and the actual text entry area is under #__xmlview0--searchField-I. Essentially, it looks something like this - highly simplified:
<div id = "__xmlview0--searchField">
<form id = "__xmlview0--searchField-F">
<input type = "search" id = "__xmlview0--searchField-I" />
<div id = "__xmlview0--searchField-search"></div>
</form>
</div>
There are two pages that I am interested in, one is the original start page for searching, and the other is the search page with results displayed, which also contains the same search box so that users can quickly perform another search. Lets call these start page and results page.
Since the app doesn't seem to take any QS for search strings, I was wanting to create a nested page where I can simply pass on the elements of searching into the app generated page, and display search results with one click, instead of having the users need to do them manually and transcribe things from one place to the search function.
I have attempted initially to simply change the value of the search box and then submit the search:
$("#__xmlview0--searchField-I").val("SOMETHING");
$("#__xmlview0--searchField-F").submit();
Such approach did not work. It appears that the submit will execute for the start page, but will not for the results page. But even with the start page where submit executed, the search text of "SOMETHING" has been lost for sure somehow. So I tried typing in text manually and only doing:
$("#__xmlview0--searchField-F").submit();
Which seems to show the submit button working (also only for start page, not for results page), though it appears that "SOMETHING" is still lost somehow even though I manually entered the text when executed in start page. Thinking something may be wrong with clicking the submit mechanism programatically, I tried only doing:
$("#__xmlview0--searchField-I").val("SOMETHING");
and then manually click the search execution icon (also tried pressing "enter"). But to my dismay, despite the DOM display the changes for the input search field properly, the search did not execute though the button blinked so I am sure I properly clicked it at least.
So I thought, maybe I need to trigger some kind of event before I start making changes to the search field to prompt proper event execution behind the scenes so that the input text will be recognized properly when changed:
$("#__xmlview0--searchField-I").focus();
$("#__xmlview0--searchField-I").val("SOMETHING");
$("#__xmlview0--searchField-I").focus();
$("#__xmlview0--searchField-F").submit();
But that did not work either. I am pulling my hairs out trying to figure out what may be going on. Can someone who knows the SAPUI5 stuff give me some insight? Am I doing something that is simply not possible under this environment?

JavaScript - Selenium Webdriver. How to check if element is visible

Im using Selenium to open a page. After I open the page, I want to click a some sort of refresh button. When I click it, Im getting this error:
ElementNotVisibleError: element not visible
This is the code I use to click the button:
driver.findElement(By.id(id)).click();
My guess is that the button goes not visible whenever it is pushed. And that maybe it starts off not visible as well. Cause it doesnt do a full page refresh.
Any way for selenium to check if something is visible, and maybe wait until it is?
Edit:
As it turns out, there are multiple buttons with the same ID. And the button I am trying to reach are way down. I tried to find the button with By.xpath, but I still couldnt find it. The way I did it, was to search for button by id, like this //button[contains(#id, 'abc')][1]. (Different number of course).
Selenium could not find the element, but I could find it with Chrome developer tools. Any suggestions?

Solution: 1 You can try using this code in a syso,
System.out.println("getting Page Source "+driver.getPageSource());
This method will return the entire page Source and you can check whether your button exists in the source or not. You can place the above code at several points in your function and check until you find the button in the source.
Solution: 2 In case your button does not exist in the source you will have to check and see whether the button is getting loaded in an iframe and if so you can use the following code and switch to the iframe and and then try finding the button,
driver.switchTo.frame(frameName);

In your case you could use Explicit wait to check when the element/button is clickable.
Try doing this
wait.until(ExpectedConditions.visibilityOfElementLocated(id))

local visible text search on current web page

I need to do a local search visible text on a single simple html page. Users can simply use Ctrl+F to do that, but I would like to add a search box on the page to do the search instead. I thought of a couple ways to do this:
1- By forcing the browser's Find tool when a button on the page is clicked.
2- By a javascript/Jquery plugin that do LOCAL search on the current page.
I searched for both solutions but was not able to find anything useful. Does anyone here have any suggestions?

You can give a common class name to the tags that contains the display text and perform a search based on that class name. I had attached a link for your reference. you can make use of that funtion and call that function from a button click.
Generic Search in HTML Page

Access input forms of an existing page using Javascript?

I'm playing around with Google Chrome Extensions and wanted to make one where you fill out a form beforehand. Then whenever, a certain URL is opened, it fills in the information you filled out. I can save the information, and track the tab URL with one of Google's packages. However, when the URL is loaded, how can I tell what form to put the saved strings into? I know how to use var.document.getElementById(""), and can see the ids when I inspect element, but since it's not my webpage, I can't link it to my JavaScript file, so it doesn't help. I've seen this been done before but just can't find the right tools. Any guidance to an answer would be appreciated.

How to identify source of data field being updated on web page

I am trying save data from a web site. There are fields in the html that look like this
<td class="data-value" id="v0">yellow</td>
where the text yellow changes as the user moves the mouse on the page. (To be clear, these fields do not appear in the source if I just do "view-source", but if I use Chrome Develpment Tools and do "inspect element" I can see this.)
I want to find and save the source of this text, which I'm pretty sure is coming from JSON somehow, but I'm not that familiar with Ajax and other tools that the site appears to be using.
So, is there a way to identify where this text is coming from and access it? In other words, I'd like to be able to parse the HTML, and identify what call to make to just see the JSON that is populating this text.

The text may be remotely generated, in which case you will have to simulate the same AJAX requests to access all of the cases.
If the text is stored locally (Javascript), you can access it via events. The first step would be to identify the type of event. Is it a onmouseover or onmousemove? What is the event callback attached to? The page, or the elements being "overed"?
After identifying those criteria with a debugger, you will be able to search the html and javascript references for where these events are being attached in code. That will lead you to a callback function (the one making the decision of which text to post). This callback may perform AJAX, it could have a local table, or it could be a different callback for each element. Any way you go, at that point you will know which file to have your script look at to parse out the data you're looking for.