Element not interactable in a non Angular site

Question

For my test, I am using protractor. The test first opens an Angular page, do some actions and then open a nonangular site. For the nonangular site I did the following:

it('should login on BC', function(){
 browser.waitForAngularEnabled(false); // disable waiting to navigate to not Angular page
        browser.get('non angularsite');
        element(by.id('UserName')).sendKeys('user');
        element(by.id('Password')).sendKeys('pwd');
        element(by.id('submitButton')).click();
    });

    it('should confirm the quantity typed on BC', function () {
        browser.driver.manage().window().maximize();
        browser.sleep(2000);                
        element(by.className('ms-list-itemLink')).click();//click on search button
        browser.sleep(2000);
        browser.switchTo().frame(element(by.className('designer-client-frame')).getWebElement());            
        element(by.css('.thm-cont-g0-bgcolor-1 > .icon-MoreEllipsis')).click();
        browser.sleep(1000);
        element(by.linkText('BFTESTUSER')).click();
        browser.sleep(2000);
        
        element(by.css('.ms-nav-contextmenu-trigger:nth-child(3)')).click();//click on posting date
        browser.sleep(3000);

When the automation reaches the

element(by.css('.ms-nav-contextmenu-trigger:nth-child(3)')).click();//click on posting date

I got the following error:

    Failed: element not interactable
      (Session info: chrome=79.0.3945.130)
      (Driver info: chromedriver=79.0.3945.16 (93fcc21110c10dbbd49bbff8f472335360e31d05-refs/branch-heads/3945@{#262}),platform=Windows NT 10.0.18362 x86_64)
  Stack:
    ElementNotVisibleError: element not interactable
      (Session info: chrome=79.0.3945.130)
      (Driver info: chromedriver=79.0.3945.16 

Answer 1

You have to wait till element able to receive click so it would be intractable.

Please try below code with wait.

var elm = element(by.css('.ms-nav-contextmenu-trigger:nth-child(3)'));
var EC = protractor.ExpectedConditions;

browser.wait(EC.elementToBeClickable(elm), 15000);
elm.click();

Answer 2

The error message "ElementNotVisibleError: element not interactable" typically means that the element you're trying to interact with is not visible or not in a state where it can receive interactions at the moment the test is trying to interact with it.

Here are a few steps you can take to troubleshoot and potentially fix this issue:

1. Wait for the element to be clickable: Instead of using browser.sleep(), which waits for a fixed amount of time regardless of whether the element is ready, you should use Protractor's built-in browser.wait() function to wait for the element to become clickable.

javascript

var EC = protractor.ExpectedConditions;
var elementToClick = element(by.css('.ms-nav-contextmenu-trigger:nth-child(3)'));
browser.wait(EC.elementToBeClickable(elementToClick), 5000); // Wait for 5 seconds
elementToClick.click();

1. Ensure the element is within the viewport: If the element is not in the viewport, it may not be clickable. You can scroll to the element before interacting with it:

   var elementToClick = element(by.css('.ms-nav-contextmenu-trigger:nth-child(3)')); browser.executeScript("arguments[0].scrollIntoView();", elementToClick.getWebElement()); elementToClick.click();

2. Check if there are any overlays or pop-ups: Sometimes, elements might be covered by overlays or pop-ups. Ensure that there are no such elements blocking the target element.

3. Check if the element locator is correct: Double-check that the CSS selector used to locate the element is correct and unique.

By implementing these steps, you should be able to resolve the "ElementNotVisibleError" and interact with the element successfully in your Protractor test.