[Feature] How to use setMobileEmulation for correct window resize #310

munrocket · 2024-12-20T17:14:24Z

I wanted to fix flutter/issues/136109 in Flutter for proper window size and E2E screenshot comparison. I realised that the same resize behaviour in ordinary Selenium WebDriver script, but if I adding setMobileEmulation all become correct. But I can't find the same feature here. Can you validate my thought, maybe this feature already supported in Dart version.

import { Builder } from 'selenium-webdriver';
import chrome from 'selenium-webdriver/chrome.js';
import { existsSync, mkdirSync, writeFileSync } from 'fs';

const options = new chrome.Options();
options.addArguments('--no-sandbox');

// BUG FIX >>> 
options.setMobileEmulation({
    deviceMetrics: {
        width: 393,
        height: 852,
        pixelRatio: 3.0
    },
    userAgent: 'Mozilla/5.0 (Linux; Android 15) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.6778.200 Mobile Safari/537.36'
});
// <<<

const driver = new Builder()
    .forBrowser('chrome')
    .usingServer('http://localhost:4444') // Ensure this server is running
    .setChromeOptions(options)
    .build();

(async function takeScreenshot() {
    try {
        // Set the window size to match the emulated device
        await driver.manage().window().setRect({ width: 393, height: 852 });

        // Create the screenshots directory if it doesn't exist
        if (!existsSync('screenshots')) {
            mkdirSync('screenshots');
        }

        // Take a screenshot and save it
        const screenshot = await driver.takeScreenshot();
        writeFileSync('screenshots/screenshot.png', screenshot, 'base64');
    } catch (error) {
        console.error('An error occurred:', error);
    } finally {
        await driver.quit();
    }
})();

munrocket · 2024-12-21T22:04:01Z

Mobile emulation works.

munrocket closed this as completed Dec 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature] How to use setMobileEmulation for correct window resize #310

[Feature] How to use setMobileEmulation for correct window resize #310

[Feature] How to use setMobileEmulation for correct window resize #310

[Feature] How to use setMobileEmulation for correct window resize #310

Comments