Test portrait/landscape switch
Apps must handle orientation changes gracefully: preserving state, adjusting layouts, and maintaining functionality. Test both rotation directions and verify state persistence.
Portrait Mode
375 × 812px | Angle: 0°
Aspect Ratio
0.46
Click to rotate
📱
portrait
💡 Click "Rotate" to simulate orientation change. On real devices, rotate your phone or use DevTools device emulation.
Orientation events
Rotate device to see changes
Active layout indicator
Single column, stacked components, larger touch targets, bottom navigation
Multi-column, side-by-side content, sidebar navigation, maximized video
Automation hints
// Test orientation with viewport changes
import { devices } from '@playwright/test';
// Portrait mode
await page.setViewportSize({
width: 375,
height: 812
});
await expect(page.getByTestId('simulated-device'))
.toHaveAttribute('data-orientation', 'portrait');
// Simulate rotation to landscape
await page.setViewportSize({
width: 812,
height: 375
});
await expect(page.getByTestId('simulated-device'))
.toHaveAttribute('data-orientation', 'landscape');
// Using device presets
const iPhone = devices['iPhone 14'];
const context = await browser.newContext({
...iPhone,
// Override for landscape
viewport: {
width: iPhone.viewport.height,
height: iPhone.viewport.width
}
});
// Test state preservation after rotation
await page.fill('input[name="email"]', 'test@example.com');
await page.setViewportSize({ width: 812, height: 375 });
await expect(page.locator('input[name="email"]'))
.toHaveValue('test@example.com');// Rotate device with Appium
// Rotate to landscape
driver.rotate(ScreenOrientation.LANDSCAPE);
// Verify orientation changed
assertEquals(ScreenOrientation.LANDSCAPE, driver.getOrientation());
// Rotate back to portrait
driver.rotate(ScreenOrientation.PORTRAIT);
assertEquals(ScreenOrientation.PORTRAIT, driver.getOrientation());
// Test state preservation
WebElement input = driver.findElement(By.name("email"));
input.sendKeys("test@example.com");
// Rotate
driver.rotate(ScreenOrientation.LANDSCAPE);
// Verify value preserved
input = driver.findElement(By.name("email"));
assertEquals("test@example.com", input.getAttribute("value"));
// iOS specific: Check orientation lock
// Some apps lock to specific orientation
Map<String, Object> args = new HashMap<>();
args.put("orientation", "PORTRAIT");
driver.executeScript("mobile: setOrientation", args);
// Android specific
((AndroidDriver) driver).rotate(
new DeviceRotation(0, 0, 90) // x, y, z angles
);