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

/* 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();

public childLineageHeaderLabel = this.childLineageSection.element(by.className('header-label'));
  public childLineageSectionColumns = this.childLineageSection.element(by.className('sub-toolbar'));
  public childLineageRepeater = this.childLineageSection.all(by.repeater('bData in content'));
  public noChildrenLabel = this.childLineageSection.element(by.className('unavailable-label'));

  // parent
  public parentLineageSection = element.all(by.className('content-wrapper')).get(2);
  public parentLineageHeaderLabel = this.parentLineageSection.element(by.className('header-label'));
  public parentLineageSectionColumns = this.parentLineageSection.element(by.className('sub-toolbar'));
  public parentLineageRepeater = this.parentLineageSection.all(by.repeater('bData in content'));
  public noParentsLabel = this.parentLineageSection.element(by.className('unavailable-label'));

  // status history and files
  public statusHistorySection = element.all(by.className('content-wrapper')).get(3);
  public statusHistorySectionLabel = this.statusHistorySection.element(by.className('header-label'));
  public statusHistorySectionColumns = this.statusHistorySection.element(by.className('sub-toolbar'));

  // TODO needs to be updated to new tests...
  public statusHistoryRepeater = this.statusHistorySection.all(
    by.repeater('businessObjectDataStatusChangeEvent in vm.businessObjectData.businessObjectDataStatusHistory')
  );

  public storageUnitsSection = element(by.tagName('sd-storage-units'));
  public storageUnitsSectionLabel = this.storageUnitsSection.element(by.className('sub-header-label'));
  public storageUnitsRepeater = this.storageUnitsSection.all(by.className('storage-loop'));


  public getLineageRowData(lineageRepeater, index) {
    const row = lineageRepeater.get(index);
    const cell = row.all(by.tagName('elipsis-overflow'));
    return {
      namespace: cell.get(0),

public schemaInfoTitle = element(by.css('.sub-header'));

  // partition selectors
  public partitionInfoContainer = element(by.css('.partition-details-container'));
  public partitionInfoHeaderLabel = this.partitionInfoContainer.element(by.className('sub-header-label'));
  public keyLabel = this.partitionInfoContainer.element(by.className('details-label'));
  public valueLabel = this.partitionInfoContainer.element(by.className('details-label'));

  public partitions = this.partitionInfoContainer.all(by.css('.partition-value'));
  public partitionValueContainer = this.partitionInfoContainer.all(by.css('.partition-value')).get(0);
  public subPartitionValueContainer = this.partitionInfoContainer.all(by.css('.partition-value')).get(1);
  public subPartitionValue = this.subPartitionValueContainer.all(by.css('.col-6'));

  public partitionKey = this.partitionValueContainer.all(by.className('col-6'));
  public subPartitionKeys = this.partitionValueContainer.all(by.className('col-6'));
  public partitionValue = this.subPartitionValueContainer.element(by.className('col-6'));
  public subPartitionValues = this.subPartitionValueContainer.all(by.className('col-6'));

  // detail selectors
  public detailsContainer = this.partitionInfoContainer.element(by.css('.offset-1'));
  public detailsHeaderLabel = by.className('sub-header-label');
  public detailsLabels = this.detailsContainer.element(by.className('details-label'));
  public status = this.detailsContainer.element(by.className('status'));
  public id = this.detailsContainer.element(by.className('id'));

  public attributesContainer = element.all(by.className('content-wrapper')).get(0);
  public attributesEmptyMessageLabel = this.attributesContainer.element(by.className('unavailable-label'));
  public userDefAttributesTableRows = element.all(by.css('.columns-detail > .list-group-item'));

  // child
  public childLineageSection = element.all(by.className('content-wrapper')).get(1);
  public childLineageHeaderLabel = this.childLineageSection.element(by.className('header-label'));

async findFormatFrame(usage: string, fileType: string, version: string, hasAccess: boolean = true): Promise {
    // read auth formats
    const readAuthWrapper = element(by.css('.bdef-formats > div:nth-of-type(2)'));
    if (hasAccess) {
      // make sure the base element is not shown for browsers
      // that don't support isDisplayedProperly
      if (await this.isDisplayedShim(readAuthWrapper)) {
        const whiteFrames = readAuthWrapper.all(by.className('format-whiteframe'))
          .filter((element, i) => {
            return this.isDisplayedShim(element) as any; // converted to allow the promise from protractor to be treat as a native promise
          });

        const usages = whiteFrames.all(
          by.cssContainingText('div:nth-child(1) > div:nth-child(2) > div:nth-child(1)', usage)
        );

        const fileTypes = usages.all(by.xpath('following-sibling::span')).filter((element) => {
          return element.getText().then((text) => {
            return text.includes(fileType);
          });
        });

        const versionField = await fileTypes.all(by.xpath('following-sibling::span')).filter((element) => {
          return element.getText().then((text) => {

static get surveyCloseButton() {
        return element(by.className('smcx-modal-close'));
    }

it('should show', async () => {
    const button = element(by.className('custom-control'));
    await browser.wait(EC.presenceOf(button), 4000);
    expect(button.getText()).toBe('Hello');
  });

waitForToast() {
    return browser
      .wait(until.elementLocated(by.className('ngx-toastr')), 500, 'not found')
      .then((el) => {
        return browser.wait(until.elementIsVisible(el), 5000, 'not found');
      });
  }
  waitForToastDisappear(timeout) {

clickYesForConfirmation() {
    let okButton = element(by.css('.metron-dialog')).element(by.buttonText('OK'));
    let maskElement = element(by.className('modal-backdrop'));
    return waitForElementVisibility(maskElement)
    .then(() => okButton.click())
    .then(() => waitForElementInVisibility(maskElement));
  }

*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {by, element, ElementArrayFinder, ElementFinder} from 'protractor';
import {BasePo} from '../../base/base.po';
import {RegistrationDateRangeFilter} from '@herd/angular-client';

export class DataObjectListPage extends BasePo {
    emptyMessage: ElementFinder = element(by.css('.ui-datatable-emptymessage'));
    mainHeader: ElementFinder = element(by.className('main-header'));
    subHeader: ElementFinder = element(by.className('sub-header'));

    dataEntitySubHeader: ElementFinder = this.subHeader.all(by.tagName('span')).first();
    dataEntitySubHeaderLink: ElementFinder = this.dataEntitySubHeader.element(by.tagName('a'));
    formatSubHeader: ElementFinder = this.subHeader.all(by.tagName('span')).get(1);
    formatSubHeaderLink: ElementFinder = this.formatSubHeader.element(by.tagName('a'));

    filtersSection: ElementFinder = element(by.className('data-object-list-filters'));

    addFilterButton: ElementFinder = this.filtersSection.element(by.className('dropdown-toggle'));
    addFilterMenu: ElementFinder = element(by.className('dropdown-menu'));
    addFilterMenuItems: ElementArrayFinder = this.addFilterMenu.all(by.className('dropdown-item'));

    filters: ElementArrayFinder = this.filtersSection.all(by.css('.filters > div'));

    dataTable: ElementFinder = element(by.tagName('p-datatable'));

import { LoginPage } from "../login/login.page";
import { EC } from "../shared/expected-conditions";
import { element, by, browser } from "protractor";

export class NavigationPage {
    public login: LoginPage = new LoginPage();

    public dashboardItem = element(by.className('dashboards'));
    public customerdItem = element(by.className('customers'));
    public sidebarDirective = element(by.tagName('sidebar'));
    public logo = element(by.id('logo'));

    public dashboard = element(by.tagName('dashboard'));
    public customers = element(by.tagName('customers'));

    get() {
        browser.get(browser.baseUrl + '/');
    }

    getTitle() {
        return browser.getTitle();
    }

    hasClass(element, cls) {