वर्तमान में मैं सेलेनियम वेबड्राइवर का उपयोग करके स्क्रीनशॉट को कैप्चर करने का प्रयास कर रहा हूं। लेकिन मैं केवल पूरे पृष्ठ का स्क्रीन शॉट प्राप्त कर सकता हूं। हालाँकि, मैं जो चाहता था, वह केवल पृष्ठ के एक हिस्से को या शायद सिर्फ आईडी या किसी विशिष्ट तत्व लोकेटर पर आधारित विशिष्ट तत्व को कैप्चर करना था। (उदाहरण के लिए, मैं चित्र आईडी = "बटरफ्लाई" के साथ चित्र कैप्चर करना चाहता हूं)
क्या चयनित आइटम या तत्व द्वारा स्क्रीनशॉट को कैप्चर करने का कोई तरीका है?
जवाबों:
हम नीचे के रूप में पूरे पृष्ठ स्क्रीनशॉट को क्रॉप करके तत्व स्क्रीनशॉट प्राप्त कर सकते हैं:
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);
यहां सेलेनियम वेबड्राइवर और पिलो का उपयोग करके पायथन 3 संस्करण है। यह कार्यक्रम पूरे पृष्ठ के स्क्रीनशॉट को कैप्चर करता है और इसके स्थान के आधार पर तत्व को क्रॉप करता है। तत्व छवि image.png के रूप में उपलब्ध होगी। फ़ायरफ़ॉक्स सीधे एलिमेंट इमेज को सपोर्ट करता है जो एलिमेंट का उपयोग कर रहा है ।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")
element.sizeयह अंक में दिया गया है, जबकि स्क्रीनशॉट द्वारा उत्पादित driver.save_screenshotपिक्सल के आयाम हैं। यदि आपकी स्क्रीन में 1 के अलावा एक पिक्सेल-टू-पॉइंट अनुपात है (उदाहरण के लिए, रेटिना मैकबुक में दो पिक्सेल प्रति बिंदु हैं - 2 का अनुपात) तो आपको उस अनुपात से गुणा wऔर करने की आवश्यकता hहै।
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")
में 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();
});
});
});
});
और फ़सलइन्फ़िलेफ़ंक्शन, इस तरह से जाता है:
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;
});
};
यैंडेक्स से एएसएचओटी ढांचे का उपयोग सेलेनियम वेबड्राइवर स्क्रिप्ट में स्क्रीनशॉट लेने के लिए किया जा सकता है
यह ढाँचा https://github.com/yandex-qatools/ashot पर पाया जा सकता है ।
स्क्रीनशॉट लेने के लिए कोड बहुत सीधा है:
ENTIRE PAGE
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"));
.shootingStrategy(ShootingStrategies.viewportPasting(100))साथ भी आवश्यकता हो सकती SPECIFIC WEB ELEMENTहै, या यह सभी तत्व को कैप्चर नहीं कर सकता है।
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);
}
}
मैंने स्क्रीनशॉट लेने में बहुत समय बर्बाद किया और मैं आपका उद्धार करना चाहता हूं। मैंने क्रोम + सेलेनियम + सी # का उपयोग किया है जिसका परिणाम पूरी तरह से भयानक था। अंत में मैंने एक समारोह लिखा:
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);
अगर आप डिस्क 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)));
जो क्लीनर है, लेकिन मैंने इसे स्पष्टता के लिए छोड़ दिया। फिर आप इसे एक फ़ाइल के रूप में सहेज सकते हैं या इसे अपने दिल की सामग्री के लिए जेपीनेल में रख सकते हैं ।
अजगर ३
सेलेनियम 3.141.0 और क्रोमेड्रिवर 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')
पूर्ण छवि प्राप्त करने और फ़ुलस्क्रीन छवि का एक अनुभाग प्राप्त करने की आवश्यकता नहीं है।
जब रोहित का जवाब बना तो यह उपलब्ध नहीं हो सकता था।
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();
}
}
यदि आप एक जावास्क्रिप्ट समाधान की तलाश में हैं, तो यहां मेरा सुझाव है:
https://gist.github.com/sillicon/4abcd9079a7d29cbb53ebee547b55fba
मूल विचार समान है, पहले स्क्रीन शॉट लें, फिर इसे क्रॉप करें। हालांकि, मेरे समाधान के लिए अन्य पुस्तकालयों की आवश्यकता नहीं होगी, बस शुद्ध वेबड्राइवर एपीआई कोड। हालाँकि, इसका दुष्प्रभाव यह है कि यह आपके परीक्षण ब्राउज़र के भार को बढ़ा सकता है।
यहाँ 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"));
सुई का उपयोग करने पर विचार करें - स्वचालित दृश्य तुलना के लिए उपकरण https://github.com/bfirsh/needle , जिसमें अंतर्निहित कार्यक्षमता है जो विशिष्ट तत्वों (स्क्रीनशॉट चयनकर्ता द्वारा चयनित) के स्क्रीनशॉट लेने की अनुमति देता है। यह टूल सेलेनियम के वेबड्राइवर पर काम करता है और इसे पायथन में लिखा गया है।
सेलेनियम में एक विशिष्ट तत्व स्नैपशॉट लेने के लिए फ़ंक्शन के नीचे। यहाँ ड्राइवर एक प्रकार का 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);
}
सी # कोड:
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;
}
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);
यह मेरा संस्करण है, सी # में, मुझे मूल रूप से ब्रुक के जवाब से अधिकांश भाग मिला और इसे अपने उद्देश्य के लिए संशोधित किया
public static byte[] GetElementImage(this IWebElement element)
{
var screenShot = MobileDriver.Driver.GetScreenshot();
using (var stream = new MemoryStream(screenShot.AsByteArray))
{
var screenBitmap = new Bitmap(stream);
var elementBitmap = screenBitmap.Clone(
new Rectangle(
element.Location.X,
element.Location.Y,
element.Size.Width,
element.Size.Height
),
screenBitmap.PixelFormat
);
var converter = new ImageConverter();
return (byte[]) converter.ConvertTo(elementBitmap, typeof(byte[]));
}
}
मुझे लगता है कि यहां के अधिकांश जवाब इंजीनियर हैं। जिस तरह से मैंने इसे 2 सहायक विधियों के माध्यम से किया है, किसी भी चयनकर्ता के आधार पर एक तत्व की प्रतीक्षा करने वाला पहला; और दूसरा इसका स्क्रीनशॉट लेने के लिए।
नोट: हम WebElementएक TakesScreenshotउदाहरण के लिए कास्ट करते हैं , इसलिए हम केवल उस तत्व को विशेष रूप से छवि में कैप्चर करते हैं। यदि आप पूर्ण पृष्ठ / विंडो चाहते हैं, तो आपको driverइसके बजाय कास्ट करना चाहिए ।
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));
}
और फिर बस स्क्रीनशॉट जो भी आप इस तरह चाहते हैं:
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);
मेरा मानना है कि यह आपके लिए काम नहीं करने वाला है क्योंकि आप C # का उपयोग करते हैं और मेरे समाधान में जावा लाइब्रेरी शामिल है, हालांकि शायद अन्य इसे मददगार पाएंगे।
कस्टम स्क्रीनशॉट कैप्चर करने के लिए आप शटरबग लाइब्रेरी का उपयोग कर सकते हैं। इस उद्देश्य के लिए विशिष्ट कॉल होगा:
Shutterbug.shootElement(driver, element).save();
मैंने @ कोडकोड से नमूना कोड का पालन किया, लेकिन किसी कारण से मुझे अपने स्क्रीनशॉट डेटा को अलग तरीके से एक्सेस करना पड़ा:
# 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()
(पायथन 3.7, सेलेनियम 3.141.0 और मोज़िला गेकोड्रिवर 71.0.0.7222 का उपयोग करते हुए)
मैं @ ब्रूक के उत्तर के संशोधित संस्करण का उपयोग कर रहा हूं और उन तत्वों के लिए भी ठीक काम कर रहा हूं जिन्हें पृष्ठ स्क्रॉल करने की आवश्यकता है।
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);
}
}
}
दो ifएस आवश्यक थे (कम से कम क्रोम ड्राइवर के लिए) क्योंकि स्क्रॉलिंग की आवश्यकता होने पर फसल का आकार 1 पिक्सेल के स्क्रीनशॉट के आकार से अधिक हो गया था।