Advanced Examples

1
import { test } from '@playwright/test';
2
import { ai } from '@chekov/core';
3

4
test('complete multi-step registration form', async ({ page }) => {
5
  await page.goto('/register');
6

7
  // Step 1: Personal Information
8
  await ai([
9
    'Type "John Doe" in the full name field',
10
    'Type "john@example.com" in the email field',
11
    'Select "United States" from the country dropdown',
12
    'Type "123 Main St" in the address field'
13
  ], { page, parallelism: 2 });
14

15
  await ai('Click the Next button', { page });
16
  await ai('Verify we are on step 2', { page });
17

18
  // Step 2: Account Setup
19
  await ai([
20
    'Type "securepass123" in the password field',
21
    'Type "securepass123" in the confirm password field',
22
    'Check the terms and conditions checkbox',
23
    'Select "Developer" from the role dropdown'
24
  ], { page, parallelism: 2 });
25

26
  await ai('Click the Next button', { page });
27
  await ai('Verify we are on step 3', { page });
28

29
  // Step 3: Preferences
30
  await ai([
31
    'Select all notification preferences',
32
    'Choose "Dark" theme from the theme selector',
33
    'Select "GMT-8" from the timezone dropdown'
34
  ], { page, parallelism: 3 });
35

36
  await ai('Click the Complete Registration button', { page });
37
  await ai('Verify the registration success message is shown', { page });
38
});

1
test('handle dynamic data loading', async ({ page }) => {
2
  await page.goto('/dashboard');
3

4
  // Wait for initial load
5
  await ai('Wait for the dashboard to fully load', { page });
6

7
  // Load more data
8
  await ai('Click the Load More button', { page });
9
  await ai('Wait for new items to appear', { page });
10

11
  // Verify dynamic updates
12
  await ai([
13
    'Verify at least 10 items are visible',
14
    'Verify the loading indicator is hidden',
15
    'Verify the total count has increased'
16
  ], { page, parallelism: 3 });
17

18
  // Real-time updates
19
  await ai([
20
    'Click the Enable Real-time Updates toggle',
21
    'Wait for the live data indicator to appear'
22
  ], { page });
23

24
  // Verify real-time updates
25
  await ai('Verify new items appear automatically', { page });
26
});

1
test('complex UI interactions', async ({ page }) => {
2
  await page.goto('/editor');
3

4
  // Rich text editing
5
  await ai([
6
    'Click the Rich Text Editor field',
7
    'Type "Hello, World!" in the editor',
8
    'Select the text we just typed'
9
  ], { page });
10

11
  await ai([
12
    'Click the Bold button in the toolbar',
13
    'Click the Text Color button',
14
    'Select the red color from the color picker'
15
  ], { page });
16

17
  // File upload with preview
18
  await page.setInputFiles('input[type="file"]', 'test-files/image.jpg');
19
  await ai([
20
    'Verify the image preview is visible',
21
    'Verify the file name is shown',
22
    'Verify the file size is displayed'
23
  ], { page, parallelism: 3 });
24

25
  // Drag and drop
26
  await ai([
27
    'Drag the image preview to the gallery section',
28
    'Verify the image appears in the gallery',
29
    'Verify the upload section is empty'
30
  ], { page });
31
});

1
test('manage complex application state', async ({ page }) => {
2
  await page.goto('/app');
3

4
  // Initialize app state
5
  await ai([
6
    'Open the settings panel',
7
    'Enable experimental features',
8
    'Enable dark mode',
9
    'Set language to Spanish'
10
  ], { page, parallelism: 2 });
11

12
  // Verify state persistence
13
  await ai('Reload the page', { page });
14
  await ai([
15
    'Verify experimental features are still enabled',
16
    'Verify dark mode is still active',
17
    'Verify language is still set to Spanish'
18
  ], { page, parallelism: 3 });
19

20
  // Handle side effects
21
  await ai('Click the Clear Cache button', { page });
22
  await ai([
23
    'Verify the success message appears',
24
    'Verify the cache size shows 0 bytes',
25
    'Verify the last cleared timestamp is updated'
26
  ], { page });
27
});

1
test('handle error scenarios', async ({ page }) => {
2
  await page.goto('/dashboard');
3

4
  // Simulate offline mode
5
  await page.context().setOffline(true);
6
  await ai([
7
    'Click the Refresh Data button',
8
    'Verify the offline error message is shown',
9
    'Verify the retry button is visible'
10
  ], { page });
11

12
  // Test retry mechanism
13
  await page.context().setOffline(false);
14
  await ai('Click the Retry button', { page });
15
  await ai('Verify the data is loaded successfully', { page });
16

17
  // Test error boundaries
18
  await ai('Click the Trigger Error button', { page });
19
  await ai([
20
    'Verify the error boundary message is shown',
21
    'Verify the error details are visible',
22
    'Verify the reset button is available'
23
  ], { page, parallelism: 3 });
24

25
  // Recovery
26
  await ai('Click the Reset Application button', { page });
27
  await ai('Verify the application is back to normal state', { page });
28
});