使用Selenium MicrosoftEdgeDriver调整浏览器尺寸偏差问题求助

Yep, this is a super common quirk that plenty of us have run into when pairing EdgeDriver with Galen for visual testing. Let me break down why it’s happening and how to fix it.

The Root Cause #

The problem boils down to how EdgeDriver calculates "window size" by default. When you call manage().window().getSize(), it returns the entire browser window dimensions—including the title bar, borders, and all those extra UI elements (chrome) that Edge adds. But Galen’s visual tests care about the viewport (the actual area where your app content renders), which is smaller than the full window size. That’s why your expected 360x640 viewport is showing up as a 768x383 full window—those extra pixels are Edge’s chrome eating into your desired dimensions.

Fixes to Try Out #

Here are the most reliable solutions I’ve seen work for this:

• Set the viewport directly with DevTools: This is the cleanest approach. EdgeDriver supports the same DevTools protocol as ChromeDriver, so you can bypass the window chrome entirely and set the exact viewport size you need. Here’s a Java snippet to implement this:

  import org.openqa.selenium.devtools.DevTools;
  import org.openqa.selenium.devtools.v85.emulation.Emulation;
  import java.util.Optional;
  
  // Get DevTools instance from your EdgeDriver
  DevTools devTools = ((ChromeDriver) getDriver()).getDevTools();
  devTools.createSession();
  
  // Set viewport dimensions (swap width/height if needed for your use case)
  devTools.send(Emulation.setDeviceMetricsOverride(
      360,  // Desired viewport width
      640,  // Desired viewport height
      1.0,  // Device scale factor
      false, // Mobile mode
      Optional.empty(),
      Optional.empty(),
      Optional.empty(),
      Optional.empty(),
      Optional.empty(),
      Optional.empty(),
      Optional.empty(),
      Optional.empty(),
      Optional.empty()
  ));
  

• Calculate and offset for chrome size: If DevTools isn’t an option for your setup, you can manually measure the difference between Edge’s full window size and the viewport. Run this script once to get the chrome offsets:

  Long windowWidth = (Long) getDriver().executeScript("return window.outerWidth;");
  Long viewportWidth = (Long) getDriver().executeScript("return window.innerWidth;");
  Long widthOffset = windowWidth - viewportWidth;
  
  Long windowHeight = (Long) getDriver().executeScript("return window.outerHeight;");
  Long viewportHeight = (Long) getDriver().executeScript("return window.innerHeight;");
  Long heightOffset = windowHeight - viewportHeight;
  

  Then subtract these offsets from your desired viewport size when setting the window size:

  int desiredViewportWidth = 360;
  int desiredViewportHeight = 640;
  getDriver().manage().window().setSize(new Dimension(desiredViewportWidth + widthOffset.intValue(), desiredViewportHeight + heightOffset.intValue()));
  

• Use Galen’s predefined device profiles: Galen has built-in device configurations that account for browser chrome out of the box. Instead of setting custom sizes, try running your test with a predefined device flag like:

  galen test your-test.spec --device "mobile portrait" --size 360x640
  

  This often handles the viewport sizing automatically without extra code.

Verify the Fix #

After applying any of these, make sure to check the viewport size (not the full window) to confirm it matches your expectations:

Long viewportWidth = (Long) getDriver().executeScript("return window.innerWidth;");
Long viewportHeight = (Long) getDriver().executeScript("return window.innerHeight;");
System.out.println("Viewport size: " + viewportWidth + ", " + viewportHeight);

You should see your desired 360x640 here if everything works correctly.

内容的提问来源于stack exchange，提问作者Zach Folwick