In Playwright, can't use page.goto with headless webkit

Question

I'm trying to write a test for a Drupal website in Playwright. I'm running on Ubuntu 20.04 via WSL2.

I set a base url (https://www.example.com) in my Playwright config file.

I have a few simple steps:

await this.page.goto('/user/logout');
await this.page.goto('/user/login');
await this.page.locator('input[name="name"]').fill('[email protected]');
await this.page.locator('input[name="pass"]').fill('password');
await this.page.locator('input:has-text("Login")').click();
await this.page.waitForSelector('text="You are logged in"');
await this.page.goto('/admin/structure/webform/manage/myform', { waitUntil: 'networkIdle' });

And I wanted to test on a simulated iPhone, so I used this in my config file:

  name: 'iPhone 6/7/8',
  use: devices['iPhone 8'],

The problem is that in this iPhone 8 simulated device in headless mode only, the last goto fails (await this.page.goto('/admin/structure/webform/manage/myform')). It happens 100% of the time when I run the test.

The test works fine on webkit (desktop), chrome (desktop), firefox (desktop), and android (mobile). The test also works on iOS when not headless. And the same steps work on a real iOS device.

I needed to add networkIdle to the final step to get it to work on headless Chrome (both desktop and Android), so I'm guessing I might need to make another change to get it to work on iOS, but what?

When I watch the video of my test in action, when it gets to the final step, the screen starts flickering very rapidly for about 3 seconds and then cuts to black.

Additional info

Based on the list of Playwright devices, I copied the code for iPhone 8 and experimented to see what specifically causes the error.

As shown below, changing isMobile from true to false will allow the tests to pass. So the specific error seems to be related to whatever setting isMobile to true does.

  projects: [
    {
      name: 'iPhone 6/7/8',
      use: {
        userAgent:
          'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/15.4 Mobile/15A372 Safari/604.1',
        browserName: 'webkit',
        viewport: {
          width: 375,
          height: 667,
        },
        deviceScaleFactor: 2,
        isMobile: false,
        hasTouch: true,
        defaultBrowserType: 'webkit',
      },
    },
  ],

Playwright bug report filed here.

Answer 1

As described in the playwright issue, this behavior seems to be caused by a failure in the OS (in my case, Ubuntu running on WSL2).

This was solved by updating all packages in ubuntu; unfortunately, there were several packages and I'm not sure which was the exact fix, but the takeaways are:

1. Ubuntu and WSL2 sometimes have graphical issues that can interfere with playwright running tests.
2. If you start seeing issues, update ubuntu, not just package.json.