반응형
Selenium Webdriver를 사용하여 전체 페이지가 아닌 특정 요소의 스크린 샷을 캡처하는 방법은 무엇입니까?
현재 Selenium WebDriver를 사용하여 스크린 샷을 캡처하려고합니다. 하지만 전체 페이지 스크린 샷 만 얻을 수 있습니다. 그러나 내가 원했던 것은 페이지의 일부 또는 ID 또는 특정 요소 로케이터를 기반으로 특정 요소를 캡처하는 것입니다. (예를 들어 이미지 id = "Butterfly"로 사진을 캡처하고 싶습니다.)
선택한 항목 또는 요소별로 스크린 샷을 캡처 할 수있는 방법이 있습니까?
다음과 같이 전체 페이지 스크린 샷을 잘라서 요소 스크린 샷을 얻을 수 있습니다.
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);
에서 Node.js, 나는 작동하는 다음 코드를 썼다 있지만 기반으로 셀레늄의 공식 WebDriverJS 기반으로하지만되지 않은 SauceLabs's WebDriver: WD.js 와라는 매우 컴팩트 한 이미지 라이브러리 EasyImage .
요소의 스크린 샷을 실제로 찍을 수는 없지만 먼저 전체 페이지의 스크린 샷을 찍은 다음 원하는 페이지의 일부를 선택하고 특정 부분을 자르는 것입니다.
browser.get(URL_TO_VISIT)
.waitForElementById(dependentElementId, webdriver.asserters.isDisplayed, 3000)
.elementById(elementID)
.getSize().then(function(size) {
browser.elementById(elementID)
.getLocation().then(function(location) {
browser.takeScreenshot().then(function(data) {
var base64Data = data.replace(/^data:image\/png;base64,/, "");
fs.writeFile(filePath, base64Data, 'base64', function(err) {
if (err) {
console.log(err);
}
else {
cropInFile(size, location, filePath);
}
doneCallback();
});
});
});
});
그리고 cropInFileFunction은 다음과 같습니다 :
var cropInFile = function(size, location, srcFile) {
easyimg.crop({
src: srcFile,
dst: srcFile,
cropwidth: size.width,
cropheight: size.height,
x: location.x,
y: location.y,
gravity: 'North-West'
},
function(err, stdout, stderr) {
if (err) throw err;
});
};
다음은 Selenium webdriver 및 Pillow를 사용하는 Python 3 버전입니다. 이 프로그램은 전체 페이지의 스크린 샷을 캡처하고 해당 위치에 따라 요소를 자릅니다. 요소 이미지는 image.png로 제공됩니다. Firefox는 element.screenshot_as_png ( 'image_name')을 사용하여 직접 요소 이미지 저장을 지원합니다.
from selenium import webdriver
from PIL import Image
driver = webdriver.Chrome()
driver.get('https://www.google.co.in')
element = driver.find_element_by_id("lst-ib")
location = element.location
size = element.size
driver.save_screenshot("shot.png")
x = location['x']
y = location['y']
w = size['width']
h = size['height']
width = x + w
height = y + h
im = Image.open('shot.png')
im = im.crop((int(x), int(y), int(width), int(height)))
im.save('image.png')
최신 정보
이제 크롬은 개별 요소 스크린 샷도 지원합니다. 따라서 아래와 같이 웹 요소의 스크린 샷을 직접 캡처 할 수 있습니다.
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('https://www.google.co.in')
image = driver.find_element_by_id("lst-ib").screenshot_as_png
# or
# element = driver.find_element_by_id("lst-ib")
# element.screenshot_as_png("image.png")
Yandex의 ASHOT 프레임 워크는 Selenium WebDriver 스크립트에서 스크린 샷을 찍는 데 사용할 수 있습니다.
- 전체 웹 페이지
- 웹 요소
이 프레임 워크는 https://github.com/yandex-qatools/ashot 에서 찾을 수 있습니다 .
스크린 샷을 찍는 코드는 매우 간단합니다.
전체 페이지
screenshot = new AShot().shootingStrategy(
new ViewportPastingStrategy(1000)).takeScreenshot(driver);
ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\results.png"));
특정 웹 요소
screenshot = new AShot().takeScreenshot(driver,
driver.findElement(By.xpath("(//div[@id='ct_search'])[1]")));
ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\div_element.png"));
이 기사 에서 자세한 내용과 코드 샘플을 참조하십시오 .
스크린 샷을 찍는 데 많은 시간을 낭비했고 여러분의 스크린 샷을 저장하고 싶습니다. 나는 크롬 + 셀레늄 + C #을 사용했는데 그 결과는 완전히 끔찍했습니다. 마지막으로 함수를 작성했습니다.
driver.Manage().Window.Maximize();
RemoteWebElement remElement = (RemoteWebElement)driver.FindElement(By.Id("submit-button"));
Point location = remElement.LocationOnScreenOnceScrolledIntoView;
int viewportWidth = Convert.ToInt32(((IJavaScriptExecutor)driver).ExecuteScript("return document.documentElement.clientWidth"));
int viewportHeight = Convert.ToInt32(((IJavaScriptExecutor)driver).ExecuteScript("return document.documentElement.clientHeight"));
driver.SwitchTo();
int elementLocation_X = location.X;
int elementLocation_Y = location.Y;
IWebElement img = driver.FindElement(By.Id("submit-button"));
int elementSize_Width = img.Size.Width;
int elementSize_Height = img.Size.Height;
Size s = new Size();
s.Width = driver.Manage().Window.Size.Width;
s.Height = driver.Manage().Window.Size.Height;
Bitmap bitmap = new Bitmap(s.Width, s.Height);
Graphics graphics = Graphics.FromImage(bitmap as Image);
graphics.CopyFromScreen(0, 0, 0, 0, s);
bitmap.Save(filePath, System.Drawing.Imaging.ImageFormat.Png);
RectangleF part = new RectangleF(elementLocation_X, elementLocation_Y + (s.Height - viewportHeight), elementSize_Width, elementSize_Height);
Bitmap bmpobj = (Bitmap)Image.FromFile(filePath);
Bitmap bn = bmpobj.Clone(part, bmpobj.PixelFormat);
bn.Save(finalPictureFilePath, System.Drawing.Imaging.ImageFormat.Png);
C #으로 코드를 요청하는 모든 사람을 위해 아래는 내 구현의 단순화 된 버전입니다.
public static void TakeScreenshot(IWebDriver driver, IWebElement element)
{
try
{
string fileName = DateTime.Now.ToString("yyyy-MM-dd HH-mm-ss") + ".jpg";
Byte[] byteArray = ((ITakesScreenshot)driver).GetScreenshot().AsByteArray;
System.Drawing.Bitmap screenshot = new System.Drawing.Bitmap(new System.IO.MemoryStream(byteArray));
System.Drawing.Rectangle croppedImage = new System.Drawing.Rectangle(element.Location.X, element.Location.Y, element.Size.Width, element.Size.Height);
screenshot = screenshot.Clone(croppedImage, screenshot.PixelFormat);
screenshot.Save(String.Format(@"C:\SeleniumScreenshots\" + fileName, System.Drawing.Imaging.ImageFormat.Jpeg));
}
catch (Exception e)
{
logger.Error(e.StackTrace + ' ' + e.Message);
}
}
Surya의 대답 은 디스크 IO를 포함해도 괜찮다면 훌륭하게 작동합니다. 원하지 않는 경우이 방법이 더 나을 수 있습니다.
private Image getScreenshot(final WebDriver d, final WebElement e) throws IOException {
final BufferedImage img;
final Point topleft;
final Point bottomright;
final byte[] screengrab;
screengrab = ((TakesScreenshot) d).getScreenshotAs(OutputType.BYTES);
img = ImageIO.read(new ByteArrayInputStream(screengrab));
//crop the image to focus on e
//get dimensions (crop points)
topleft = e.getLocation();
bottomright = new Point(e.getSize().getWidth(),
e.getSize().getHeight());
return img.getSubimage(topleft.getX(),
topleft.getY(),
bottomright.getX(),
bottomright.getY());
}
원하는 경우 선언을 건너 뛰고 screengrab대신
img = ImageIO.read(
new ByteArrayInputStream(
((TakesScreenshot) d).getScreenshotAs(OutputType.BYTES)));
더 깨끗하지만 명확성을 위해 그대로 두었습니다. 그런 다음 파일로 저장 하거나 JPanel에 마음껏 넣을 수 있습니다.
public void GenerateSnapshot(string url, string selector, string filePath)
{
using (IWebDriver driver = new ChromeDriver())
{
driver.Navigate().GoToUrl(url);
var remElement = driver.FindElement(By.CssSelector(selector));
Point location = remElement.Location;
var screenshot = (driver as ChromeDriver).GetScreenshot();
using (MemoryStream stream = new MemoryStream(screenshot.AsByteArray))
{
using (Bitmap bitmap = new Bitmap(stream))
{
RectangleF part = new RectangleF(location.X, location.Y, remElement.Size.Width, remElement.Size.Height);
using (Bitmap bn = bitmap.Clone(part, bitmap.PixelFormat))
{
bn.Save(filePath, System.Drawing.Imaging.ImageFormat.Png);
}
}
}
driver.Close();
}
}
JavaScript 솔루션을 찾고 있다면 여기에 요점이 있습니다.
https://gist.github.com/sillicon/4abcd9079a7d29cbb53ebee547b55fba
기본 아이디어는 동일합니다. 먼저 스크린 샷을 찍은 다음 잘라냅니다. 그러나 내 솔루션에는 다른 라이브러리가 필요하지 않으며 순수한 WebDriver API 코드 만 필요합니다. 그러나 부작용은 테스트 브라우저의 부하를 증가시킬 수 있다는 것입니다.
다음은 C #의 확장 함수입니다.
public static BitmapImage GetElementImage(this IWebDriver webDriver, By by)
{
var elements = webDriver.FindElements(by);
if (elements.Count == 0)
return null;
var element = elements[0];
var screenShot = (webDriver as ITakesScreenshot).GetScreenshot();
using (var ms = new MemoryStream(screenShot.AsByteArray))
{
Bitmap screenBitmap;
screenBitmap = new Bitmap(ms);
return screenBitmap.Clone(
new Rectangle(
element.Location.X,
element.Location.Y,
element.Size.Width,
element.Size.Height
),
screenBitmap.PixelFormat
).ToBitmapImage();
}
}
이제 다음과 같은 요소의 이미지를 가져 오는 데 사용할 수 있습니다.
var image = webDriver.GetElementImage(By.Id("someId"));
파이썬 3
Selenium 3.141.0 및 chromedriver 73.0.3683.68로 시도해 보았습니다.
from selenium import webdriver
chromedriver = '/usr/local/bin/chromedriver'
chromeOptions = webdriver.ChromeOptions()
chromeOptions.add_argument('window-size=1366x768')
chromeOptions.add_argument('disable-extensions')
cdriver = webdriver.Chrome(options=chromeOptions, executable_path=chromedriver)
cdriver.get('url')
element = cdriver.find_element_by_css_selector('.some-css.selector')
element.screenshot_as_png('elemenent.png')
전체 이미지를 가져 와서 전체 화면 이미지의 일부를 가져올 필요가 없습니다.
Rohit의 답변 이 생성 되었을 때 사용할 수 없었을 수도 있습니다 .
자동 시각적 비교를 위해 needle-tool 사용을 고려 하세요 . 이 도구는 Selenium의 WebDriver에서 작동하며 Python으로 작성되었습니다.
Selenium의 특정 요소 스냅 샷을 찍는 기능 아래. 여기서 드라이버는 WebDriver 유형입니다.
private static void getScreenshot(final WebElement e, String fileName) throws IOException {
final BufferedImage img;
final Point topleft;
final Point bottomright;
final byte[] screengrab;
screengrab = ((TakesScreenshot) driver).getScreenshotAs(OutputType.BYTES);
img = ImageIO.read(new ByteArrayInputStream(screengrab));
topleft = e.getLocation();
bottomright = new Point(e.getSize().getWidth(), e.getSize().getHeight());
BufferedImage imgScreenshot=
(BufferedImage)img.getSubimage(topleft.getX(), topleft.getY(), bottomright.getX(), bottomright.getY());
File screenshotLocation = new File("Images/"+fileName +".png");
ImageIO.write(imgScreenshot, "png", screenshotLocation);
}
using System.Drawing;
using System.Drawing.Imaging;
using OpenQA.Selenium;
using OpenQA.Selenium.Firefox;
public void ScreenshotByElement()
{
IWebDriver driver = new FirefoxDriver();
String baseURL = "www.google.com/"; //url link
String filePath = @"c:\\img1.png";
driver.Navigate().GoToUrl(baseURL);
var remElement = driver.FindElement(By.Id("Butterfly"));
Point location = remElement.Location;
var screenshot = (driver as FirefoxDriver).GetScreenshot();
using (MemoryStream stream = new MemoryStream(screenshot.AsByteArray))
{
using (Bitmap bitmap = new Bitmap(stream))
{
RectangleF part = new RectangleF(location.X, location.Y, remElement.Size.Width, remElement.Size.Height);
using (Bitmap bn = bitmap.Clone(part, bitmap.PixelFormat))
{
bn.Save(filePath, ImageFormat.Png);
}
}
}
}
크롬에서 java.awt.image.RasterFormatException 예외가 발생 하거나 요소를보기로 스크롤하려는 경우 스크린 샷을 캡처합니다.
다음은 @Surya 답변의 해결책입니다.
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
Long offsetTop = (Long) jsExecutor.executeScript("window.scroll(0, document.querySelector(\""+cssSelector+"\").offsetTop - 0); return document.querySelector(\""+cssSelector+"\").getBoundingClientRect().top;");
WebElement ele = driver.findElement(By.cssSelector(cssSelector));
// 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(), Math.toIntExact(offsetTop),
eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);
// Copy the element screenshot to disk
File screenshotLocation = new File("c:\\temp\\div_element_1.png");
FileUtils.copyFile(screenshot, screenshotLocation);
C # 코드 :
public Bitmap MakeElemScreenshot( IWebDriver driver, WebElement elem)
{
Screenshot myScreenShot = ((ITakesScreenshot)driver).GetScreenshot();
Bitmap screen = new Bitmap(new MemoryStream(myScreenShot.AsByteArray));
Bitmap elemScreenshot = screen.Clone(new Rectangle(elem.Location, elem.Size), screen.PixelFormat);
screen.Dispose();
return elemScreenshot;
}
I believe this isn't going to work for you as you use C# and my solution includes a Java library, however maybe others will find it helpful.
For capturing custom screenshots you can use the Shutterbug library. The specific call for this purpose would be:
Shutterbug.shootElement(driver, element).save();
I'm using a modified version of @Brook's answer and is working fine even for elements that needs the page to be scrolled.
public void TakeScreenshot(string fileNameWithoutExtension, IWebElement element)
{
// Scroll to the element if necessary
var actions = new Actions(_driver);
actions.MoveToElement(element);
actions.Perform();
// Get the element position (scroll-aware)
var locationWhenScrolled = ((RemoteWebElement) element).LocationOnScreenOnceScrolledIntoView;
var fileName = fileNameWithoutExtension + ".png";
var byteArray = ((ITakesScreenshot) _driver).GetScreenshot().AsByteArray;
using (var screenshot = new System.Drawing.Bitmap(new System.IO.MemoryStream(byteArray)))
{
var location = locationWhenScrolled;
// Fix location if necessary to avoid OutOfMemory Exception
if (location.X + element.Size.Width > screenshot.Width)
{
location.X = screenshot.Width - element.Size.Width;
}
if (location.Y + element.Size.Height > screenshot.Height)
{
location.Y = screenshot.Height - element.Size.Height;
}
// Crop the screenshot
var croppedImage = new System.Drawing.Rectangle(location.X, location.Y, element.Size.Width, element.Size.Height);
using (var clone = screenshot.Clone(croppedImage, screenshot.PixelFormat))
{
clone.Save(fileName, ImageFormat.Png);
}
}
}
The two ifs were necessary (at least for the chrome driver) because the size of the crop exceeded in 1 pixel the screenshot size, when scrolling was needed.
반응형
'developer tip' 카테고리의 다른 글
| Dart 언어의 Console.log (0) | 2020.11.04 |
|---|---|
| 자바 스크립트를 사용한 부동 합계 (0) | 2020.11.04 |
| 마크 다운으로 밑줄이 그어진 텍스트 얻기 (0) | 2020.11.03 |
| setcookie () 직후 $ _COOKIE 액세스 (0) | 2020.11.03 |
| R에서 행렬을 열 벡터 목록으로 변환하는 방법은 무엇입니까? (0) | 2020.11.03 |