Protractor Failed: element not interactable

Question

I am running an E2E test for an Angular 7.x app. The test runs straight forward on my local machine. But when I push it on the repo (GitLab), then pipeline fails and throws following error:

USER PROFILE - Check and change PROFILE - Failed: element not interactable (Session info: chrome=71.0.3578.80) (Driver info: chromedriver=2.45.615279 (12b89733300bd268cff3b78fc76cb8f3a7cc44e5),platform=Linux 4.14.74-coreos x86_64)

Test Case:

it('USER PROFILE - Check and change PROFILE', () => {

    page.navigateTo();

    browser.sleep(1000);
    expect(page.getProfileEditTagName()).toMatch('app-edit-profile');

    expect(element(by.className('logged-as')).getText()).toBe( testEmail );


    browser.actions().mouseMove( element.all( by.id('editIcon-salutation') ).get(0)).click().perform().then(function () {
        browser.sleep(4000);

        element( by.className('mat-select-arrow') ).click().then(function () {

            browser.actions().mouseMove( element.all(by.className('option-value mat-option')).get(0)).click().perform();
            browser.sleep(1000);
            browser.actions().mouseMove( element.all( by.id('saveButton-salutation') ).get(0)).click().perform();
            browser.sleep(1000);

        });
    });

});

navigateTo() is just a method in profile.po.ts:

navigateTo() {
    browser.get('/profileComponentUrl');
}

What's confusing me and where I even can't localize the bug or what's wrong, is that it works fine locally. But once I push to repo, then it fails exactly at that test case. Any Hint please?

Answer 1

The reason element is not interactable could be - performing an action on hidden or obscured element.

You can try - 1. add sleep after by.className('mat-select-arrow') ).click(), as I can see you have not added any waits there. 2. Try to check if you running the test on your local and Jenkins machine with same screen resolution. (this could be the reason of obscured element)

Answer 2

I'd recommend to:

• Enable the stacktrace in protractor config: new SpecReporter({ spec: { displayStacktrace: true } }) so you can see exactly what element is throwing the error. This won't solve it but at least should point you in the right direction.
• Then if you're using tabs, buttons or other elements that hide/show/disable/enable or change the DOM view, you add a browser.sleep(100) after calling a .click()

Answer 3

I had a same kind of problem and I found this.

I copy pasted that (and some other minor tweaks for example force clicking on previous page in for-loop) and it worked. I believe that the browser.driver.manage().window().maximize(); was part of the solution.