Getting DOM from page using Chromium/WebKit - webkit

Trying to get access to a page's DOM after rendering. I do not need to view the page and plan to apply this programmatically without any GUI or interaction.
The reason I am interested in post-rendering is that I want to know where objects appear. Some location information is coded in the HTML (e.g., via offsetLeft), but much is not. Also, Javascript can change the ultimate positioning. I want positions that are as close to what the user will see as possible.
I've looked into Chromium code and think there is a way to do this but there is not enough documentation to get started.
Putting it VERY simply I'd be interested in pseudo-code like this:
DOMRoot *r = new Page("http://stackoverflow.com")->getDom();
Any tips on starting points?

You should use the Web API wrapper that Chromium exposes; specifically, the WebDocument class contains the functionality that you need. You can call it like this:
WebFrame * mainFrame = webView->mainFrame();
WebDocument document = mainFrame->document();
WebElement docElement = document->docElement();
// Manipulate the DOM here using docElement
...
You can browse the source code for Chromium's Web API wrapper here. Although there's not much in the way of documentation, the header files are fairly well-commented and you can browse Chrome's source code to see the API in action.
It's difficult to get started using Chromium. I recommend looking at the test_shell application. Also, a framework like the Chromium Embedded Framework (CEF) simplifies the process of embedding Chromium in your application; I use CEF in my current project and I'm very satisfied with it.

Related

Use node-webkit to remote control an iframe?

I'm trying to automate a work flow where we have to log in to a website, navigate, get redirected several times and finally have to upload a file into a reporting system.
After failing with phantomjs/casparjs (where we also do not really get visual feedback) I was thinking about using node-webkit.
So basically, what I am trying to do is writing a "controller" that is opening another webpage in an iframe and then manipulating the fields, hitting buttons, ...
Is this something that can be done? If yes, I am struggeling to get a handle on the fields to fill them...
Or is this a classic "wrong tool" approach and we shouldn't be doing that?
Something along the line of
var new_win = gui.Window.get(
window.open('https://remote/login/site/')
);
gui.Window.get(new_win).on('loaded', function () {
//all of this doesn't really work but might help you to understand what I try to do
//window.console.log(new_win.window.document.getElementById("user"));
//window.eval(new_win, "code_to_fill_the_user_field");
//var userField = new_win.window.document.getElementById("user");
//console.log(userField);
});
Update: 2014-08-02:
I understand now that webkit is intended for creating desktop apps with HTML5 and not remote controlling websites, so we forget about this question.
I did solve the problem with phantomjs/casperjs now, BTW.
I understand now that node-webkit is intended for creating desktop apps with HTML5 and not remote controlling websites, so we forget about this question. I did manage to solve the problem with phantomjs/casperjs now.

Library or API for file browser view?

I would like to implement a file browser view in my application so users can open files using a side panel similar to the browsers in XCode, Text Wrangler and some other programs.
Before I go off implementing another one of those browsers from scratch, does anyone know if there are existing libraries or APIs that already does this?
Google doesn't turn up with much and most of the searches point me to NSOpenPanel which I believe doesn't do what I want.
Thanks in advance.
The Cocoa class that is used to display hierarchical lists is called NSOutlineView.
Outline views provide several configuration options to adjust the appearance.
The content can be provided by implementing a data source protocol or via Cocoa bindings.
Apple has some sample code online that should get you started (it's a file browser - so maybe you can use larger parts of that sample):
https://developer.apple.com/library/mac/#samplecode/SourceView/Introduction/Intro.html

Make input in program input value at website

I want a function in my JavaFX 2.0 program that takes user input and forwards it to a websites textfield, and then get the value the website returns. The website would be a site to check if the warranty for a spesific program is valid.
All the user would need to input is reg. ID and maybe program brand.
I'm just looking for ideas on how to do this, links or even code would be superb. I suspect it won't require that much code, but hey.. i've been surprised before!
Thanks! :)
A possible implementation algorithm:
Load the warranty check page in the WebView.
Monitor the webEngine.documentProperty to check for when the load has finished.
When the load has finished, use webEngine.executeScript to set the text field to the
required value and submit the form.
EITHER
a. monitor the webEngine.documentProperty some more, and, when the document has loaded, inspect the document (using either JavaScript or Java) to see if the warranty is valid.
OR
b. change the resultant warranty display page to call back into Java and notify your app of the warranty status.
Some background info
If you have control over the website page contents, then your implementation may turn out easier. But I think you should still be able to get the result you want without modifying the website.
There were some additions to the recent JavaFX 2.1 release to facilitate callbacks from Javascript to Java. The webview documentation you want to read is the sections "Processing JavaScript Commands" using the webEngine.executeScript method and "Making Upcalls from JavaScript to JavaFX" using JSObject.setMember.
You might want to also take a look at a Sample DatePicker for JavaFX using jQuery UI example I wrote. It demonstrates various methods for loading html into a WebView, invoking functions on the WebView from Java and getting the results of user interactions with the WebView back into Java. Not exactly what you are looking for, but perhaps the ideas in it may help.
Another option you have is just to:
Accept the registration id in a JavaFX control.
Create a java.net.URL and post to the webserver from your java app directly without using a WebView.
Parse the response from the webserver to extract out whether the warranty is valid.
This is the approach I might take for such a task - eliminating the use of WebView completely.

Standalone video control example for Google TV jQuery Library?

The jQuery VideoControl is documented here:
https://developers.google.com/tv/web/lib/jquery/#gtv.jq.VideoControl
It takes a set of VideoParms. That are not specified.
It is used in the sample templates on this page:
https://developers.google.com/tv/web/docs/gtv-templates
I've taken apart the templates, but I'm having difficulty creating a simple example of a standalone video control. In the templates, the sidenav and carousel code are tied to how the videocontrol works. There is a relationship between the keyController and behavior (behaviorZones) that I can not find an explanation for.
Is there a standalone example somewhere? What needs to be setup with keycontroller, css, and behavior to get this going?
I'm not aware that there is a standalone videocontrol.js sample but it should be possible to set it up. Most of the necessary pieces are inside videocontrol.js, in particular in the videocontrol's constructor and this function: gtv.jq.VideoControl.prototype.makeControl.
keycontroller mapping is used to handling key inputs and some of the CSS are dynamically controlled within JS so there might be errors if you just rip them apart straight from the Template. You'd have to debug it using a solid tool like Chrome Developer Tools. You can watch tutorials of this tool here: http://www.youtube.com/results?search_query=chrome+developer+tools&oq=chrome+develop&aq=0&aqi=g3g-m2&aql=&gs_sm=3&gs_upl=1972l4015l0l6142l14l11l0l0l0l0l207l1476l3.5.3l11l0
Otherwise please send your error traces and/or code snippet for debugging help.
S

Cocoa automated WebView

I looking into making a kind of robot testing browser. Like Selenium, but one that we can use to make full integration tests of our site. I'm wondering if it's possible to create a Cocoa app that loads up a web page in a WebView and they programmatically sends click events. I realize you could use:
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
To send js click evenets, but it would be better if you could send click events to the DOMElements themselves. That way you could test file uploads and other elements that can't be accessed via javascript like flash. Does anyone know if this is possible?
You can obtain DOMNode* objects corresponding exactly to JavaScript Node objects by using a WebView's -windowScriptObject method (that returns the WebScriptingObject* that corresponds to the JavaScript window object) or any frame's -DOMDocument method to return that frame's JavaScript document method.
Example:
DOMDocument* d = [[webView mainFrame] DOMDocument];
[[[d getElementsByTagName:#"a"] item:0] click];
Fake sounds like exactly what you want. It's WebKit based, automated, has tab support, and a huge library full of useful things like evaluating JavaScript, assertions, variables, events, and loops. Highly recommended.