Fitting objects in window screen using Selenium Java

Question

I am trying to fit all the objects in the window (Chrome browser). Manually when I am doing it(the dimensions that I am using is 1024X786 using toggle bar, but when I am automating it using the same dimension, it's not showing the same as it was manually.

The following is the code:

driver = new ChromeDriver();
Map<String, Object> deviceMetrics = new HashMap<String, Object>();
deviceMetrics.put("width", 768);
deviceMetrics.put("height", 1024);
Map<String, Object> mobileEmulation = new HashMap<String, Object>();
mobileEmulation.put("deviceMetrics", deviceMetrics);
mobileEmulation.put("userAgent", "Mobile S");
Map<String, Object> chromeOptions = new HashMap<String, Object>();
chromeOptions.put("mobileEmulation", mobileEmulation);
DesiredCapabilities capabilities = DesiredCapabilities.chrome();
capabilities.setCapability(ChromeOptions.CAPABILITY, chromeOptions);
System.out.println("Driver is now ChromeDriver");
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);

The footer is getting lost in this. What I am getting is:

What I am suppose to get is this:

Another code I used is:

driver.manage().window().setSize(new Dimension(1024, 786));

Can anyone please help? Thanks

Answer 1

Setting the size of the window wont work if you want to fit contents of a web page in window without scroll If it's a large page.

What you will have to do is adjust the zoom level to fit all contents in window.

You can do this as shown below:

WebElement html = driver.findElement(By.tagName("html"));
html.sendKeys(Keys.chord(Keys.CONTROL, Keys.SUBTRACT));

Make sure to reset the zoom level afterwards as shown below:

html.sendKeys(Keys.chord(Keys.CONTROL, "0"));

What basically happens here is the same as what happens when you press Control and - in your keyboard while focusing on your browser.

Try it out, if this serves your purpose.

Answer 2

You need to pass the mobileEmulation related configuration within an instance of ChromeOptions Class as follows:

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

Map<String, Object> mobileEmulation = new HashMap<>();
mobileEmulation.put("deviceMetrics", deviceMetrics);
mobileEmulation.put("userAgent", "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19");

ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulation);
WebDriver driver = new ChromeDriver(chromeOptions);

Note: Testing a mobile website on a desktop using mobile emulation can be useful, but testers should be aware that there are many subtle differences such as:

• Entirely different GPU, which may lead to big performance changes;
• Mobile UI is not emulated (in particular, the hiding url bar affects page height);
• Disambiguation popup (where you select one of a few touch targets) is not supported;
• Many hardware APIs (for example, orientationchange event) are unavailable.

Reference

Mobile Emulation

tl; dr

Mobile Emulation is subject to a known issue Test testClickElement from MobileEmulationCapabilityTest class fails on Chromium for all platforms