microsoft / playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
https://playwright.dev
Apache License 2.0
67.11k stars 3.69k forks source link

[Bug]: Mobile Device Emulation not rendering sites to viewport size #33702

Open davethepunkyone opened 1 day ago

davethepunkyone commented 1 day ago

Version

1.48.0 (also present in 1.47.0)

Steps to reproduce

  1. Create a test that uses mobile browser emulation (basic example below uses pytest):

    def test_mobile(playwright) -> None:
    
    browser = playwright.webkit.launch(headless=False)
    context = browser.new_context(
        **playwright.devices['iPhone 13']
    )
    
    page = context.new_page()
    page.goto("https://www.nhs.uk")
    expect(page.locator("h1")).to_contain_text("NHS website for England")
  2. Run the test (using headed mode is easiest to see the issue), e.g. pytest --headed --slowmo 2000

Expected behavior

When the test is executing, the site under test renders in mobile mode and displays as it normally would on a mobile device.

Screenshot running Playwright v1.45.1: Image

Actual behavior

When the test is executing, the site under test appears to render in desktop mode and content is not visible in trace files or if screenshots are taken.

Screenshot running Playwright v1.48.0: Image

Additional context

This issue isn't present in v1.45.1 of Playwright, so has seemingly been introduced after this point.

I've tested using multiple devices including Apple (iPhone 12, 13) and Android (Pixel 7) and the output seems to be the same. I've checked the debugging and looked at the devices object and it appears that isMobile is set to True when using these devices by default too.

Environment

- Operating System: Windows 11
- CPU: arm64
- Browser: Appears to be Webkit
- Python Version: 3.12.1
dgozman commented 22 hours ago

I can repro in JS as well. Works as expected in v1.45.1, does not work in v1.46.0.

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://www.nhs.uk');
  await page.pause();
});