Derzeit versuche ich, einen Screenshot mit dem Selenium WebDriver aufzunehmen. Ich kann aber nur den Screenshot der gesamten Seite erhalten. Ich wollte jedoch nur einen Teil der Seite oder vielleicht nur ein bestimmtes Element basierend auf der ID oder einem bestimmten Element-Locator erfassen. (Zum Beispiel möchte ich das Bild mit der Bild-ID = "Schmetterling" aufnehmen.)
Gibt es eine Möglichkeit, einen Screenshot nach ausgewählten Elementen oder Elementen aufzunehmen?
Antworten:
Wir können den Element-Screenshot erhalten, indem wir den Screenshot der gesamten Seite wie folgt zuschneiden:
driver.get("http://www.google.com"); WebElement ele = driver.findElement(By.id("hplogo")); // Get entire page screenshot File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE); BufferedImage fullImg = ImageIO.read(screenshot); // Get the location of element on the page Point point = ele.getLocation(); // Get width and height of the element int eleWidth = ele.getSize().getWidth(); int eleHeight = ele.getSize().getHeight(); // Crop the entire page screenshot to get only element screenshot BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(), eleWidth, eleHeight); ImageIO.write(eleScreenshot, "png", screenshot); // Copy the element screenshot to disk File screenshotLocation = new File("C:\\images\\GoogleLogo_screenshot.png"); FileUtils.copyFile(screenshot, screenshotLocation);
quelle
Hier ist eine Python 3-Version mit Selenium Webdriver und Pillow. Dieses Programm erfasst den Screenshot der gesamten Seite und schneidet das Element basierend auf seiner Position zu. Das Element image wird als image.png verfügbar sein. Firefox unterstützt das direkte Speichern von Elementbildern mit element.screenshot_as_png ('image_name').
Aktualisieren
Jetzt unterstützt Chrome auch Screenshots einzelner Elemente. So können Sie den Screenshot des Webelements wie unten angegeben direkt aufnehmen.
quelle
element.size
in Punkten angegeben ist, während der von erstellte Screenshotdriver.save_screenshot
Abmessungen von Pixeln hat. Wenn Ihr Bildschirm hat eine Pixel-zu-Punkt - Verhältnis ungleich 1 (zB Retina MacBooks haben zwei Pixel pro Punkt - ein Verhältnis von 2) , dann müssen Sie multiplizierenw
undh
von diesem Verhältnis.from StringIO import StringIO; from PIL import Image; img = Image.open(StringIO(image))
import io; from PIL import Image; img = Image.open(io.BytesIO(image)); img.save("image.png")
In habe
Node.js
ich den folgenden Code geschrieben, der funktioniert, aber nicht auf dem offiziellen WebDriverJS von Selen basiert, sondern aufSauceLabs's WebDriver
: WD.js und einer sehr kompakten Bildbibliothek namens EasyImage .Ich möchte nur betonen, dass Sie den Screenshot eines Elements nicht wirklich machen können, aber Sie sollten zuerst den Screenshot der gesamten Seite machen, dann den Teil der Seite auswählen, den Sie mögen, und diesen bestimmten Teil zuschneiden:
Und die cropInFileFunction sieht folgendermaßen aus:
quelle
Das ASHOT-Framework von Yandex kann zum Erstellen von Screenshots in Selenium WebDriver-Skripten für verwendet werden
Dieses Framework finden Sie unter https://github.com/yandex-qatools/ashot .
Der Code zum Aufnehmen der Screenshots ist sehr einfach:
GESAMTE SEITE
SPEZIFISCHES WEBELEMENT
Weitere Details und Codebeispiele finden Sie in diesem Artikel .
quelle
.shootingStrategy(ShootingStrategies.viewportPasting(100))
daSPECIFIC WEB ELEMENT
sonst möglicherweise nicht alle Elemente erfasst werden.Für alle, die in C # nach Code fragen, finden Sie unten eine vereinfachte Version meiner Implementierung.
quelle
Ich habe viel Zeit damit verschwendet, einen Screenshot zu machen, und ich möchte Ihren speichern. Ich habe Chrom + Selen + C # verwendet. Das Ergebnis war total schrecklich. Endlich habe ich eine Funktion geschrieben:
quelle
Die Antwort von Surya funktioniert hervorragend, wenn es Ihnen nichts ausmacht, Festplatten-E / A zu verwenden. Wenn Sie es lieber nicht möchten, ist diese Methode möglicherweise besser für Sie
Wenn Sie es vorziehen, können Sie das Deklarieren überspringen
screengrab
und stattdessen tunDas ist sauberer, aber ich habe es der Klarheit halber belassen. Sie können es dann als Datei speichern oder nach Herzenslust in ein JPanel einfügen .
quelle
Python 3
Versucht mit Selen 3.141.0 und Chromedriver 73.0.3683.68, funktioniert dies,
Es ist nicht erforderlich, ein Vollbild und einen Abschnitt eines Vollbilds zu erhalten.
Dies war möglicherweise nicht verfügbar, als Rohits Antwort erstellt wurde.
quelle
quelle
Wenn Sie nach einer JavaScript-Lösung suchen, ist hier mein Kern:
https://gist.github.com/sillicon/4abcd9079a7d29cbb53ebee547b55fba
Die Grundidee ist dieselbe: Machen Sie zuerst den Screenshot und schneiden Sie ihn dann zu. Für meine Lösung sind jedoch keine anderen Bibliotheken erforderlich, sondern nur reiner WebDriver-API-Code. Der Nebeneffekt ist jedoch, dass dies die Auslastung Ihres Testbrowsers erhöhen kann.
quelle
Hier ist eine Erweiterungsfunktion für C #:
Jetzt können Sie damit das Bild eines Elements wie dieses aufnehmen:
quelle
Erwägen Sie die Verwendung des Nadel-Tools für den automatisierten visuellen Vergleich https://github.com/bfirsh/needle , das über eine integrierte Funktionalität verfügt, mit der Screenshots bestimmter Elemente (ausgewählt durch den CSS-Selektor) erstellt werden können. Das Tool funktioniert auf Seleniums WebDriver und ist in Python geschrieben.
quelle
Unterhalb der Funktion zum Aufnehmen eines Schnappschusses eines bestimmten Elements in Selen. Hier ist der Treiber eine Art WebDriver.
quelle
c # Code:
quelle
quelle
Wenn Sie eine Ausnahme java.awt.image.RasterFormatException in Chrome erhalten oder ein Element in die Ansicht scrollen möchten, erfassen Sie einen Screenshot.
Hier ist eine Lösung von @Surya Antwort.
quelle
Dies ist meine Version, in C # habe ich im Grunde den größten Teil von Brooks Antwort erhalten und sie an meinen Zweck angepasst
quelle
Ich glaube, dass dies bei Ihnen nicht funktionieren wird, da Sie C # verwenden und meine Lösung eine Java-Bibliothek enthält. Vielleicht finden es andere jedoch hilfreich.
Zum Aufnehmen von benutzerdefinierten Screenshots können Sie die Shutterbug-Bibliothek verwenden. Der spezifische Aufruf für diesen Zweck wäre:
quelle
Ich habe den Beispielcode von @codeslord befolgt, musste aber aus irgendeinem Grund anders auf meine Screenshot-Daten zugreifen:
# Open the Firefox webdriver driver = webdriver.Firefox() # Find the element that you're interested in imagepanel = driver.find_element_by_class_name("panel-height-helper") # Access the data bytes for the web element datatowrite = imagepanel.screenshot_as_png # Write the byte data to a file outfile = open("imagepanel.png", "wb") outfile.write(datatowrite) outfile.close()
(mit Python 3.7, Selenium 3.141.0 und Mozilla Geckodriver 71.0.0.7222)
quelle
Ich verwende eine modifizierte Version von @ Brooks Antwort und funktioniert auch für Elemente, bei denen die Seite gescrollt werden muss, einwandfrei.
Die beiden
if
s waren notwendig (zumindest für den Chrome-Treiber), da die Größe des Zuschnitts beim Scrollen 1 Pixel über der Screenshot-Größe lag.quelle