mat-menu-item is not clickable with protractor e2e tests

Question

I'm using mat-menu from angular/material:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
    <button mat-menu-item id = "item1">Item 1</button>
    <button mat-menu-item id = "item2">Item 2</button>
</mat-menu>

In the Page Object po.ts, I'm searching for the first button:

getMenuButton() {
    return element(by.buttonText('Menu'));
}

getItem1Button() {
    return element(by.id('item1'));
}

In the .spec files, I'm trying to click on the first button:

po.getMenuButton().click();
expect(get.getItem1Button().isDisplayed()).toBe(true);
po.getItem1Button().click();

I'm getting this error:

- Failed: unknown error: Element <button _ngcontent-c1="" class="mat-menu-item
ng-tns-c1-0 ng-star-inserted" mat-menu-item="" role="menuitem" tabindex="0"
ng-reflect-router-link="item1" id="item1" 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>

Answer 1

通过查看https://github.com/angular/material2/issues/9755和https://github.com/angular/material2/issues/10140，似乎问题出在铬上。我当前针对此问题的解决方案是通过通过webdriver执行脚本来单击该元素。

clickLogoutButton() {
    browser.executeScript(`
        const button = document.querySelector(
            'button[data-menu-item-named="logout"]'
        );

        button.click();`
    );
}

performLogout() {
    this.clickUserMenuTriggerButton();

    this.clickLogoutButton();
}