Testing Mobile Apps: Portrait to Landscape

Learn the essentials of testing mobile apps in portrait and landscape modes, including techniques, tools, and best practices for optimal user experience.

App Development
Sep 19, 2024
Testing Mobile Apps: Portrait to Landscape

Here’s what you need to know about testing mobile apps in portrait and landscape modes:

  • It’s crucial for user experience
  • Combine manual and automated testing
  • Test on real devices, not just emulators
  • Consider accessibility (WCAG 2.1 requires both orientations)
  • Use cross-platform testing tools when possible

Key testing areas:

  • UI elements (resizing, repositioning)
  • Functionality in both orientations
  • Content adaptation across screen sizes
  • Performance on different networks

Quick Comparison:

AspectManual TestingAutomated Testing
AccuracyGood for subtle issuesPrecise for repetitive tests
SpeedSlowerFaster, tests multiple devices
CostLow upfront, high long-termHigh upfront, low long-term
FlexibilityGreat for complex scenariosLimited to programmed tests
Device CoverageLimited by testersWide device range

Remember: Good testing leads to happy users. Mix manual and automated methods for best results.

Manual Testing

Manual testing for portrait and landscape modes is hands-on. Testers physically interact with apps on real devices, switching orientations to spot issues.

What manual testers look for:

  • UI elements: Do buttons, text, and images resize correctly?
  • Functionality: Do features work in both orientations?
  • User experience: Does the app feel natural in each mode?

The big plus? Manual testing mimics real user behavior. Testers can switch orientations quickly, just like actual users.

“Manual testing catches subtle UI glitches and usability issues that automated tests might miss”, says Sarah Chen, QA Lead at MobileTech Solutions.

But it’s not perfect. Manual testing takes time and can’t cover all device-OS combos. That’s why many teams mix manual and automated testing.

Quick tips for manual testing:

  1. Use real devices, not just emulators
  2. Test on various screen sizes
  3. Check both iOS and Android
  4. Rotate the device multiple times during a single user flow

For iOS, testers can use XCUIDevice.shared.orientation to check the current interface orientation.

Android needs extra care. When a device rotates, Android usually destroys and recreates Activities and Fragments. Testers must ensure the app handles this smoothly.

Manual testing is great for:

  • Multi-touch gestures
  • Visual elements
  • Exploratory testing

2. Automated Testing

Automated testing tools are game-changers for checking mobile apps across screen orientations. They quickly test apps in portrait and landscape modes, catching issues that manual testing might miss.

Here’s the lowdown on automated testing for screen orientations:

  1. Pre-test setup

You can set the screen orientation before running tests. Here’s an Appium example with Java:

    DesiredCapabilities caps = new DesiredCapabilities();
    caps.setCapability("deviceName", "My Device");
    caps.setCapability("orientation", "LANDSCAPE");
    AndroidDriver driver = new AndroidDriver(new URL("http://127.0.0.1:4723/wd/hub"), caps);
  1. Mid-test orientation changes

Tests can flip orientations during execution:

    ScreenOrientation orientation = driver.getOrientation();
    driver.rotate(ScreenOrientation.LANDSCAPE);

Automated tests check:

  • UI element scaling and repositioning
  • Functionality in both orientations
  • Content adaptation across screen sizes
  • Layout consistency between breakpoints

Many teams use real device clouds for testing. BrowserStack, for example, offers access to thousands of real devices for Appium tests. This helps catch device-specific issues that emulators might miss.

“Using real devices for automated testing has helped us catch 30% more orientation-related bugs compared to emulators alone”, says Alex Lee, QA Manager at MobileTech Solutions.

Tools like Sauce Labs’ Sauce Mobile can test apps across many devices and orientations quickly. For web apps, Chrome Developer Tools and Hoverify’s Responsive Viewer help check responsive designs in various orientations.

When setting up automated tests, make sure to:

  • Test all app functionalities in both orientations
  • Verify that changing orientation doesn’t erase current page activities
  • Check for performance issues in different orientations

Good and Bad Points

Manual and automated testing for mobile app orientations each have their pros and cons. Let’s break it down:

AspectManual TestingAutomated Testing
AccuracyHuman error riskPrecise for repetitive tests
SpeedSlowerFaster, tests multiple devices
CostLow upfront, high long-termHigh upfront, low long-term
FlexibilityGreat for complex scenariosLimited to programmed tests
Device CoverageLimited by testersWide device range
Real-world SimulationMimics user behaviorMay miss UX nuances

Manual testing excels at:

  • Catching subtle UI orientation issues
  • Immediate UX feedback
  • Handling complex scenarios

But it’s:

  • Time-consuming
  • Potentially inconsistent
  • Inefficient for repetitive tests

Automated testing shines with:

  • Speed across multiple devices
  • Consistent results
  • Long-term cost-effectiveness

However, it:

  • Needs big upfront investment
  • Might miss subtle UX problems
  • Struggles with unpredictable scenarios

“Combining manual and automated testing caught 30% more orientation bugs than either method alone”, - Alex Lee, QA Manager at MobileTech Solutions.

The takeaway? Use both. Let manual testing tackle complex scenarios and UX, while automation handles repetitive checks across devices.

Wrap-up

Testing mobile apps in portrait and landscape? It’s crucial for a great user experience. Here’s what you need to know:

  1. Mix manual and automated testing

Manual testing catches subtle UI issues. Automated testing? It’s fast and consistent across devices.

  1. Use annotations for orientation changes

Avoid issues when switching orientations. Use annotations to set and revert orientations before and after tests:

    @Before
    fun change(){    
        MyRule.scenario.onActivity { activity ->        
            activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT 
        }
    }       
    @After
    fun changeBack(){    
        MyRule.scenario.onActivity { activity ->        
            activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT 
        }
    }
  1. Don’t forget accessibility

WCAG 2.1 says support both orientations. Make sure your app works well in landscape mode. Why? Many users prefer it.

  1. Test on real devices

Emulators are okay, but real devices give you the best results. You’ll spot real-world issues you might miss otherwise.

  1. Think cross-platform

Developing for multiple platforms? Choose testing tools that work across them. Write tests once, run them everywhere. It’s a time-saver.

Remember: Good testing leads to happy users. And happy users? That’s what we’re all after.

Share this post

Supercharge your web development workflow

Take your productivity to the next level, Today!

Written by
Author

Himanshu Mishra

Indie Maker and Founder @ UnveelWorks & Hoverify