Getting black spot on the Chrome - Tablet Emulator screenshot while Capturing the entire page

[seliniumtester]

Getting black spot on the Chrome-Tablet emulator screenshot while Capturing the entire page by using
new AShot()
.shootingStrategy(ShootingStrategies.viewportPasting(100))
.takeScreenshot(webDriver);

Same works fine for Chrome- Phone emulator.

Please provide resolution for this issue.

Here is the code.
String baseUrl = "https://github.com/yandex-qatools/ashot";

    Map<String, String> mobileEmulation = new HashMap<String, String>();
    mobileEmulation.put("deviceName", "Apple iPad");
    Map<String, Object> chromeOptions = new HashMap<String, Object>();
    chromeOptions.put("mobileEmulation", mobileEmulation);
    DesiredCapabilities capabilities = DesiredCapabilities.chrome();
    capabilities.setCapability(ChromeOptions.CAPABILITY, chromeOptions);
    WebDriver driver = new ChromeDriver(capabilities);
    driver.manage().window().maximize();

    driver.get(baseUrl);

    final Screenshot screenshot = new AShot()
              .shootingStrategy(ShootingStrategies.viewportPasting(100))
              .takeScreenshot(driver);

    final BufferedImage image = screenshot.getImage();
    ImageIO.write(image, "PNG", new File("C:\\Selenium\\"+ "Ahot-Tablet.png"));

Tablet Screenshot:

Phone Screenshot:

[pazone]

Hello. It looks like your phone emulator has dpr = 1, but tablet has dpr > 1. You should set it in shooting strategy.

Try to use

new AShot().shootindStrategy(ShootingStrategies.viewportRetina(100, 0, 0, <yourDpr>));

[seliniumtester]

Hi, Thanks for the suggestion. I have tried the same with the below code,
final Screenshot screenshot = new AShot()
.shootingStrategy(ShootingStrategies.viewportRetina(100, 0, 0, 2))
.takeScreenshot(driver);

Now, i am getting more black area. Please advice.

Screenshot:

[pazone]

As I understood, you are using build in Chrome tools to emulate tablet. Are you using Chrome's presets for it or custom capabilities? Which kind of tablet you want to emulate? Can you show me how are you doing it?

[seliniumtester]

Hi, yes i am using the build in Chrome emulator. I am using the below custom capability provided in the chromedriver.exe. I am trying to emulate Apple iPad device.

Map<String, String> mobileEmulation = new HashMap<String, String>();
mobileEmulation.put("deviceName", "Apple iPad");
Map<String, Object> chromeOptions = new HashMap<String, Object>();
chromeOptions.put("mobileEmulation", mobileEmulation);
DesiredCapabilities capabilities = DesiredCapabilities.chrome();
capabilities.setCapability(ChromeOptions.CAPABILITY, chromeOptions);
WebDriver driver = new ChromeDriver(capabilities);

[pazone]

Consider this code string deviceMetrics.put("pixelRatio", 3.0); here . You are using preset with unknown pixel ratio.
Add this to your caps: deviceMetrics.put("pixelRatio", 1.0); - it will make your emulation screenshotable :) Also avoid to launch webdriver on displays with DPR != 1. For example mac book with retina. You can do it but you should calculate your result DPR. It can be hard sometimes.

[seliniumtester]

Hi, I have added the capability as per your suggestion. Still, i am getting this issue. Please advice.

Please find the code below.

Browser Setup:

AShot:

    final Screenshot screenshot = new AShot()
          .shootingStrategy(ShootingStrategies.viewportPasting(100))
        .takeScreenshot(driver);

or
final Screenshot screenshot = new AShot()
.shootingStrategy(ShootingStrategies.viewportRetina(1000, 0, 0, 1))
.takeScreenshot(driver);

Screenshot:

[pazone]

Are you getting this when trying to take screenshot of other page? If you are launching chrome locally I need to know you local dpr, it also can be != 1.

[rovner]

It's really looks like a bug for me in viewport_height.js for chrome emulation in portrait mode.
See

//portrait
window.innerHeight
1360 // should be 1024
document.documentElement.clientHeight
1024
//landscape
document.documentElement.clientHeight
768
window.innerHeight
768

@seliniumtester you could workaround your code by using landscape orientation for now

        Map<String, Object> deviceMetrics = new HashMap<>();
        deviceMetrics.put("width", 1024);
        deviceMetrics.put("height", 768);
        deviceMetrics.put("pixelRatio", 1.0);

[seliniumtester]

@pazone yes i am getting this issue in other pages as well. I am having dpr as 1.

@rovner thanks for the suggestion. But, for landscape view also i am getting the same issue,Please refer the below screenshot.

[seliniumtester]

Also i am getting the below warning message in the console when Ashot takes screenshot. Please advice.

May 30, 2016 10:49:06 PM org.openqa.selenium.remote.Augmenter extractRemoteWebDriver
WARNING: Augmenter should be applied to the instances of @augmentable classes or previously augmented instances only

[pazone]

@seliniumtester Could you please take look at ShootingStrategies factory. You can solve your problem by using ShootingStrategies.viewportRetina(...) shooting strategy. You should figure our the DPR of your device to adjust it. Sorry for long response.

[MayankOkeyUser]

WebDriver driver = new ChromeDriver();
Object output = ((JavascriptExecutor) driver).executeScript("return window.devicePixelRatio");
String value = String.valueOf(output);
float windowDPR = Float.parseFloat(value);

use DPR here :
Screenshot screenshotfull= new AShot().shootingStrategy(ShootingStrategies.viewportRetina(1000, 0, 0, windowDPR)).takeScreenshot(driver);

you will get rid of Black Space from ScreenShot