Obecnie próbuję zrobić zrzut ekranu za pomocą Selenium WebDriver. Ale mogę uzyskać tylko zrzut całego ekranu strony. Jednak chciałem po prostu uchwycić część strony lub tylko określony element na podstawie identyfikatora lub dowolnego określonego lokalizatora elementów. (Na przykład chcę zrobić zdjęcie z identyfikatorem obrazu = „Motyl”)
Czy istnieje sposób na przechwycenie zrzutu ekranu według wybranego elementu lub elementu?
Odpowiedzi:
Możemy uzyskać zrzut ekranu elementu, przycinając zrzut całej strony, jak poniżej:
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);
źródło
Oto wersja Pythona 3 wykorzystująca webdriver Selenium i Pillow. Ten program przechwytuje zrzut ekranu całej strony i przycina element na podstawie jego lokalizacji. Obraz elementu będzie dostępny jako image.png. Firefox obsługuje zapisywanie obrazu elementu bezpośrednio przy użyciu elementu element.screenshot_as_png ('nazwa_obrazu').
Aktualizacja
Teraz chrome obsługuje również zrzuty ekranu poszczególnych elementów. Możesz więc bezpośrednio przechwycić zrzut ekranu elementu internetowego, jak podano poniżej.
źródło
element.size
jest to podane w punktach, podczas gdy zrzut ekranu utworzony przezdriver.save_screenshot
ma wymiary pikseli. Jeśli twój ekran ma stosunek pikseli do punktu inny niż 1 (np. MacBooki Retina mają dwa piksele na punkt - stosunek 2), musisz pomnożyćw
ih
przez ten współczynnik.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")
W
Node.js
, napisałem następujący kod, który działa, ale nie jest oparty na oficjalnym WebDriverJS selenu, ale naSauceLabs's WebDriver
: WD.js i bardzo kompaktowej bibliotece obrazów o nazwie EasyImage .Chcę tylko podkreślić, że tak naprawdę nie możesz zrobić zrzutu ekranu elementu, ale powinieneś najpierw zrobić zrzut ekranu całej strony, a następnie wybrać część strony, którą lubisz i przyciąć tę konkretną część:
A cropInFileFunction wygląda tak:
źródło
Framework ASHOT firmy Yandex może być używany do robienia zrzutów ekranu w skryptach Selenium WebDriver dla
Te ramy można znaleźć na https://github.com/yandex-qatools/ashot .
Kod do robienia zrzutów ekranu jest bardzo prosty:
CAŁA STRONA
SPECYFICZNY ELEMENT INTERNETOWY
Zobacz więcej szczegółów i więcej przykładów kodu w tym artykule .
źródło
.shootingStrategy(ShootingStrategies.viewportPasting(100))
też zSPECIFIC WEB ELEMENT
trybu lub nie może przechwycić cały element.Dla wszystkich proszących o kod w C # poniżej znajduje się uproszczona wersja mojej implementacji.
źródło
Zmarnowałem dużo czasu na zrobienie zrzutu ekranu i chcę zapisać twój. Użyłem chromu + selenu + c # efekt był okropny. Wreszcie napisałem funkcję:
źródło
Odpowiedź Suryi działa świetnie, jeśli nie masz nic przeciwko zaangażowaniu we / wy dysku. Jeśli nie chcesz, ta metoda może być dla Ciebie lepsza
Jeśli wolisz, możesz pominąć deklarowanie
screengrab
i zamiast tego robićktóry jest czystszy, ale zostawiłem to dla jasności. Następnie możesz zapisać go jako plik lub umieścić go w JPanelu do woli .
źródło
Python 3
Próbowałem z Selenium 3.141.0 i chromedriver 73.0.3683.68, to działa,
Nie ma potrzeby pobierania pełnego obrazu i pobierania fragmentu obrazu pełnoekranowego.
To mogło nie być dostępne, gdy tworzono odpowiedź Rohita .
źródło
źródło
Jeśli szukasz rozwiązania JavaScript, oto moja istota:
https://gist.github.com/sillicon/4abcd9079a7d29cbb53ebee547b55fba
Podstawowy pomysł jest taki sam, najpierw zrób zrzut ekranu, a następnie przytnij go. Jednak moje rozwiązanie nie będzie wymagało innych bibliotek, tylko czysty kod API WebDriver. Jednak efektem ubocznym jest to, że może to zwiększyć obciążenie przeglądarki testowej.
źródło
Oto funkcja rozszerzenia dla C #:
Teraz możesz go użyć do zrobienia zdjęcia dowolnego elementu, takiego jak ten:
źródło
Rozważ użycie igły - narzędzia do automatycznego porównywania wizualnego https://github.com/bfirsh/needle , które ma wbudowaną funkcjonalność pozwalającą na robienie zrzutów ekranu konkretnych elementów (wybranych przez selektor CSS). Narzędzie działa na WebDriver Selenium i jest napisane w Pythonie.
źródło
Poniżej funkcja robienia migawki określonego elementu w Selenium. Tutaj sterownik jest rodzajem WebDriver.
źródło
kod c #:
źródło
źródło
Jeśli pojawi się wyjątek java.awt.image.RasterFormatException w przeglądarce chrome lub chcesz przewinąć element do widoku, a następnie zrób zrzut ekranu.
Oto rozwiązanie z odpowiedzi @Surya.
źródło
To jest moja wersja, w C # w zasadzie uzyskałem większość z odpowiedzi Brook i zmodyfikowałem ją, aby pasowała do moich celów
źródło
Myślę, że większość odpowiedzi tutaj jest przesadzona. Sposób, w jaki to zrobiłem, to dwie metody pomocnicze, pierwsza czekająca na element oparty na dowolnym selektorze; a drugi, aby zrobić zrzut ekranu.
Uwaga: Mamy rzucać
WebElement
naTakesScreenshot
przykład, więc tylko uchwycić ten element w obrazie specjalnie. Jeśli chcesz mieć całą stronę / okno,driver
zamiast tego prześlij.WebDriver driver = new FirefoxDriver(); // define this somewhere (or chrome etc) public <T> T screenshotOf(By by, long timeout, OutputType<T> type) { return ((TakesScreenshot) waitForElement(by, timeout)) .getScreenshotAs(type); } public WebElement waitForElement(By by, long timeout) { return new WebDriverWait(driver, timeout) .until(driver -> driver.findElement(by)); }
A potem po prostu zrób zrzut ekranu, co chcesz, w ten sposób:
long timeout = 5; // in seconds /* Screenshot (to file) based on first occurence of tag */ File sc = screenshotOf(By.tagName("body"), timeout, OutputType.FILE); /* Screenshot (in memory) based on CSS selector (e.g. first image in body who's "src" attribute starts with "https") */ byte[] sc = screenshotOf(By.cssSelector("body > img[href^='https']"), timeout, OutputType.BYTES);
źródło
Uważam, że to nie zadziała, ponieważ używasz C #, a moje rozwiązanie zawiera bibliotekę Java, ale może inni uznają to za pomocne.
Do przechwytywania niestandardowych zrzutów ekranu możesz użyć biblioteki Shutterbug. Konkretne wezwanie do tego celu brzmiałoby:
źródło
Postępowałem zgodnie z przykładowym kodem z @codeslord, ale z jakiegoś powodu musiałem inaczej uzyskać dostęp do moich danych zrzutu ekranu:
# 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()
(przy użyciu Python 3.7, Selenium 3.141.0 i Mozilla Geckodriver 71.0.0.7222)
źródło
Używam zmodyfikowanej wersji odpowiedzi @ Brook i działa dobrze nawet w przypadku elementów wymagających przewijania strony.
Te dwa elementy
if
były konieczne (przynajmniej dla sterownika Chrome), ponieważ rozmiar przycięcia przekraczał o 1 piksel rozmiar zrzutu ekranu, gdy potrzebne było przewijanie.źródło