How to use the protractor.by.id function in protractor

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

const tabLinks = element.all(by.css('li'));
        tabLinks.get(1).click();

        expect(element(by.id('exchangeName')).getAttribute('value')).toBe('Bitstamp');
        expect(element(by.id('adapterClass')).getAttribute('value')).toBe('com.gazbert.bxbot.exchanges.BitstampExchangeAdapter');
        expect(element(by.id('connectionTimeout')).getAttribute('value')).toBe('60');

        expect(element(by.id('errorCode_0')).getAttribute('value')).toBe('503');
        expect(element(by.id('errorCode_1')).getAttribute('value')).toBe('522');

        expect(element(by.id('errorMessage_0')).getAttribute('value')).toBe('Connection reset');
        expect(element(by.id('errorMessage_1')).getAttribute('value')).toBe('Connection refused');

        // Delete Error Code 1
        const deleteErrorCodeButton = element(by.id('deleteErrorCodeButton_0'));
        deleteErrorCodeButton.click();

        // Save and check the update worked
        const saveButton = element(by.id('exchangeSaveButton'));
        saveButton.click();
        dashboardItems.get(0).click();

        // Same as before
        expect(element(by.id('exchangeName')).getAttribute('value')).toBe('Bitstamp');
        expect(element(by.id('adapterClass')).getAttribute('value')).toBe('com.gazbert.bxbot.exchanges.BitstampExchangeAdapter');
        expect(element(by.id('connectionTimeout')).getAttribute('value')).toBe('60');

        // Original Error Code 2 (522) moved
        expect(element(by.id('errorCode_0')).getAttribute('value')).toBe('522');
        expect(element(by.id('errorCode_1')).isPresent()).toBe(false); // 503 gone

authToken: element(by.model('settings.sms.authToken')),
      number: element(by.model('settings.sms.fromNumber'))
    },
    email: {
      address: element(by.model('settings.email.fromAddress')),
      name: element(by.model('settings.email.fromName'))
    },
    button: element(by.id('communication_settings_save_button'))
  };
}

class MembersTab {
  constructor(private sfProjectSettingsPage: SfProjectSettingsPage) { }

  addButton = element(by.id('addMembersButton'));
  removeButton = element(by.id('remove-members-button'));
  messageButton = element(by.id('messageUsersButton'));
  listFilter = element(by.model('userFilter'));
  list = element.all(by.repeater('user in list.visibleUsers'));
  newMember = {
    input: element(by.model('term')),
    button: element(by.model('addMode')),
    warning: element(by.binding('warningText')),
    results: element(by.id('typeaheadDiv')).element(by.css('ul li'))
  };

  addNewMember(name: string) {
    this.sfProjectSettingsPage.tabs.members.click();
    this.addButton.click();
    browser.wait(ExpectedConditions.visibilityOf(this.newMember.input), this.sfProjectSettingsPage.conditionTimeout);
    this.newMember.input.sendKeys(name);
    browser.wait(ExpectedConditions.textToBePresentInElementValue(this.newMember.input, name),

import {by, element} from 'protractor';

export class PageHeader {
  myProjects = {
    button: element(by.id('myProjectDropdownButton')),
    links: element(by.id('myProjectDropdownMenu')).all(by.className('dropdown-item'))
  };

  loginButton = element(by.partialButtonText('Login'));

  language = {
    button: element(by.id('languageDropdownButton')),
    links: element(by.id('languageDropdownMenu')).all(by.className('dropdown-item')),
    findItem: (search: string) => this.language.links.filter(elem => elem.getText().then(text => text === search))
  };
}

describe('Comment e2e test', () => {

    const username = element(by.id('username'));
    const password = element(by.id('password'));
    const entityMenu = element(by.id('entity-menu'));
    const accountMenu = element(by.id('account-menu'));
    const login = element(by.id('login'));
    const logout = element(by.id('logout'));

    beforeAll(() => {
        browser.get('/');

        accountMenu.click();
        login.click();

        username.sendKeys('admin');
        password.sendKeys('admin');
        element(by.css('button[type=submit]')).click();
        browser.waitForAngular();
    });

    it('should load Comments', () => {

stepSourceTypeRadioButton(option: string) {
    return element(by.id(`step-source-type-${option}-radio`));
  }

descriptionHeader() {
    return element(by.id('NameHeader'));
  }

async clickActionButton(version): Promise {
        await BrowserActions.click(element(by.id(`adf-version-list-action-menu-button-${version}`)));
        await BrowserVisibility.waitUntilElementIsVisible(element(by.css('.cdk-overlay-container .mat-menu-content')));
    }

get jobStartedTimestamp() {
    return element(by.id("job-started-timestamp"));
  }