CODEWITHSUNDEEP
angularangular-materialprotractore2e-testing
remicastaing
remicastaing

Reputation: 173

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

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>

Upvotes: 3

Views: 4027

Answers (4)

Hodossy Szabolcs
Hodossy Szabolcs

Reputation: 1668

I came across this exact issue, and I was able to solve this by replacing BrowserAnimationsModule with NoopAnimationsModule. This slightly modifies your code under test, but I can live with that. I added a new flag to my environment, and added the following line to my AppModule imports array:

environment.testing ? NoopAnimationsModule : BrowserAnimationsModule

Upvotes: 0

gilm
gilm

Reputation: 8050

My problem was caused by menu items that were not visible due to scrolling (overflow.)

I solved it by changing scrollTop to 0:

browser.executeScript("arguments[0].scrollTop = 0;", element(by.css('.mat-select-panel')));

I also had to add browser.sleep(500); to overcome dialog popup animation.

Upvotes: 0

leemon20
leemon20

Reputation: 71

By looking at https://github.com/angular/material2/issues/9755 and https://github.com/angular/material2/issues/10140 it seems as if the issue sits in chrome. My current solution to this problem is to click on the element by executing a script through the webdriver.

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

        button.click();`
    );
}

performLogout() {
    this.clickUserMenuTriggerButton();

    this.clickLogoutButton();
}

Upvotes: 7

TheUnreal
TheUnreal

Reputation: 24472

When you get "is not clickable at point" error in protractor, the element you are trying to click is probably hidden.

Before triggering a click on the menu button, make sure the menu main button is clicked and the element is visible.

Therefore, click the parent element before clicking the #item1 button.

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

Test:

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

Upvotes: 0

Related Questions