angular - mat-menu-item 在 Protractor e2e 测试中不可点击

Question

我正在使用 angular/material 中的 mat-menu:

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

在页面对象 po.ts 中，我正在搜索第一个按钮:

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

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

在 .spec 文件中，我试图点击第一个按钮:

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

我收到这个错误:

- 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似乎问题出在 chrome 中。我目前解决这个问题的方法是通过 webdriver 执行脚本来点击元素。

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

        button.click();`
    );
}

performLogout() {
    this.clickUserMenuTriggerButton();

    this.clickLogoutButton();
}