Components: mat-menu-item isn't clickable during e2e test

[remicastaing]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

In an e2e test with protractor, mat-menu-item should be clickable.

What is the current behavior?

While clicking on a mat-menu-item, an other element would receive the click.

      - Failed: unknown error: Element <button _ngcontent-c0="" class="mat-menu-item 
cdk-focused cdk-mouse-focused" mat-menu-item="" role="menuitem" routerlink="page1"
tabindex="0" ng-reflect-router-link="page1" aria-disabled="false">...</button> is not clickable
at point (328, 42). Other element would receive the click: <div id="cdk-overlay-0" 
class="cdk-overlay-pane" dir="ltr" style="pointer-events: auto; top: 10px; right: 16px;">...</div>
        (Session info: chrome=65.0.3325.88)
        (Driver info: chromedriver=2.35.528157 (4429ca2590d6988c0745c24c8858745aaaec01ef),platform=Mac OS X 10.13.3 x86_64)

What are the steps to reproduce?

This is my app.e2e-spec.ts file:

describe('test-menu App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
    const width = 375;
    const height = 667;
    browser.driver.manage().window().setSize(width, height);
  });


  it('should have a clickable mat-menu-item', () => {
    page.navigateTo();
    page.getMenuButton().click();
    browser.sleep(1000);
    page.getMenuItemByText('Page 1').click();
    browser.sleep(10000);
  });
});

I also tried to perform the click on the mat-menu-item with:

browser.actions().mouseMove(page.getMenuItemByText('Page 1')).click();

What is the use-case or motivation for changing an existing behavior?

E2E-Testing of menu button on small screen.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.2.6
Material 5.2.2
OS: Mac OS X 10.13.3 x86_64
TypeScript: 2.4.2
Browser: chrome=65.0.3325.88

Is there anything else we should know?

[crisbeto]

Closing as a duplicate of https://github.com/angular/material2/issues/9755.

[remicastaing]

After changing the browser to firefox, the e2e test went through.

I think, it's a chromium bug: https://bugs.chromium.org/p/chromedriver/issues/detail?id=2142

By the way, I don't think it's related to https://github.com/angular/material2/issues/9755.

[franbueno]

Im getting the same issue. Any workaround?

[lomeshng]

WA please ?

[willmcf]

Bug appeared after updating to :
chrome=73.0.3683.86
chromedriver=2.46.628402

[sebastianhaas]

I can confirm this using Material 7.1.4 on Chrome 73.0.3683.103 with webdriver 2.46

[sebastianhaas]

@crisbeto Please consider re-opening this. #9755 is more like a feature request, the question there is about the button that triggers the menu to open while the present issue is about the menu entries in the menu being unclickable- as @remicastaing pointed out, it's probably related to the Chrome version in use. I downgraded to an older version, which does not show this behaviour and also, as mentioned before, it runs fine on Firefox.

[mpintener]

I downgraded Angular Material version to 7.1.1 and I'm using Chrome 73.0.3683.103 with webdriver 2.46. It works for me now.

[patoncrispy]

This is still an issue. Did anyone find a work around?

[sebastianhaas]

Chris, what chromedreiver version are you using?

[patoncrispy]

Hey Sebastian. I'm using version 74.0.3729.169. I did find a work around, which was to use:

const EC = protractor.ExpectedConditions;

await browser.wait(
      EC.visibilityOf($('[name="myButton"]')),
      5000
    );

    await browser.executeScript(`
        const button = document.querySelector(
            'button[name="myButton"]'
        );

        button.click();`);

I'm new to Protractor so this may not be the most efficient way of doing things, but it got me past my problem.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}