[BUG] Can't click button in Chromium headless mode

Context:

• Playwright Version: v1.4.0
• Operating System: Mac
• Node.js version: v12.18.3
• Browser: Chromium, headless mode

Code Snippet

it.only('should be possible to login with correct credentials', async function () {
            await adminLoginPage.login(credentials.adminAccount.username, credentials.adminAccount.email);
            const adminPage = new AdminPage(browser.pageOne, browser.contextOne);
            await adminPage.waitForSelector(adminPage.tabNavigation);
            expect(await adminPage.url()).to.be.equal(config.get('adminUrl') + `/?event=${this.eventId}`);
        });

Describe the bug My test is really simple: I fill email and password, click submit button and wait for the new page’s selector and correct URL.

Form:

<form id="joinForm" novalidate="" name="joinForm" ng-submit="adminLogin();" 
ng-hide="event.accessedFromMobileDevice" 
class="ng-pristine ng-invalid ng-invalid-required ng-valid-email" aria-hidden="false">

Button:

<button type="submit" class="red button-enter" aria-label="Enter the event">ENTER THE EVENT</button>

In headful Chromium everything works fine, log: headful.log

In headless Chromium playwright tries to click button with no result and fails by timeout: headless.log

waiting for selector ".button-enter"
  selector resolved to visible <button type="submit" class="red button-enter" aria-labe…>ENTER THE EVENT</button>
attempting click action
  waiting for element to be visible, enabled and not moving
  element is visible, enabled and does not move
  scrolling into view if needed
  done scrolling
  checking that element receives pointer events at (932.48,215.48)
  <div tabindex="-1" class="md-dialog-container ng-scop…>…</div> intercepts pointer events
...
retrying click action
  waiting for element to be visible, enabled and not moving
  element is visible, enabled and does not move
  scrolling into view if needed
  done scrolling
  checking that element receives pointer events at (932.48,215.48)
  <div tabindex="-1" class="md-dialog-container ng-scop…>…</div> intercepts pointer events
retrying click action
  waiting for element to be visible, enabled and not moving
  element is visible, enabled and does not move
  scrolling into view if needed
  done scrolling
  checking that element receives pointer events at (932.48,215.48)
  <div tabindex="-1" class="md-dialog-container ng-scop…>…</div> intercepts pointer events
retrying click action
  waiting for element to be visible, enabled and not moving
============================================================
Note: use DEBUG=pw:api environment variable and rerun to capture Playwright logs.
   
      at Frame._wrapApiCall (node_modules/playwright/lib/client/channelOwner.js:76:15)
      at Frame.click (node_modules/playwright/lib/client/frame.js:242:21)
      at /Users/viraxslot/Documents/projects/host-automation/node_modules/playwright/lib/client/page.js:373:60
      at Page._attributeToPage (node_modules/playwright/lib/client/page.js:181:20)
      at Page.click (node_modules/playwright/lib/client/page.js:373:21)
      at AdminLoginPage.login (src/page-objects/admin/admin-login.page.ts:12:25)
      at Context.<anonymous> (test/e2e/login-form.spec.ts:64:13)

Chromium options:

    "chromiumOptions": {
        "timeout": 5000,
        "devtools": false,
        "args": [
            "--disable-dev-shm-usage",
            "--shm-size=2gb",
            "--disable-gpu",
            "--disable-web-security",
            "--disable-user-media-security",
            "--disable-settings-window",
            "--disable-restore-session-state",
            "--disable-session-crashed-bubble",
            "--autoplay-policy=no-user-gesture-required",
            "--use-fake-ui-for-media-stream",
            "--use-fake-device-for-media-stream",
            "--allow-file-access-from-files",
            "--disable-translate"
        ]
    },

[dgozman]

It is hard to say what’s wrong. Looking at the logs, there is a dialog <div tabindex="-1" class="md-dialog-container ng-scop…>…</div> that probably overlays the target button you are trying to click.

I’d suggest to try/catch the failing click call and capture screenshot when it fails, to see what’s happening in the page. This way we’ll be able to tell whether that’s actually the dialog overlaying the button, or something else. Could you please do that? Otherwise, I don’t know how to help without a working repro, or at least a page url.

try {
  await page.click('.button-enter');
} catch (e) {
  console.log(e);
  await page.screenshot({ path: 'click-failure.png' });
}

[dgozman]

With #4001, there should be fewer logs now. Let me close this, but if you still find that we have too much logs, please reopen/comment.