How to use the protractor.$ function in protractor

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}"]`));
};

export const useCloudInit = $('#use-cloud-init');
export const useCustomScript = $('#use-cloud-init-custom-script');
export const customCloudInitScript = $('#cloud-init-custom-script');
export const cloudInitHostname = $('#cloud-init-hostname');
export const cloudInitSSH = $('#cloud-init-ssh');

// Networking tab
export const createNIC = $('#create-network-btn');
export const pxeNICDropdownId = '#pxe-nic-dropdown';

// Storage tab
export const attachDisk = $('#attach-disk-btn');
export const createDisk = $('#create-storage-btn');

// Result tab
export const errorMessage = $('.kubevirt-create-vm-wizard__result-tab-row--error');

// Tables
export const tableRows = $$('.kubevirt-editable-table tbody tr');
export const tableRowsCount = () => tableRows.count();
export const activateTableRow = (rowNumber: number) =>
  $$('.kubevirt-editable-table tbody tr')
    .get(rowNumber)
    .click();
export const tableElementID = (type: string, rowNumber: string) => `#${type}-edit-${rowNumber}-row`;

/**
 * Sets an attribute of a disk (name, size) on a given row.
 * @param  {number}    rowNumber     Number of row to select, indexed from 1 for the first row.
 * @param  {string}    attribute     Attribute name - size or name.
 * @param  {string}    value         Value to set.
 * @throws {Error}                   Will throw an Error when input for selected attribute doesn't exist.

import { $, $$ } from 'protractor';
import { selectDropdownOption } from '@console/shared/src/test-utils/utils';
import { fillInput } from '../tests/utils/utils';

// Wizard Common
export const closeWizard = $('.modal-footer > button.btn-cancel');
export const wizardContent = $('.wizard-pf-contents');
export const wizardHeader = $('.modal-header');
export const provisionResultIcon = wizardContent.$('.pficon-ok');
export const nextButton = $('.modal-footer > button.btn-primary');
export const apply = $('.inline-edit-buttons > button:first-child');
export const cancelButton = $('.inline-edit-buttons > button:last-child');
export const wizardHelpBlock = $('.modal-body .help-block');
// Basic Settings tab
export const createWithWizardLink = $('#wizard-link');
export const createWithYAMLLink = $('#yaml-link');

export const nameInput = $('#vm-name');
export const descriptionInput = $('#vm-description');

const provisionSourceURL = $('#provision-source-url');
const provisionSourceContainerImage = $('#provision-source-container');
export const provisionSources = {
  URL: provisionSourceURL,
  Container: provisionSourceContainerImage,
};

export const namespaceDropdownId = '#namespace-dropdown';
export const provisionSourceDropdownId = '#image-source-type-dropdown';

// When the member is already in the policy, you'll get an error
            $('app-policy-add-members chef-modal chef-form-field input').clear();
            $('app-policy-add-members chef-modal chef-form-field input')
              .sendKeys('team:local:testteam');
            expect($('app-policy-add-members chef-modal chef-button:first-child')
              .getAttribute('disabled')).toBeNull();
            $('app-policy-add-members chef-modal chef-button:first-child').click();
            expect($('app-policy-add-members chef-form-field .errors chef-error').getText())
              .toBe('Member already in policy.');

            // When the member is already in the table, you'll get an error
            $('app-policy-add-members chef-modal chef-form-field input').clear();
            $('app-policy-add-members chef-modal chef-form-field input').sendKeys('team:local:admins');
            expect($('app-policy-add-members chef-modal chef-button:first-child')
              .getAttribute('disabled')).toBeNull();
            $('app-policy-add-members chef-modal chef-button:first-child').click();
            expect($('app-policy-add-members chef-form-field .errors chef-error').getText())
              .toBe('Member expression already in table.');

            // Type a valid expression and submit
            $('app-policy-add-members chef-modal chef-form-field input').clear();
            $('app-policy-add-members chef-modal chef-form-field input').sendKeys('user:ldap:*');
            expect($('app-policy-add-members chef-modal chef-button:first-child')
              .getAttribute('disabled')).toBeNull();
            $('app-policy-add-members chef-modal chef-button:first-child').click();

            // Add members button should be enabled and should be added to table in sorted way
            expect($('#right-buttons chef-button:first-child').getText()).toBe('Add Member');

            expect($('chef-table-new chef-table-body chef-table-row:nth-child(1) chef-table-cell:nth-child(2) a').getText())
              .toBe('admin');
            expect($('chef-table-new chef-table-row:nth-child(1) chef-table-cell:nth-child(3)')

browser.wait(Helper.EC.visibilityOf($('.modal-title.float-left')), 10000).then(() => {
      browser.wait(Helper.EC.visibilityOf($('.custom-control-label')), 5000);
      $('.custom-control-label').click();
      element(by.cssContainingText('button', 'Delete bucket'))
        .click()
        .then(() => {
          this.navigateTo();
          browser.wait(Helper.EC.not(Helper.EC.presenceOf(this.getTableCell(name))), 10000);
        });
    });
  }

it('getItem()', async () => {

    const data = await $('#get-item').getText();

    expect(data).toBe('hello world');

  });

it('stays logged in when returning to the app', (done) => {
    browser.get('http://www.google.com');
    let googleSearchInput = $('input.gsfi')
    browser.wait(ec.presenceOf(googleSearchInput));
    browser.get('/');
    browser.wait(ec.presenceOf(page.loginMenuButton));

    expect(page.confirmUserLoggedIn(done)).toBeTruthy();
  });

'buttonSimpleDemo': $('demo-tooltip-basic>.btn.btn-primary'),
  'tooltipElement': $('bs-tooltip-container'),
  'buttonFourDirectionsLeft': $('demo-tooltip-four-directions>button:nth-of-type(1)'),
  'buttonFourDirectionsTop': $('demo-tooltip-four-directions>button:nth-of-type(2)'),
  'buttonFourDirectionsBottom': $('demo-tooltip-four-directions>button:nth-of-type(3)'),
  'buttonFourDirectionsRight': $('demo-tooltip-four-directions>button:nth-of-type(4)'),
  'buttonDismissible': $('demo-tooltip-dismiss>button'),
  'buttonSimpleBinding': $('demo-tooltip-dynamic>button:nth-of-type(1)'),
  'buttonTemplateRefBinding': $('demo-tooltip-dynamic>button:nth-of-type(2)'),
  'buttonDynamicHTML': $('demo-tooltip-dynamic-html>button'),
  'buttonDefaultTooltip': $('.card-block.panel-body>.btn.btn-danger'),
  'buttonAppendedToBody': $('.card-block.panel-body>button:last-child'),
  'buttonPreconfiguredTooltip': $('demo-tooltip-config>button:first-child'),
  'buttonCustomTriggers': $('demo-tooltip-triggers-custom'),
  'buttonManualTriggeringShow': $('demo-tooltip-triggers-manual>button:nth-of-type(1)'),
  'buttonManualTriggeringHide': $('demo-tooltip-triggers-manual>button:nth-of-type(2)'),
  'buttonComponentLevelStyling': $('demo-tooltip-styling-local>button')
};
export let typeheadEl = {
  'usageLink': $('.item>ul>li:nth-of-type(3)>a'),
  'inputStatic': $('.section.bd-example>demo-typeahead-static>input'),
  'modelStatic': $('.section.bd-example>demo-typeahead-static>pre:nth-of-type(1)'),
  'inputTemplate': $('demo-typeahead-item-template>input'),
  'modelTemplate': $('demo-typeahead-item-template>pre:nth-of-type(1)'),
  'inputOption': $('demo-typeahead-field>input'),
  'modelOption': $('demo-typeahead-field>pre:nth-of-type(1)'),
  'inputAsynchronous': $('demo-typeahead-async>input'),
  'modelAsynchronous': $('demo-typeahead-async>pre:nth-of-type(1)'),
  'inputReactiveForms': $('input[formcontrolname="state"]'),
  'modelReactiveForms': $('demo-typeahead-forms>pre:nth-of-type(1)'),
  'inputGroupingResults': $('demo-typeahead-grouping>input'),
  'modelGroupingResults': $('demo-typeahead-grouping>pre:nth-of-type(1)'),

header: '.adf-info-drawer-layout-header',
    content: '.adf-info-drawer-layout-content',

    tabs: '.adf-info-drawer-tabs',
    tabLabel: '.mat-tab-label-content',
    tabActiveLabel: '.mat-tab-label-active',

    activeTabContent: '.mat-tab-body-active .mat-tab-body-content adf-dynamic-tab',
    next: '.mat-tab-header-pagination-after .mat-tab-header-pagination-chevron',
    previous: '.mat-tab-header-pagination-before .mat-tab-header-pagination-chevron',

    headerTitle: '.adf-info-drawer-layout-header-title'
  };

  commentsTab = new CommentsTab($(InfoDrawer.selectors.root));
  aboutTab = new LibraryMetadata($(InfoDrawer.selectors.root));
  propertiesTab = new ContentMetadata($(InfoDrawer.selectors.root));

  header: ElementFinder = this.component.element(by.css(InfoDrawer.selectors.header));
  headerTitle: ElementFinder = this.component.element(by.css(InfoDrawer.selectors.headerTitle));
  tabLabel: ElementFinder = this.component.element(by.css(InfoDrawer.selectors.tabLabel));
  tabLabelsList: ElementArrayFinder = this.component.all(by.css(InfoDrawer.selectors.tabLabel));
  tabActiveLabel: ElementFinder = this.component.element(by.css(InfoDrawer.selectors.tabActiveLabel));

  tabActiveContent: ElementFinder = this.component.element(by.css(InfoDrawer.selectors.activeTabContent));

  nextButton: ElementFinder = this.component.element(by.css(InfoDrawer.selectors.next));
  previousButton: ElementFinder = this.component.element(by.css(InfoDrawer.selectors.previous));


  constructor(ancestor?: ElementFinder) {

      element: (): ElementFinder => $('tooltip-demo>p:nth-child(6)'),
      actualResult: 'Programatically show/hide tooltip Check me out! Show tooltip Hide tooltip'