How to use the ember-cli-page-object.attribute function in ember-cli-page-object

create,
  visitable,
  clickable,
  collection,
  text,
  fillable,
  triggerable,
  hasClass
} from 'ember-cli-page-object';

let repositoryObject = {
  name: text('.tile h2.tile-title span.label-align'),

  duration: {
    scope: '.duration',
    title: attribute('title'),
  },

  finished: {
    scope: '.finished_at',
    title: attribute('title'),
  }
};

export default create({
  visit: visitable('/'),
  repoTitle: text('.repo-header .repo-title h1'),
  clickSidebarMyReposTab: clickable('#tab_owned a'),
  clickSidebarRunningTab: clickable('#tab_running a'),
  runningTabIsActive: hasClass('active', '#tab_running'),
  myReposTabIsActive: hasClass('active', '#tab_owned'),
  navigateToProfilePage: clickable('#profile-page-link'),

text,
} from 'ember-cli-page-object';
import { definition as Poll } from 'croodle/tests/pages/poll';
import { defaultsForApplication } from 'croodle/tests/pages/defaults';
import { assign } from '@ember/polyfills';

export default create(assign({}, defaultsForApplication, Poll, {
  options: collection('[data-test-table-of="participants"] thead tr:last-child th:not(:first-child)', {
    label: text(''),
  }),
  preferedOptions: text('.best-options .best-option-value', { multiple: true }),
  participants: collection('[data-test-table-of="participants"] [data-test-participant]', {
    name: text('[data-test-value-for="name"]'),
    selections: collection('[data-test-is-selection-cell]', {
      answer: text(''),
      option: attribute('data-test-value-for', ''),
    }),
  }),
}));

},

  /*
   * Use only when group-value is shown in the separated row!
   */
  getRowsFromGroupRow(groupIndex) {
    const {first, last} = this.getRowsIndexesFromGroupRow(groupIndex);
    return this.rows.toArray().slice(first, last);
  },

  /**
   * Use only when group-value is shown in the separated column!
   */
  groupingRowsByColumn: collection('tbody td.grouping-cell', {
    content: text(),
    rowspan: attribute('rowspan'),
    toggleGroup: clickable('a'),
    toggleSelection: clickable('.toggle-selection-group'),
    toggleExpands: clickable('.toggle-expands-group'),
    toggleText: text('a'),
    expandedCountText: text('.expanded-count'),
    selectedCountText: text('.selected-count')
  }),

  getIndexOfFirstRowGroupedByColumn(groupIndex) {
    let index = 0;
    let groupedCount = 0;
    this.allRows.forEach((row, i) => {
      if (row.isGroupingRow) {
        groupedCount++;
      }
      if (groupedCount === groupIndex) {

hasClass,
  isVisible,
  text
} from 'ember-cli-page-object';

export default {
  scope: '.user-menu',

  clickDropdownMenu: clickable('.dropdown-menu'),

  dropdownIsHidden: hasClass('menu-hidden'),

  icon: {
    scope: 'img',
    alt: attribute('alt'),
    src: attribute('src')
  },
  iconVisible: isVisible('img'),
  loginLinkVisible: isVisible('a.login'),
  logoutLinkVisible: isVisible('a.logout'),
  profileLinkVisible: isVisible('a.profile'),
  sluggedRouteLinkVisible: isVisible('a.slugged-route'),

  footerText: text('.dropdown__footer'),

  logOut: clickable('a.logout'),
  open: clickable('a'),
  toggle: clickable('a.user-menu__toggle'),

  profileLink: {
    scope: 'a.slugged-route',
    href: attribute('href')

function existingRepositoriesCollection(scope) {
  return collection(`${scope} li.profile-repolist-item`, {
    name: text('a.profile-repo'),
    isActive: hasClass('active', '.switch'),
    isMigrated: isPresent('a.already-migrated'),
    isDisabled: hasClass('non-admin', 'a.profile-repo'),
    toggle: clickable('.switch'),
    ariaChecked: attribute('aria-checked', '.switch'),
    role: attribute('role', '.switch')
  });
}

text: text(''),
    selectPageNumberExists: exists('select'),
    selectPageNumber: fillable('select'),
    selectPageNumberDisabled: property('disabled', 'select'),
    selectedPageNumber: value('select'),
    goToLastPage: clickable('button:eq(3)'),
    goToLastPageDisabled: hasClass('disabled', 'button:eq(3)'),
    goToNextPage: clickable('button:eq(2)'),
    goToNextPageDisabled: hasClass('disabled', 'button:eq(2)'),
    goToPrevPage: clickable('button:eq(1)'),
    goToPrevPageDisabled: hasClass('disabled', 'button:eq(1)'),
    goToFirstPage: clickable('button:eq(0)'),
    goToFirstPageDisabled: hasClass('disabled', 'button:eq(0)'),
    navigationButtons: text('button', {multiple: true}),
    btns: collection('button', {
      icon: attribute('class', 'i')
    }),
    disabledNavigationLinksCount: count('button.disabled')
  },
  numericNavigation: collection('.table-nav button', {
    label: text()
  }),
  allRows: collection('tbody tr:not(.expand-row)', {
    isGroupingRow: getter(function () {
      return !!this.cells.toArray().find(c => c.isGroupingRowCell);
    }),
    cells: collection('td', {
      isGroupingRowCell: hasClass('grouping-cell')
    })
  }),
  rows: collection('tbody tr:not(.expand-row):not(.grouping-row)', {
    expand: clickable('button.expand-row'),

scope: 'svg',

    hasClass,

    isSolidBlack: hasClass('solid-black'),
    isSolidBlue: hasClass('solid-blue'),
    isSolidDarkBlue: hasClass('solid-dark-blue'),
    isSolidGreen: hasClass('solid-green'),
    isSolidLightGray: hasClass('solid-light-gray'),
    isSolidPurple: hasClass('solid-purple'),
    isSolidRed: hasClass('solid-red'),
    isSolidWhite: hasClass('solid-white'),

    use: {
      scope: 'use',
      xlinkHref: attribute('xlink:href')
    }
  }
};

},

  allowConfigImports: {
    scope: 'section.settings-section .allow_config_imports.switch',

    exists: isVisible(),
    isActive: hasClass('active'),
    toggle: clickable()
  },

  buildPushes: {
    scope: 'section.settings-section .build_pushes.switch',

    isActive: hasClass('active'),
    toggle: clickable(),
    ariaChecked: attribute('aria-checked'),
    role: attribute('role')
  },

  limitConcurrentBuilds: {
    scope: 'section.settings-section .limit-concurrent-builds',

    isActive: hasClass('active', '.switch'),
    value: value('input'),
    fill: fillable('input'),
    toggle: clickable('.switch')
  },

  buildPullRequests: {
    scope: 'section.settings-section .build_pull_requests.switch',

    isActive: hasClass('active'),

save: clickable('.done'),
    cancel: clickable('.cancel'),
  },
  manager: {
    scope: '.learningmaterial-manager',
    name: {
      scope: '.displayname input'
    },
    nameValue: text('.displayname span'),
    author: text('.originalauthor'),
    description: text('.description'),
    copyrightPermission: text('.copyrightpermission'),
    copyrightRationale: text('.copyrightrationale'),
    uploadDate: text('.upload-date'),
    downloadText: text('.downloadurl a'),
    downloadUrl: attribute('href', '.downloadurl a'),
    link: text('.link a'),
    citation: text('.citation'),
    hasCopyrightPermission: isVisible('.copyrightpermission'),
    hasCopyrightRationale: isVisible('.copyrightrationale'),
    hasLink: isVisible('.link'),
    hasCitation: isVisible('.citation'),
    hasFile: isVisible('.downloadurl'),
    required: clickable('.required .switch-handle'),
    publicNotes: clickable('.publicnotes .switch-handle'),
    status: fillable('select', { at: 0 }),
    statusValue: value('select', { at: 0 }),
    notes: fillInFroalaEditor('.fr-box'),
    notesValue: froalaEditorValue('.fr-box'),
    addStartDate: clickable('[data-test-add-start-date]'),
    addEndDate: clickable('[data-test-add-end-date]'),
    timedReleaseSummary: text('.timed-release-schedule'),

export default create({
  visit: visitable('/admin/projects'),

  flashErrors: collection('.flash-messages--full-width .flash-message.alert-danger'),

  flashMessages: collection('.flash-messages--full-width .flash-message'),

  items: collection('[data-test-log-row]', {
    actions: {
      scope: '[data-test-actions]',
      approve: { scope: 'button' }
    },
    approvalStatus: { scope: '[data-test-approval-status]' },
    icon: {
      scope: '[data-test-icon]',
      src: attribute('src', 'img')
    },
    title: { scope: '[data-test-title]' }
  })
});