3

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('admin@example.com');
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.

Patrick Kenny
  • 4,515
  • 7
  • 47
  • 76
  • Can you elaborate on why you needed to add networkIdle for it to work on headless Chrome please? It may be that rather than waiting for that you can detect some other change in an additional step – sahmeepee Mar 23 '22 at 17:15
  • @sahmeepee I'm not sure exactly why. The destination page is a standard Drupal admin page that has some AJAX but nothing fancy. I can also use `domcontentloaded` instead of `networkIdle` and Chrome will work, but not Safari/webkit on mobile. – Patrick Kenny Mar 24 '22 at 01:27
  • May we see the error that is thrown when visiting ../myform? is it just a timeout? How long does it take the networkidle? – Víctor Mar 24 '22 at 07:26
  • Could it be waiting for the networkidle -I'm sure you're spelling it with a lowercase 'i'- is taking longer than you have in your timeout specifications in the config when using mobile webkit? Or maybe the whole test? – Víctor Mar 24 '22 at 07:40
  • @Víctor It’s a timeout, and the timeout is set to 2 minutes. The page actually loads in about 2 seconds when I test it manually; this is a locally hosted server so it’s super fast. The video of the test shows this weird flickering between the current page and a black page for a couple seconds, and then I have a black screen for the rest of the test (until the timeout fails). The Drupal admin page that never loads is just some basic jquery and no customizations; it’s the same standard Drupal JavaScript used on all Drupal sites. – Patrick Kenny Mar 24 '22 at 13:49
  • @PatrickKenny Ouch. I'd suggest to raise the issue on the repo. Don't know if you've got to try the same behaviour using a previous playwright version, therefore installing a different baked-in webkit, or even tried another e2e framework to discard issues with some kind of waf -although this does not seem the case at all. I'll try to reproduce a similar behaviour with a minimal Drupal install whenever I have the time. Keep us updated! – Víctor Mar 24 '22 at 14:33
  • [Opened an issue](https://github.com/microsoft/playwright/issues/13060) and created a publicly open Drupal dev server for testing this out. – Patrick Kenny Mar 25 '22 at 06:47
  • @PatrickKenny Hey! I've been trying the demo page provided in the issue, desktop safari/mobile (plus chrome, firefox), both headless and headed, and having no issues so far. I was wondering... have you tried running this test inside a container running under a different base os? – Víctor Mar 29 '22 at 09:00
  • @Víctor Yes, this seems to have been an Ubuntu/WSL2 issue. Updating ubuntu fixed it. Thanks for your help! – Patrick Kenny Mar 31 '22 at 00:51

1 Answers1

3

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.
Patrick Kenny
  • 4,515
  • 7
  • 47
  • 76