[Feature]: Native API for changing mobile orientation

[unlikelyzero]

🚀 Feature Request

I'm starting to get into the weeds of mobile testing and noticed that Playwright doesn't have an API for changing from portrait to landscape. This is something that broke in our application and something that'd we'd want to explicitly test for.

I believe the standard approach would be to change the viewport, but when using playwright/test device's in a realworld way (many projects executing a single test), it wouldn't be practical to set the viewport with explicit values and doesn't interact with browser orientationchange in a native way

Example

Chat GPT created the following:

function adjustForOrientationChange() {
  // Function to transpose the viewport size
  const transposeViewportSize = () => {
    // Get the current viewport dimensions
    const width = window.innerWidth;
    const height = window.innerHeight;

    // Set the viewport dimensions, swapping width and height
    // Note: In a real scenario, you might adjust the CSS or canvas dimensions here
    console.log(`Transposed viewport size to width: ${height}, height: ${width}`);
  };

  // Listen for the orientation change event
  window.addEventListener('orientationchange', () => {
    // Transpose the viewport dimensions after orientation change
    transposeViewportSize();

    // Log the new orientation for demonstration purposes
    console.log(`Orientation changed to: ${screen.orientation.type}`);
  });

  // Initial adjustment in case the orientation changes before the function is invoked
  transposeViewportSize();
}

// Invoke the function
adjustForOrientationChange();

Motivation

This seems like something that every mobile friendly browser would have

[yury-s]

Would dispatching orientationchange event manually work for your use case (see this test for example)?

[unlikelyzero]

@yury-s I think so. Let me test it

[yury-s]

Closing per the response above, there are no current plans to add dedicated API for changing the viewport orientation.