Question

我使用角度/材质中的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();
}

Answer 2

当量角器出现“点不点击”错误时，您尝试单击的元素可能已隐藏。

在触发菜单按钮上的单击之前，请确保单击菜单主按钮并且元素可见。

因此，在单击#item1按钮之前单击父元素。

<button mat-button [matMenuTriggerFor]="menu" id="myMenu">Menu</button>

测试：

element(by.id('myMenu')).click();
po.getItem1Button().click();

Answer 3

我遇到了这个确切的问题，我可以通过将BrowserAnimationsModule替换为NoopAnimationsModule来解决此问题。这会稍微修改您的测试代码，但是我可以接受。我向环境添加了一个新标志，并将以下行添加到了AppModule导入数组中：

environment.testing ? NoopAnimationsModule : BrowserAnimationsModule

使用量角器e2e测试无法点击mat-menu-item

3 个答案: