How do you test responsive design across different screen sizes in Selenium?

public class ResponsiveTest extends BaseTest {

    // Common breakpoints to test
    private static final Dimension MOBILE_PORTRAIT  = new Dimension(375,  812);
    private static final Dimension MOBILE_LANDSCAPE = new Dimension(812,  375);
    private static final Dimension TABLET           = new Dimension(768,  1024);
    private static final Dimension DESKTOP          = new Dimension(1366, 768);
    private static final Dimension WIDE             = new Dimension(1920, 1080);

    @Test(dataProvider = "screenSizes")
    public void verifyNavbarAtBreakpoints(Dimension size, String label) {
        driver.manage().window().setSize(size);
        driver.get("https://automateqa.online");

        System.out.println("Testing at: " + label + " (" + size.width + "×" + size.height + ")");

        if (size.width < 768) {
            // Mobile: hamburger menu should be visible, desktop nav hidden
            Assert.assertTrue(
                driver.findElement(By.cssSelector(".hamburger-menu")).isDisplayed(),
                "Hamburger menu not visible on " + label);
            Assert.assertFalse(
                driver.findElement(By.cssSelector(".desktop-nav")).isDisplayed(),
                "Desktop nav should be hidden on " + label);
        } else {
            // Desktop: full nav visible, hamburger hidden
            Assert.assertTrue(
                driver.findElement(By.cssSelector(".desktop-nav")).isDisplayed(),
                "Desktop nav not visible on " + label);
        }

        // Take screenshot for each breakpoint
        ScreenshotUtils.capture(driver, label.replace(" ", "_") + "_navbar");
    }

    @DataProvider(name = "screenSizes")
    public Object[][] screenSizes() {
        return new Object[][] {
            {MOBILE_PORTRAIT,  "Mobile Portrait"},
            {MOBILE_LANDSCAPE, "Mobile Landscape"},
            {TABLET,           "Tablet"},
            {DESKTOP,          "Desktop"},
            {WIDE,             "Wide Desktop"},
        };
    }
}

ChromeDriver chromeDriver = (ChromeDriver) driver;
DevTools devTools = chromeDriver.getDevTools();
devTools.createSession();

// Emulate iPhone 14 Pro
Map<String, Object> iPhoneMetrics = Map.of(
    "width",             393,
    "height",            852,
    "mobile",            true,
    "deviceScaleFactor", 3.0
);
chromeDriver.executeCdpCommand("Emulation.setDeviceMetricsOverride", iPhoneMetrics);

// Set mobile user agent
chromeDriver.executeCdpCommand("Emulation.setUserAgentOverride", Map.of(
    "userAgent", "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15"
));

driver.get("https://automateqa.online");
// Now browser behaves like iPhone 14 Pro

Map<String, Object> mobileEmulation = new HashMap<>();
mobileEmulation.put("deviceName", "iPhone 14 Pro"); // Chrome DevTools device list

ChromeOptions options = new ChromeOptions();
options.setExperimentalOption("mobileEmulation", mobileEmulation);
WebDriver mobileDriver = new ChromeDriver(options);

// Verify element visibility at different widths
JavascriptExecutor js = (JavascriptExecutor) driver;

driver.manage().window().setSize(new Dimension(375, 812));
Boolean isMobileNavVisible = (Boolean) js.executeScript(
    "return window.getComputedStyle(document.querySelector('.mobile-nav')).display !== 'none'"
);
Assert.assertTrue(isMobileNavVisible, "Mobile nav should show at 375px");

driver.manage().window().setSize(new Dimension(1366, 768));
Boolean isDesktopNavVisible = (Boolean) js.executeScript(
    "return window.getComputedStyle(document.querySelector('.desktop-nav')).display !== 'none'"
);
Assert.assertTrue(isDesktopNavVisible, "Desktop nav should show at 1366px");