diff --git a/ui/tests/acceptance/task-detail-test.js b/ui/tests/acceptance/task-detail-test.js
index 712913f10..e2c6754a2 100644
--- a/ui/tests/acceptance/task-detail-test.js
+++ b/ui/tests/acceptance/task-detail-test.js
@@ -1,6 +1,7 @@
-import { click, findAll, currentURL, find, visit } from 'ember-native-dom-helpers';
+import { currentURL, visit } from 'ember-native-dom-helpers';
 import { test } from 'qunit';
 import moduleForAcceptance from 'nomad-ui/tests/helpers/module-for-acceptance';
+import Task from 'nomad-ui/tests/pages/allocations/task/detail';
 import moment from 'moment';
 
 let allocation;
@@ -14,18 +15,16 @@ moduleForAcceptance('Acceptance | task detail', {
     allocation = server.create('allocation', 'withTaskWithPorts');
     task = server.db.taskStates.where({ allocationId: allocation.id })[0];
 
-    visit(`/allocations/${allocation.id}/${task.name}`);
+    Task.visit({ id: allocation.id, name: task.name });
   },
 });
 
 test('/allocation/:id/:task_name should name the task and list high-level task information', function(assert) {
-  assert.ok(find('[data-test-title]').textContent.includes(task.name), 'Task name');
-  assert.ok(find('[data-test-state]').textContent.includes(task.state), 'Task state');
+  assert.ok(Task.title.includes(task.name), 'Task name');
+  assert.ok(Task.state.includes(task.state), 'Task state');
 
   assert.ok(
-    find('[data-test-started-at]').textContent.includes(
-      moment(task.startedAt).format('MM/DD/YY HH:mm:ss')
-    ),
+    Task.startedAt.includes(moment(task.startedAt).format('MM/DD/YY HH:mm:ss')),
     'Task started at'
   );
 });
@@ -36,50 +35,42 @@ test('breadcrumbs match jobs / job / task group / allocation / task', function(a
 
   const shortId = allocation.id.split('-')[0];
 
+  assert.equal(Task.breadcrumbFor('jobs.index').text, 'Jobs', 'Jobs is the first breadcrumb');
+  assert.equal(Task.breadcrumbFor('jobs.job.index').text, job.name, 'Job is the second breadcrumb');
   assert.equal(
-    find('[data-test-breadcrumb="jobs.index"]').textContent.trim(),
-    'Jobs',
-    'Jobs is the first breadcrumb'
-  );
-  assert.equal(
-    find('[data-test-breadcrumb="jobs.job.index"]').textContent.trim(),
-    job.name,
-    'Job is the second breadcrumb'
-  );
-  assert.equal(
-    find('[data-test-breadcrumb="jobs.job.task-group"]').textContent.trim(),
+    Task.breadcrumbFor('jobs.job.task-group').text,
     taskGroup,
     'Task Group is the third breadcrumb'
   );
   assert.equal(
-    find('[data-test-breadcrumb="allocations.allocation"]').textContent.trim(),
+    Task.breadcrumbFor('allocations.allocation').text,
     shortId,
     'Allocation short id is the fourth breadcrumb'
   );
   assert.equal(
-    find('[data-test-breadcrumb="allocations.allocation.task"]').textContent.trim(),
+    Task.breadcrumbFor('allocations.allocation.task').text,
     task.name,
     'Task name is the fifth breadcrumb'
   );
 
-  click('[data-test-breadcrumb="jobs.index"]');
+  Task.breadcrumbFor('jobs.index').visit();
   andThen(() => {
     assert.equal(currentURL(), '/jobs', 'Jobs breadcrumb links correctly');
   });
   andThen(() => {
-    visit(`/allocations/${allocation.id}/${task.name}`);
+    Task.visit({ id: allocation.id, name: task.name });
   });
   andThen(() => {
-    click('[data-test-breadcrumb="jobs.job.index"]');
+    Task.breadcrumbFor('jobs.job.index').visit();
   });
   andThen(() => {
     assert.equal(currentURL(), `/jobs/${job.id}`, 'Job breadcrumb links correctly');
   });
   andThen(() => {
-    visit(`/allocations/${allocation.id}/${task.name}`);
+    Task.visit({ id: allocation.id, name: task.name });
   });
   andThen(() => {
-    click('[data-test-breadcrumb="jobs.job.task-group"]');
+    Task.breadcrumbFor('jobs.job.task-group').visit();
   });
   andThen(() => {
     assert.equal(
@@ -89,10 +80,10 @@ test('breadcrumbs match jobs / job / task group / allocation / task', function(a
     );
   });
   andThen(() => {
-    visit(`/allocations/${allocation.id}/${task.name}`);
+    Task.visit({ id: allocation.id, name: task.name });
   });
   andThen(() => {
-    click('[data-test-breadcrumb="allocations.allocation"]');
+    Task.breadcrumbFor('allocations.allocation').visit();
   });
   andThen(() => {
     assert.equal(
@@ -111,11 +102,7 @@ test('the addresses table lists all reserved and dynamic ports', function(assert
   const dynamicPorts = taskResources.resources.Networks[0].DynamicPorts;
   const addresses = reservedPorts.concat(dynamicPorts);
 
-  assert.equal(
-    findAll('[data-test-task-address]').length,
-    addresses.length,
-    'All addresses are listed'
-  );
+  assert.equal(Task.addresses.length, addresses.length, 'All addresses are listed');
 });
 
 test('each address row shows the label and value of the address', function(assert) {
@@ -127,57 +114,37 @@ test('each address row shows the label and value of the address', function(asser
   const dynamicPorts = taskResources.resources.Networks[0].DynamicPorts;
   const address = reservedPorts.concat(dynamicPorts).sortBy('Label')[0];
 
-  const addressRow = find('[data-test-task-address]');
+  const addressRow = Task.addresses.objectAt(0);
   assert.equal(
-    addressRow.querySelector('[data-test-task-address-is-dynamic]').textContent.trim(),
+    addressRow.isDynamic,
     reservedPorts.includes(address) ? 'No' : 'Yes',
     'Dynamic port is denoted as such'
   );
-  assert.equal(
-    addressRow.querySelector('[data-test-task-address-name]').textContent.trim(),
-    address.Label,
-    'Label'
-  );
-  assert.equal(
-    addressRow.querySelector('[data-test-task-address-address]').textContent.trim(),
-    `${networkAddress}:${address.Value}`,
-    'Value'
-  );
+  assert.equal(addressRow.name, address.Label, 'Label');
+  assert.equal(addressRow.address, `${networkAddress}:${address.Value}`, 'Value');
 });
 
 test('the events table lists all recent events', function(assert) {
   const events = server.db.taskEvents.where({ taskStateId: task.id });
 
-  assert.equal(
-    findAll('[data-test-task-event]').length,
-    events.length,
-    `Lists ${events.length} events`
-  );
+  assert.equal(Task.events.length, events.length, `Lists ${events.length} events`);
 });
 
 test('each recent event should list the time, type, and description of the event', function(assert) {
   const event = server.db.taskEvents.where({ taskStateId: task.id })[0];
-  const recentEvent = findAll('[data-test-task-event]').get('lastObject');
+  const recentEvent = Task.events.objectAt(Task.events.length - 1);
 
   assert.equal(
-    recentEvent.querySelector('[data-test-task-event-time]').textContent.trim(),
+    recentEvent.time,
     moment(event.time / 1000000).format('MM/DD/YY HH:mm:ss'),
     'Event timestamp'
   );
-  assert.equal(
-    recentEvent.querySelector('[data-test-task-event-type]').textContent.trim(),
-    event.type,
-    'Event type'
-  );
-  assert.equal(
-    recentEvent.querySelector('[data-test-task-event-message]').textContent.trim(),
-    event.displayMessage,
-    'Event message'
-  );
+  assert.equal(recentEvent.type, event.type, 'Event type');
+  assert.equal(recentEvent.message, event.displayMessage, 'Event message');
 });
 
 test('when the allocation is not found, the application errors', function(assert) {
-  visit(`/allocations/not-a-real-allocation/${task.name}`);
+  Task.visit({ id: 'not-a-real-allocation', name: task.name });
 
   andThen(() => {
     assert.equal(
@@ -190,17 +157,13 @@ test('when the allocation is not found, the application errors', function(assert
       `/allocations/not-a-real-allocation/${task.name}`,
       'The URL persists'
     );
-    assert.ok(find('[data-test-error]'), 'Error message is shown');
-    assert.equal(
-      find('[data-test-error-title]').textContent,
-      'Not Found',
-      'Error message is for 404'
-    );
+    assert.ok(Task.error.isPresent, 'Error message is shown');
+    assert.equal(Task.error.title, 'Not Found', 'Error message is for 404');
   });
 });
 
 test('when the allocation is found but the task is not, the application errors', function(assert) {
-  visit(`/allocations/${allocation.id}/not-a-real-task-name`);
+  Task.visit({ id: allocation.id, name: 'not-a-real-task-name' });
 
   andThen(() => {
     assert.equal(
@@ -213,12 +176,8 @@ test('when the allocation is found but the task is not, the application errors',
       `/allocations/${allocation.id}/not-a-real-task-name`,
       'The URL persists'
     );
-    assert.ok(find('[data-test-error]'), 'Error message is shown');
-    assert.equal(
-      find('[data-test-error-title]').textContent,
-      'Not Found',
-      'Error message is for 404'
-    );
+    assert.ok(Task.error.isPresent, 'Error message is shown');
+    assert.equal(Task.error.title, 'Not Found', 'Error message is for 404');
   });
 });
 
@@ -231,9 +190,10 @@ moduleForAcceptance('Acceptance | task detail (no addresses)', {
     task = server.db.taskStates.where({ allocationId: allocation.id })[0];
 
     visit(`/allocations/${allocation.id}/${task.name}`);
+    Task.visit({ id: allocation.id, name: task.name });
   },
 });
 
 test('when the task has no addresses, the addresses table is not shown', function(assert) {
-  assert.notOk(find('[data-test-task-addresses]'), 'No addresses table');
+  assert.notOk(Task.hasAddresses, 'No addresses table');
 });
diff --git a/ui/tests/pages/allocations/task/detail.js b/ui/tests/pages/allocations/task/detail.js
new file mode 100644
index 000000000..80ef65ee0
--- /dev/null
+++ b/ui/tests/pages/allocations/task/detail.js
@@ -0,0 +1,47 @@
+import {
+  attribute,
+  create,
+  collection,
+  clickable,
+  isPresent,
+  text,
+  visitable,
+} from 'ember-cli-page-object';
+
+export default create({
+  visit: visitable('/allocations/:id/:name'),
+
+  title: text('[data-test-title]'),
+  state: text('[data-test-state]'),
+  startedAt: text('[data-test-started-at]'),
+
+  breadcrumbs: collection('[data-test-breadcrumb]', {
+    id: attribute('data-test-breadcrumb'),
+    text: text(),
+    visit: clickable(),
+  }),
+
+  breadcrumbFor(id) {
+    return this.breadcrumbs.toArray().find(crumb => crumb.id === id);
+  },
+
+  hasAddresses: isPresent('[data-test-task-addresses]'),
+  addresses: collection('[data-test-task-address]', {
+    name: text('[data-test-task-address-name]'),
+    isDynamic: text('[data-test-task-address-is-dynamic]'),
+    address: text('[data-test-task-address-address]'),
+  }),
+
+  events: collection('[data-test-task-event]', {
+    time: text('[data-test-task-event-time]'),
+    type: text('[data-test-task-event-type]'),
+    message: text('[data-test-task-event-message]'),
+  }),
+
+  error: {
+    isPresent: isPresent('[data-test-error]'),
+    title: text('[data-test-error-title]'),
+    message: text('[data-test-error-message]'),
+    seekHelp: clickable('[data-test-error-message] a'),
+  },
+});