Protractor - Unable to access element due to fixed Top navigation bar

Question

I'm facing the following issue in protractor with jasmine

Click/mouse hover not working because of fixed top navigation bar in my application. I need to click/perform mouse hover on a web page. Unfortunately that element is displaying behind that fixed navigation bar. So scroll till element present & click by x & y coordinates are not working.

My dependencies are :

protractor version 5.2.2

node 8.9.3

selenium standalone 3.13

chrome driver-2.40

chromebrowser v67

OS- Windows 10

Thanks in advance

Answer 1

Try using prototype executeScript

Just try clicking that element from the browser console using id,name or xpath.

For example :

var el = element(by.module('header'));
var tag = browser.executeScript('return arguments[0].click()', el).then(function() {
        expect(something).toMatch(something);
    });

Answer 2

Another way, along the same lines as what Bharath Kumar S and knowing JeffC's caveat that this approach is cheating, I had a similar issue where the App-Header kept getting in my way of clicking, and I knew I was willing to never need it (so, for instance, to find other ways to navigate or log out and not check for stuff that was on it). I, therefore, did the following, which solved the problem. Note if you refresh the screen, you have to call it again. Also note I am using a number of functions from https://github.com/hetznercloud/protractor-test-helper, which do what you would expect from their names.

var removeAppHeaderIfAny = async function() {

  //this function hides the app header
  //it is useful to avoid having covers there when Protractor worries that something else will get the click

  let found = false;
  try {
    found = await waitToBeDisplayed(by.className("app-header"), 2000);
  } catch (e) {
    let s: string = "" + e;
    if (s.search("TimeoutError") != 0) flowLog("presumably fine, cover already removed: " + e);
    found = false;
  }
  if (!found) return;

  if (found) {
    let coverElement = await element(by.className("app-header"));
    browser.executeScript(
      "arguments[0].style.visibility='hidden';",
      coverElement
    );
    await waitToBeNotDisplayed(by.className("app-header"), 10000);
  }
  return;
  //note after this is called you will not see the item, so you cannot click it
};

As I look at the code, it strikes me one can probably remove the if (found) and associated brackets at the end. But I pasted in something I know has been working, so I am not messing with that.

As indicated up front, I knew I was willing to forego use of the app-header, and it is a bit crude.