Merkwürdiger Offset mit Watir/Capybara und PhantomJS

Question

Ich möchte die Position von Elementen auf einer Seite mit Watir und PhantomJS erkennen. Mein zweiter Ansatz mit Capybara ergab den gleichen Offset.

Während die Elemente auf der linken Seite gut aussehen, wird die rechte Seite versetzt:

ich den Screenshot gemacht, bevor und nachdem ich die Positionen für jedes Element mit element.wd.location packen, aber der Offset ist immer die gleiche . Ich benutzte evaluate_script und .getBoundingClientRect() mit Capybara.

Eines sieht mir verdächtig aus: Das Sucheingabefeld ist nicht korrekt geladen und zeigt nicht nur eine Fehlausrichtung, sondern auch eine andere Größe und die Lupe wird nicht angezeigt. Ich weiß nicht, ob das den Offset verursacht.

ich es mit reinem PhantomJS getestet 2.1.1 (phantomjs file.js):

var fs = require('fs'); 
var page = require('webpage').create(); 

page.viewportSize = { 
    width: 1024, 
    height: 768 
}; 

page.open('http://en.wikipedia.org/', function() { 
    var positions = page.evaluate(function() { 
    positions = []; 
    elements = document.getElementsByTagName('IMG'); 
    for (var i=0, l=elements.length; i<l; i++) { 
     pos = elements[i].getBoundingClientRect(); 
     positions.push(pos.left + ' ' + pos.top); 
    }; 
    return positions; 
    }); 

    fs.write('test.txt', positions.join("\r\n"), 'w'); 

    page.render('test.png'); 
    phantom.exit(); 
}); 

Gleiches Ergebnis: Wenn Sie die test.png öffnen, sehen Sie das Bild auf der rechten Seite (links: 952px, oben: 259px), aber die test.txt zeigt es nach links verschoben (links: 891px).

Wissen Sie, was dieses Problem verursachen könnte?

Answer 1

Wissen Sie, was diesen Offset verursachen könnte?

Ein Fehler in PhantomJS v2.1.1 oder in der eingebetteten Qt WebEngine.

Gibt es eine Problemumgehung?

Nr

Aber ich will es trotzdem arbeiten, wie?

Reparieren Sie es selbst oder stellen Sie jemanden ein, der es repariert oder darauf wartet, dass es repariert wird.

Beachten Sie, dass das Problem nicht mehr in Version 2 auftritt.5, aber es ist immer noch in der Betaphase:

https://github.com/ariya/phantomjs/milestone/16
https://bitbucket.org/ariya/phantomjs/downloads/

Hier ist ein Screenshot mit PhantomJS-2.5.0-beta wurde:

Answer 2

Dies scheint ein issue in PhantomJS zu sein.

Auf dem GitHub Faden des Problems scheint @dantarion eine Lösung gefunden zu haben:

ich dies auch leite. Mein Problem besteht darin, auf der Seite in einem Evaluierungsblock Folgendes auszuführen, um PhantomJS zu zwingen, im Ansichtsfenster mit der richtigen Höhe zu rendern. Es funktioniert für meinen Anwendungsfall, und während ich es in 2.2 behoben sehen möchte, da es immer noch ein Problem ist, dachte ich, ich würde hier posten.

document.getElementsByTagName("body")[0].style.overflow = "hidden"; 
    document.getElementsByTagName("body")[0].style.height = "1080px"; 
    document.getElementsByTagName("body")[0].style.maxHeight = "1080px"; 
    document.getElementsByTagName("html")[0].style.overflow = "hidden"; 
    document.getElementsByTagName("html")[0].style.height = "1080px"; 
    document.getElementsByTagName("html")[0].style.maxHeight = "1080px"; 

Es scheint, das Problem zu lösen werden. Das einzige Problem ist, dass background-size: cover möglicherweise noch aus ist (wie von @ Luke-SF berichtet).