Spynner - accessing DOM

Question

I've just learned that there is a difference between a browser's "view source" and "inspect element". When I use "inspect" in firefox on a specific webpage I get the following:

<html>
 ...
    <div class="someClass" id="someID" style="z-index: 12001; left: 0px; top: -487px; width: 1288px; height: 843px; opacity: 0.7; visibility: visible;">
 ...
</html>

However, when I use "view source" I don't see this element. The problem of not seeing the element occurs, when I access the webpage via Spynner and parse the html. Since I need to know the value of "visibility", my question is: how can I access the DOM within Spynner?

I've already tried the following source code:

br = spynner.Browser()
br.show()
br.load(url)
ret = br.runjs('document.getElementById('someID');")
print ret

But this will only print out:

<PyQt4.QtCore.QVariant object at 0x9870e64>

//

EDIT

Since ret is a QVariant I managed to turn it into a PyObject by modifying my code:

ret = br.runjs('document.getElementById('someID').getAttribute('style');")
print ret.toPyObject()

The only problem I have right now is: print only displays the first value of "style"

z-index: 9999;

Can I somehow access the other values (left, top, height, opacity, visibility)?

An element's [*style* object](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style) only has those properties that are set directly on the element. If you want values inherited through CSS, try something like [*element.getComputedStyle*](https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle). — RobG, Dec 29 '14 at 13:39

score 0 · Answer 1 · answered Dec 29 '14 at 03:40

0

Dynamically added controls won't be visible in browser's view source option(in mozilla) but they would be updated in the DOM. You can directly search for the element and read its visibility value.

//read visibility value and store it in x
var x =  document.getElementById("someID").getAttribute("visibility");
alert(x); // display value of x in a pop

answered Dec 29 '14 at 03:40

ganesh

228
3
11

Perhaps you missed "*…how can I access the DOM* ***within Spynner***". – RobG Dec 29 '14 at 03:54
@RobG Perhaps he did, perhaps. – Ryan Dec 29 '14 at 03:56
@ganesh Thanks for your answer. I finally managed to see the first value of "style" (see Edit). Do you have any idea how to access the remaining values? – LeMarq Dec 29 '14 at 13:15
I haven't worked on spynner. But can you try this ret = br.runjs('document.getElementById('someID').getAttribute('visibility');") for reading visibility value. Similarly try for other attributes if it works. – ganesh Dec 30 '14 at 03:21

LeMarq · Accepted Answer · 2014-12-29T21:53:22.257

0

I found out that I messed with my code. Instead of "someID" I inserted "someOtherID", which didn't contain the attribute I was looking for. This stupid mistake took me a lot of time.

Then the other thing is: the element I was looking for is a java PopUp. If a user gives input, which is not allowed, then this PopUp will show up and needs to be confirmed. So what I've done now instead of checking if the PopUp is "visible", I check if the confirmation button is "not disabled". This is done via:

val items = document.getElementsByTagName('input');

for(var i=0; i<items.length; i++){
  if(items[i].getAttribute('name') == inputName){
    if(items[i].getAttribute('disabled') == null){
      items[i].click();}}}

This js-code gets called via the runjs()-method inside spynner. The solution may be pedestrian, but it works for me. Also I know that this solution is very specific. But maybe someday someone might have a similar problem.

edited Dec 29 '14 at 21:53

answered Dec 29 '14 at 21:47

LeMarq

65
6

1

You can dispense with *getAttribute* and read the properties directly: `if (items[i].name == inputName)`. Also, the *disabled* attribute is boolean, so: `if (!items[i].disabled)`. If you can use *querySelector*, then: `var el = document.querySelector('input[name='+inputName+']'); if (el && !el.disabled) el.click()`. – RobG Dec 29 '14 at 21:58
Thanks! The disabled attribute is bizarrely not a boolean. When the button is disabled the attribute is `disabled=""`. And when the button is active the element has no attribute "disabled" anymore. – LeMarq Dec 29 '14 at 22:05
Which is why I suggested using properties. ;-) – RobG Dec 30 '14 at 05:47

Spynner - accessing DOM

2 Answers2