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

[viraxslot]

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.�[0m�[90m
   
      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' });
}

[viraxslot]

@dgozman you're absolutely right, it's overlay :(
It's interesting why in headless mode browser's version is parsed like 0, I'll check that:

Is it possible not to log any try to click the button? Because such output doesn't really help when using mocha for example.

[dgozman]

It's interesting why in headless mode browser's version is parsed like 0, I'll check that:

That's probably because headless version has a different user agent: HeadlessChrome/86 instead of Chrome/86.

Is it possible not to log any try to click the button? Because such output doesn't really help when using mocha for example.

I didn't understand this question. Are you asking about a particular line in the logs that you found distracting? Could you please rephrase this with more details?

[viraxslot]

Could you please rephrase this with more details?

@dgozman yes, sorry. In headless.log file you can see a lot of messages how playwright tries to click the button. I suppose it writes, waits a bit, tries to click again and writes again. I have 20 seconds timeout and when my test fails I have all these messages written to my console (4k lines). So my question is: is it possible to write more "user friendly" log? :)

Something like this:

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
Tries 1, 2, 3....

So it'll be only one "retrying click action" message with amount of tries.

[dgozman]

@viraxslot This makes sense, thanks for the explanation. I will look into this.

[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.