How to use the protractor.browser.actions function in protractor

it('should allow preview user to view the notification menu', () => {
    const vle = new VLEPage();
    vle.openNotificationMenu();
    common.shouldBeDisplayed(vle.notificationMenu);

    // notification menu should have the Alerts title and say that there are no alerts.
    const notificationDialogTitle = element(by.xpath('//md-toolbar/span/span[@translate="notificationsTitle"]'));
    expect(notificationDialogTitle.isDisplayed()).toBeTruthy();
    expect(notificationDialogTitle.getText()).toEqual("Alerts");

    const notificationDialogContent = element(by.xpath('//md-content/div/span[@translate="noAlerts"]'));
    expect(notificationDialogContent.isDisplayed()).toBeTruthy();
    expect(notificationDialogContent.getText()).toEqual("Hi there! You currently have no alerts.");

    browser.actions().sendKeys(protractor.Key.ESCAPE).perform();
    common.shouldBeHidden(vle.notificationMenu);

    vle.openNotificationMenu();
    common.shouldBeDisplayed(vle.notificationMenu);

    clickOnPageBody();
    common.shouldBeHidden(vle.notificationMenu);
  });
});

static async verifyCompetitiveProgrammingLink() {
        await browser.actions().mouseMove(HeaderPageObject.competeLink).perform();

        const competitiveProgrammingLink = HeaderPageObject.competitiveProgrammingLink.element(by.xpath('..'));
        
        const href = await competitiveProgrammingLink.getAttribute('href');
        expect(href).toEqual(ArenaPageConstants.url);
    }

openDiskSidebar(name) {
    browser
      .actions()
      .mouseMove(element(by.xpath(`//span[text()="${name}"]/ancestor:: mat-card`)))
      .perform();
    browser
      .actions()
      .click()
      .perform();
    const EC = browser.ExpectedConditions;
    browser.wait(EC.presenceOf(element(by.css('.open'))), 5000, "Sidebar doesn't open");
  }

clickOpenSidebar() {
    browser
      .actions()
      .mouseMove(element(by.css('.entity-card.mat-card')))
      .perform();
    browser
      .actions()
      .click()
      .perform();
    const EC = protractor.ExpectedConditions;
    browser.wait(EC.visibilityOf(element.all(by.css('.mat-tab-link')).last()), 5000);
  }
}

it('should navigate through the images when using keystrokes', () => {
    browser.actions().sendKeys(protractor.Key.RIGHT).perform()
    expect(page.getImageInsideViewerIfActive(2).isPresent()).toBeTruthy()
  })

dragAndDropSelectedCountryLabelBubblesChart(x: number, y: number) {
    return browser.actions().dragAndDrop(this.selectedCountryLabel, {x: x, y: y}).perform();
  }

async clickTimestampPathSaveButton() {
    return await browser.actions().mouseMove(this.timestampPathSaveButton).click().perform();
  }

async mouseOverShim(elm: ElementFinder) {
    if (process.env.CURRENT_BROWSER === 'firefox' || process.env.CURRENT_BROWSER === 'ie' || process.env.CURRENT_BROWSER === 'safari') {
      const script = `if(document.createEvent) {
         var evObj = document.createEvent('MouseEvents');
         evObj.initEvent('mouseover', true, false);
         arguments[0].dispatchEvent(evObj);
       } else if (document.createEventObject) {
         arguments[0].fireEvent('onmouseover');
       }`;
      return browser.executeScript(script, elm.getWebElement());
    } else {
      return browser.actions()
        .mouseMove(elm.getWebElement())
        .perform();
    }
  }

getControlledElement(page.getInput(), list =>
        browser
          .actions()
          .mouseMove(getNthInList(list, 1))
          .perform(),
      );