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

import { BrowserVisibility } from '../../core/utils/browser-visibility';
import { BrowserActions } from '../../core/utils/browser-actions';

export class EditTaskFilterCloudComponentPage {

    customiseFilter: ElementFinder = element(by.id('adf-edit-task-filter-title-id'));
    selectedOption: ElementFinder = element.all(by.css('mat-option[class*="mat-selected"]')).first();
    assignee: ElementFinder = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-assignee"]'));
    priority: ElementFinder = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-priority"]'));
    taskName: ElementFinder = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-taskName"]'));
    id: ElementFinder = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-taskId"]'));
    processDefinitionId: ElementFinder = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-processDefinitionId"]'));
    processInstanceId: ElementFinder = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-processInstanceId"]'));
    lastModifiedFrom: ElementFinder = element(by.css('input[placeholder="LastModifiedFrom"]'));
    lastModifiedTo: ElementFinder = element(by.css('input[placeholder="LastModifiedTo"]'));
    parentTaskId: ElementFinder = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-parentTaskId"]'));
    owner: ElementFinder = element(by.css('input[data-automation-id="adf-cloud-edit-task-property-owner"]'));
    saveButton: ElementFinder = element(by.css('[data-automation-id="adf-filter-action-save"]'));
    saveAsButton: ElementFinder = element(by.css('[data-automation-id="adf-filter-action-saveAs"]'));
    deleteButton: ElementFinder = element(by.css('[data-automation-id="adf-filter-action-delete"]'));
    filter: ElementFinder = element(by.css(`adf-cloud-edit-task-filter mat-expansion-panel-header`));

    editTaskFilterDialogPage = new EditTaskFilterDialogPage();

    editTaskFilterDialog(): EditTaskFilterDialogPage {
        return this.editTaskFilterDialogPage;
    }

    async isFilterDisplayed(): Promise {
        return BrowserVisibility.waitUntilElementIsVisible(this.filter);
    }

async importItem(itemType: string, filePath: string) {
        const menuImport = element(by.css('[data-automation-id="app-navigation-upload"]'));
        await BrowserActions.click(menuImport);

        const modelInput = element(by.css(`[data-automation-id="app-navigation-upload-${itemType}"] input`));
        await super.sendKeysIfPresent(modelInput, filePath);
    }

private getAllErrorMessages(): ElementArrayFinder {
    return element.all(by.css('.error-group'));
  }

async isApplicationListLoaded(): Promise {
        const emptyList = element(by.css(`[data-automation-id='adf-cloud-edit-process-property-appName'] .mat-select-placeholder`));
        return BrowserVisibility.waitUntilElementIsNotVisible(emptyList);
    }

it('should display message saying App works !', () => {
    page.navigateTo('/');
    expect(element(by.css('app-home h1')).getText()).toMatch('App works !');
  });
});

it('should support "spy counter"', async () => {
    let updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update'));
    let resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
    let textEle = element(by.css('counter-parent app-counter > div'));
    let logEles = element.all(by.css('counter-parent h4 ~ div'));

    expect(textEle.getText()).toContain('Counter = 0');
    expect(logEles.count()).toBe(2, 'should start with two log entries');

    await updateCounterButtonEle.click();
    expect(textEle.getText()).toContain('Counter = 1');
    expect(logEles.count()).toBe(3, 'should now have 3 log entries');

    await resetCounterButtonEle.click();
    expect(textEle.getText()).toContain('Counter = 0');
    expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init');
  });
});

async getDashGroupValues(name: string) {
      let dashScore = await element(by.css('[data-name="' + name + '"] .dash-score')).getText();
      let groupName = await element(by.css('[data-name="' + name + '"] .text-light.severity-padding .title')).getText();
      let title = await element(by.css('[data-name="' + name + '"] .text-light.two-line .text-dark')).getText();
      let count = await element(by.css('[data-name="' + name + '"] .text-light.two-line .title')).getText();

      return Promise.all([dashScore, groupName, title, count]);
  }

export async function createGroup(name: string) {
        await element(by.css('.list-controls button.regular.default')).click();
        await element(by.css('mesh-group-detail input')).sendKeys(name);
        await element(by.css('mesh-content-portal button')).click();
    }

getPropertyPrimaryKey(property: ElementFinder) {
    return property.element(by.css('app-entity-editor table.properties > tbody .fa-key'));
  }

* See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { element, by, ElementFinder } from 'protractor';
import { BrowserVisibility, FormControllersPage, BrowserActions } from '@alfresco/adf-testing';
import moment = require('moment');

export class ShareDialog {

    formControllersPage = new FormControllersPage();
    shareDialog: ElementFinder = element(by.css('adf-share-dialog'));
    dialogTitle: ElementFinder = element(by.css('[data-automation-id="adf-share-dialog-title"]'));
    shareToggle: ElementFinder = element(by.css('[data-automation-id="adf-share-toggle"] label'));
    shareToggleChecked: ElementFinder = element(by.css('mat-dialog-container mat-slide-toggle.mat-checked'));
    shareLink: ElementFinder = element(by.css('[data-automation-id="adf-share-link"]'));
    closeButton: ElementFinder = element(by.css('button[data-automation-id="adf-share-dialog-close"]'));
    copySharedLinkButton: ElementFinder = element(by.css('.adf-input-action'));
    timeDatePickerButton: ElementFinder = element(by.css('mat-datetimepicker-toggle button'));
    dayPicker: ElementFinder = element(by.css('mat-datetimepicker-month-view'));
    clockPicker: ElementFinder = element(by.css('mat-datetimepicker-clock'));
    hoursPicker: ElementFinder = element(by.css('.mat-datetimepicker-clock-hours'));
    minutePicker: ElementFinder = element(by.css('.mat-datetimepicker-clock-minutes'));
    expirationDateInput: ElementFinder = element(by.css('input[formcontrolname="time"]'));
    confirmationDialog: ElementFinder = element(by.css('adf-confirm-dialog'));
    confirmationCancelButton: ElementFinder = element(by.id('adf-confirm-cancel'));
    confirmationRemoveButton: ElementFinder = element(by.id('adf-confirm-accept'));

    async checkDialogIsDisplayed(): Promise {
        await BrowserVisibility.waitUntilElementIsVisible(this.dialogTitle);
    }