How to use protractor - 10 common examples

uiElementName: string,
  newValue: string,
) {
  /* Note on the use of the SendKeys Protractor function: There is a widely reported
     bug in SendKeys where the function randomly drops characters. Most of the
     workarounds for this bug involve sending individual characters one-by-one,
     separated by calls to browser.sleep() or calls to Browser.executeScript
     to bypass the Protractor API. In our testing, we found neither of these approaches
     to be acceptable as we do not want to introduce sleep statements and calls to
     Browser.executeScript failed to retain values in text fields when buttons are
     subsequently pressed. We also found that the element.clear() function failed to
     clear text from text fields and that clearing text fields by sending a control/a
     sequence encountered the bug where characters are dropped by SendKeys. After
     experimentation, we found what *seems* to avoid most instances of characters being
     dropped by adding both "before" and "after" text in SendKeys calls. */
  await browser.wait(until.elementToBeClickable(uiElement));
  await uiElement.click();
  await uiElement.sendKeys('text was', Key.chord(Key.CONTROL, 'a'), newValue);

  uiElement.getAttribute('value').then(async function(insertedValue) {
    if (insertedValue !== newValue) {
      console.info('sendKeys failed for ', uiElementName, ' - retry', insertedValue, newValue);
      await uiElement.sendKeys('text was', Key.chord(Key.CONTROL, 'a'), newValue);

      // eslint-disable-next-line promise/no-nesting
      uiElement.getAttribute('value').then(async function(insertedValue2) {
        if (insertedValue2 !== newValue) {
          console.info(
            'sendKeys failed for ',
            uiElementName,
            ' - second retry',
            insertedValue2,

expect(results.length).toBeGreaterThan(1);
        const projectId = results[1];
        UserManagementPage.get(projectId);
      });

      browser.wait(ExpectedConditions.visibilityOf(this.userManagementPage.addMembersBtn), Utils.conditionTimeout);
      this.userManagementPage.addMembersBtn.click();
      browser.wait(ExpectedConditions.visibilityOf(this.userManagementPage.userNameInput), Utils.conditionTimeout);
      this.userManagementPage.userNameInput.sendKeys(usersName);

      this.utils.findRowByText(this.userManagementPage.typeaheadItems, usersName).then((item: any) => {
        item.click();
      });

      // This should be unique no matter what
      this.userManagementPage.newMembersDiv.element(by.id('addUserButton')).click();

      // Now set the user to member or manager, as needed
      let foundUserRow: any;
      this.userManagementPage.projectMemberRows.map((row: any) => {
        const nameColumn = row.element(by.binding('user.username'));
        nameColumn.getText().then((text: string) => {
          if (text === usersName) {
            foundUserRow = row;
          }
        });
      }).then(() => {
        if (foundUserRow) {
          const select = foundUserRow.element(by.css('select'));
          Utils.clickDropdownByValue(select, roleText);
        }
      });

export function waitForTextToBe(
    target: ElementFinder | Locator | string,
    value: string,
    timeout: number = DEFAULT_TIMEOUT
): webdriver.promise.Promise {
    const e: ElementFinder = getElementFinder(target);

    // Don't use EC.textToBePresentInElement because it doesn't return a promise which we can catch
    return browser.wait(
        () => {
            return waitToBeDisplayed(e, timeout)
                .then(() => {
                    return getElementFinder(target).getText();
                })
                .then((text: string) => text === value, () => false);
        },
        timeout,
        `Error waiting for text in ${e.locator()} to be ${value}`
    );
}

it('can add a new user as a member', () => {
      expect(projectSettingsPage.membersTab.list.count()).toBe(memberCount);
      projectSettingsPage.membersTab.addButton.click();
      browser.wait(ExpectedConditions.visibilityOf(projectSettingsPage.membersTab.newMember.input),
        Utils.conditionTimeout);
      projectSettingsPage.membersTab.newMember.input.sendKeys('du');

      // sendKeys is split to force correct button behaviour. IJH 2015-10
      projectSettingsPage.membersTab.newMember.input.sendKeys('de');
      projectSettingsPage.membersTab.newMember.button.click();
      projectSettingsPage.membersTab.waitForNewUserToLoad(memberCount);
      expect(projectSettingsPage.membersTab.list.count()).toBe(memberCount + 1);
    });

this.vote(index, 1);
  }

  votes(index: number) {
    return this.list.get(index).element(by.css('.vote > span'));
  }
}

class Comments {
  sfQuestionPage: any;

  constructor(sfQuestionPage: any) {
    this.sfQuestionPage = sfQuestionPage;
  }

  list = element.all(by.repeater('comment in answer.comments'));

  // Return the handle to the last comment in the list
  last() {
    return this.list.last();
  }

  // Add a comment to the last (most recent) Answer on the page
  addToLastAnswer(comment: any) {
    const addCommentCtrl = this.sfQuestionPage.answers.last().element(by.css('.comments'))
      .element(by.css('a.addCommentLink'));
    const commentField = this.sfQuestionPage.answers.last().element(by.model('newComment.content'));
    const submit = this.sfQuestionPage.answers.last().element(by.css('.save-new-comment'));

    // Click "add comment" at the end of the Answers list to un-collapse the comment text area.
    addCommentCtrl.click();
    browser.wait(ExpectedConditions.visibilityOf(commentField), Utils.conditionTimeout);

export const selectKebabOption = async (name: string, option: string) => {
  await browser.wait(until.presenceOf(kebabForName(name)));
  await click(kebabForName(name)); // open kebab dropdown
  await click($(`[data-test-action="${option}"]`));
};

waitForApplicationPage() {
    // return browser.wait(until.presenceOf(element(by.tagName('app-application-wall'))), 5000);
    return browser.wait(until.presenceOf(element(by.tagName('app-dashboard-base'))), 5000);
  }

onComplete: async () => {
    const consoleLogStream = createWriteStream(`${screenshotsDir}/browser.log`, { flags: 'a' });
    browserLogs.forEach((log) => {
      const { level, message } = log;
      const messageStr = _.isArray(message) ? message.join(' ') : message;
      consoleLogStream.write(`${format.apply(null, [`[${level.name}]`, messageStr])}\n`);
    });

    const url = await browser.getCurrentUrl();
    console.log('Last browser URL: ', url);

    // Use projects if OpenShift so non-admin users can run tests. We need the fully-qualified name
    // since we're using kubectl instead of oc.
    const resource =
      browser.params.openshift === 'true' ? 'projects.project.openshift.io' : 'namespaces';
    await browser.close();
    execSync(
      `if kubectl get ${resource} ${testName} 2> /dev/null; then kubectl delete ${resource} ${testName}; fi`,
    );
  },
  afterLaunch: (exitCode) => {

/* eslint-disable no-console, promise/catch-or-return */
import { browser, ExpectedConditions as until, by, element, Key } from 'protractor';

export const addNavigate = element(by.css('[data-test-id="+Add-header"]'));
export const gitImportButton = element(by.css('[data-test-id="import-from-git"]'));
export const gitRepoUrl = element(by.id('form-input-git-url-field'));

export const applicationNameField = element(by.id('form-input-application-name-field'));

export const applicationSelector = element(by.id('form-dropdown-application-name-field'));
export const applicationDropdown = element(
  by.className('dropdown-menu__autocomplete-filter pf-c-dropdown__menu dropdown-menu--text-wrap'),
);

export const createApplication = element(by.id('#CREATE_APPLICATION_KEY#-link'));
export const applicationName = element(by.css('[data-test-id="application-form-app-input"]'));
export const appName = element(by.css('[data-test-id="application-form-app-name"]'));

export const builderImage = element(
  by.cssContainingText('.pf-c-card.odc-builder-image-card', 'Node.js'),
);
export const buildImageVersion = element(by.id('form-dropdown-image-tag-field'));
export const createButton = element(by.css('[data-test-id="import-git-create-button"]'));
export const builderImageVersionName = element(by.id('8-RHOAR-link'));

export const navigateImportFromGit = async function() {
  await browser.wait(until.elementToBeClickable(addNavigate), 5000);
  await addNavigate.click();

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);
  });
});