web-dev-qa-db-ja.com

SeleniumとJavaを使用して完全なWebページのスクリーンショットを取得する方法は？

部分的な（top-to-bottomではなく、Webページ全体のスクリーンショット（full-page screenshot）を取得する方法）Selenium WebDriverを使用していますか？

私のコード：（Javaバインディング）

System.setProperty("webdriver.chrome.driver","/home/alex/Downloads/chromedriver_linux64/chromedriver");
WebDriver driver = new ChromeDriver();
driver.get("http://google.com");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File(RESULT_FILENAME));

これに取り組む方法についてのアイデアはありますか？

javaseleniumselenium-webdriverwebdriverscreenshot
11
Placinta Alexandru

LE：全ページのスクリーンショットに非常に多くの人が興味を持っていることがわかりました。そのため、答えをいくつかのポジティブなものに更新するかもしれないと思いました（silver bullets） 。

（最小限のセットアップと労力で）フルページのスクリーンショットを生成できるかなり少数のWebテストフレームワークがあります=。 NodeJSのテスト環境から来たので、保証できるのは WebdriverIO ＆Googleの Puppeteer のみです。

WebdriverIOで簡単に行う方法に興味がある人は、 this answerを確認してください。

簡単な答えはいいえ、できません、Seleniumのみを使用している場合です（詳細な理由は以下）。ただし、できることは、デバイスの（モニター） ビューポート を最大限に活用することです。

したがって、ChromeDriver固有の機能を設定する方法であるChromeOptions()を使用して、ブラウザーインスタンス（ドライバー）を起動します。次のことができます。

  • ウィンドウを最大化する（--start-maximizedスイッチを使用）;
  • 全画面表示（WindowsではF11- key、MacではControl+Cmd+F、--start-fullscreenスイッチを使用）。
  • 注：Chromeコマンドラインスイッチの完全なリストは here にあります。

コードは次のようになります。

// Setting your Chrome options (Desired capabilities)
ChromeOptions options = new ChromeOptions();
options.add_argument('--start-maximized');
options.add_argument('--start-fullscreen');

// Creating a driver instance with the previous capabilities
WebDriver driver = new ChromeDriver(options);

// Load page & take screenshot of full-screen page
driver.get("http://google.com");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

現在、全ページの問題に関して、すべてのドライバー（chromedriver、geckodriver、IEDriver、EdgeDriverなど）は WebDriver W3C 標準。したがって、これらはWebDriverチームがさまざまな機能の機能を公開する方法に依存しています。この場合、 'Take Screenshot' です。

定義を読むと、次のことが明確に示されています。

Take Screenshotコマンドは、トップレベルのブラウジングコンテキストのスクリーンショットを撮ります[〜＃〜] viewport [〜＃〜]。

従来の方法では、一部のドライバーは、古いFirefoxDriver、IEDriverなどのように、フルスクリーンのスクリーンショットを作成できました（詳細は here を参照してください）。 （文字どおり）WebDriver W3C標準。

16
iamdanchiv

チュートリアルを見つけました http://www.softwaretestingmaterial.com/how-to-capture-full-page-screenshot-using-Selenium-webdriver/ Mavenユーザーの場合： https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot このスクリプトをテストすると、ブラウザで開くことができない大きな画像があります（大きすぎるか、壊れた）。

誰かがスクリプトを知っているかもしれません。最後に使用したロケーターのフォーカスページはどれですか？

4
Krzysztof Walczewski

このように見えます 記事 提案 AShot また、次のコードを使用して、ページ全体のスクリーンショットをCucumberレポートに正常に埋め込みました

    scenario.embed(takeScreenShotAsByte(getWebDriver()), "image/png");

    private static byte[] takeScreenShotAsByte(WebDriver webDriver) throws IOException {
        return takeFullPageScreenShotAsByte(webDriver);
    }

    private static byte[] takeFullPageScreenShotAsByte(WebDriver webDriver) throws IOException {
        Screenshot fpScreenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000))
                .takeScreenshot(webDriver);

        BufferedImage originalImage = fpScreenshot.getImage();

        try (ByteArrayOutputStream baos = new ByteArrayOutputStream()) {
            ImageIO.write(originalImage, "png", baos);
            baos.flush();
            return baos.toByteArray();
        }
    }
2
Wenzhong Hu

Phantomjsを使用してそれを実現できます。

ここに私のJavaコード：

public class PhantomjsTest {
    public static void main(String[] args) {
        try {

            long start=System.currentTimeMillis();
            //The page you want to screenshot
            String targetUrl="https://www.iqiyi.com/";
            //File path
            String targetImg="iqiyi.png";
            String command = "/Users/hetiantian/SoftWares/phantomjs/bin/phantomjs /Users/hetiantian/SoftWares/phantomjs/examples/rasterize.js "+targetUrl + " " +targetImg;
            Process p = Runtime.getRuntime().exec(command);
            p.waitFor();
            System.out.println((System.currentTimeMillis()-start));
        } catch (Exception e) {
            e.printStackTrace();
        }


    }
}

そのため、PhantomjsでWebページ全体のスクリーンショットを取得できます。 Phantomjsを使用して完全なスクリーンショットを取得する場合、まずPhantomjsをダウンロードする必要があります。次に、Phantomjsスクリプトを実行してスクリーンショットを作成します。詳細については、 phantomjs.org を参照してください。

1
H.Dayday

一部のページでは、ページの始まりと終わりのスクリーンショットを撮る必要があります。だから私は2つのスクリーンショットを撮るために使用します：

public static String javaIoTmpDir = System.getProperty("Java.io.tmpdir"); //tmp dir
//create screenshot
    driver.manage().window().fullscreen();
    //For large pages - body over 850 px highh - take addition screenshot of the end of page
    if (driver.findElements(By.id("panel_body")).size()>0) {
        WebElement body = driver.findElement(By.id("panel_body"));
        int bodyHight = body.getSize().getHeight();
        if (bodyHight > 850) {
            Robot robot = new Robot();
            robot.keyPress(KeyEvent.VK_END);
            robot.keyRelease(KeyEvent.VK_END);
            Thread.sleep(1000);
            File scrFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
            String timePictureEnd = javaIoTmpDir+"\\scr_"+String.valueOf(System.currentTimeMillis())+getClass().toString().substring(getClass().toString().lastIndexOf(".qa.")+3)+".png";
            FileUtils.copyFile(scrFile, new File(timePictureEnd));
            robot.keyPress(KeyEvent.VK_HOME); //back to top page for next screen
            robot.keyRelease(KeyEvent.VK_HOME);
            Thread.sleep(1000);
        }
    }
    String timePicture = javaIoTmpDir+"\\scr_"+String.valueOf(System.currentTimeMillis())+getClass().toString().substring(getClass().toString().lastIndexOf(".qa.")+3)+".png";
    File scrFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
    FileUtils.copyFile(scrFile, new File(timePicture));
1
Krzysztof Walczewski

C＃を使用して全画面ScreenShotを取得するサンプルを次に示しますが、変更するだけです。

            string _currentPath = Path.GetDirectoryName(Assembly.GetAssembly(typeof(One of your objects)).Location) + @"\Attachs\";
            var filePath = _currentPath + sSName;

            if (!Directory.Exists(_currentPath))
                Directory.CreateDirectory(_currentPath);

            Dictionary<string, Object> metrics = new Dictionary<string, Object>();
            metrics["width"] = _driver.ExecuteScript("return Math.max(window.innerWidth,document.body.scrollWidth,document.documentElement.scrollWidth)");
            metrics["height"] = _driver.ExecuteScript("return Math.max(window.innerHeight,document.body.scrollHeight,document.documentElement.scrollHeight)");
            metrics["deviceScaleFactor"] = (double)_driver.ExecuteScript("return window.devicePixelRatio");
            metrics["mobile"] = _driver.ExecuteScript("return typeof window.orientation !== 'undefined'");
            _driver.ExecuteChromeCommand("Emulation.setDeviceMetricsOverride", metrics);

            _driver.GetScreenshot().SaveAsFile(filePath, ScreenshotImageFormat.Png);

            _driver.ExecuteChromeCommand("Emulation.clearDeviceMetricsOverride", new Dictionary<string, Object>());
            _driver.Close();
0
Andre Fernandes Luiz