Loading challenge...
Cursor Pagination
Navigate paginated data using cursor-based pagination
Page 1 of 10 (100 items)
Data Table
Cursor-paginated items
| ID (Cursor) | Name | Created At |
|---|---|---|
| item-001 | Item 1 | 2024-01-01 |
| item-002 | Item 2 | 2024-01-02 |
| item-003 | Item 3 | 2024-01-03 |
| item-004 | Item 4 | 2024-01-04 |
| item-005 | Item 5 | 2024-01-05 |
| item-006 | Item 6 | 2024-01-06 |
| item-007 | Item 7 | 2024-01-07 |
| item-008 | Item 8 | 2024-01-08 |
| item-009 | Item 9 | 2024-01-09 |
| item-010 | Item 10 | 2024-01-10 |
Cursor:
nullAPI Response
GraphQL-style pageInfo
{
"data": [
"item-001",
"item-002",
"item-003",
"item-004",
"item-005",
"item-006",
"item-007",
"item-008",
"item-009",
"item-010"
],
"pageInfo": {
"hasNextPage": true,
"hasPreviousPage": false,
"startCursor": "item-001",
"endCursor": "item-010"
},
"totalCount": 100
}Testing Tips
Key concepts to verify
- ✓ Cursor pagination uses last item ID, not page number
- ✓ Check hasNextPage/hasPreviousPage in pageInfo
- ✓ startCursor and endCursor mark page boundaries
- ✓ Change page size and verify cursor resets
- ✓ Verify correct items displayed for each cursor
Automation Tips
Testing hints
// Check initial state
await expect(page.locator('[data-testid="page-info"]')).toContainText('Page 1');
await expect(page.locator('[data-testid="cursor-info"]')).toContainText('null');
// Navigate to next page
await page.click('[data-testid="next-button"]');
await expect(page.locator('[data-testid="page-info"]')).toContainText('Page 2');
await expect(page.locator('[data-testid="cursor-info"]')).not.toContainText('null');
// Verify first item on page 2
await expect(page.locator('[data-testid="row-item-011"]')).toBeVisible();
// Check API response structure
const response = await page.locator('[data-testid="api-response"]').textContent();
const data = JSON.parse(response || '{}');
expect(data.pageInfo.hasNextPage).toBe(true);
expect(data.pageInfo.startCursor).toBe('item-011');
// Navigate to previous page
await page.click('[data-testid="prev-button"]');
await expect(page.locator('[data-testid="page-info"]')).toContainText('Page 1');
await expect(page.locator('[data-testid="row-item-001"]')).toBeVisible();
// Change page size
await page.selectOption('[data-testid="page-size"]', '20');
await expect(page.locator('[data-testid="items-table"] tbody tr')).toHaveCount(20);
// Navigate to last page
while (await page.locator('[data-testid="next-button"]').getAttribute('data-has-next') === 'true') {
await page.click('[data-testid="next-button"]');
}
await expect(page.locator('[data-testid="next-button"]')).toBeDisabled();
// Reset pagination
await page.click('[data-testid="reset-button"]');
await expect(page.locator('[data-testid="cursor-info"]')).toContainText('null');
