chore: write own codeframe

[Skn0tt]

example of a generated codeframe:

1   | /* eslint-disable notice/notice */
2   | 
3   | import { test, expect } from '@playwright/test';
4   | import type { Page } from '@playwright/test';
5   | 
6   | test.describe.configure({ mode: 'parallel' });
7   | 
8   | test.beforeEach(async ({ page }) => {
9   |   await page.goto('https://demo.playwright.dev/todomvc');
10  | });
11  | 
12  | const TODO_ITEMS = [
13  |   'buy some cheese',
14  |   'feed the cat',
15  |   'book a doctors appointment'
16  | ];
17  | 
18  | test.describe('New Todo', () => {
19  |   test('should allow me to add todo items', async ({ page }) => {
20  |     // create a new todo locator
21  |     const newTodo = page.getByPlaceholder('What needs to be done?');
22  |     // Create 1st todo.
23  |     await newTodo.fill(TODO_ITEMS[0]);
24  |     await newTodo.press('Enter');
25  | 
26  |     // Make sure the list only has one todo item.
27  |     await expect(page.getByTestId('todo-title')).toHaveText([
28  |       TODO_ITEMS[0]
29  |     ]);
30  | 
31  |     // Create 2nd todo.
32  |     await newTodo.fill(TODO_ITEMS[1]);
33  |     await newTodo.press('Enter');
34  | 
35  |     // Make sure the list now has two todo items.
36  |     await expect(page.getByTestId('todo-title')).toHaveText([
                                                       ^ Error: Timed out 100ms waiting for expect(locator).toHaveText(expected)
37  |       TODO_ITEMS[0],
38  |       'faux',
39  |     ], { timeout: 100 });
40  | 
41  |     await checkNumberOfTodosInLocalStorage(page, 2);
42  |   });
43  | 
44  |   test('should clear text input field when an item is added', async ({ page }) => {
45  |     // create a new todo locator
46  |     const newTodo = page.getByPlaceholder('What needs to be done?');
47  | 
48  |     // Create one todo item.
49  |     await newTodo.fill(TODO_ITEMS[0]);
50  |     await newTodo.press('Enter');
51  | 
52  |     // Check that input is empty.
53  |     await expect(newTodo).toBeEmpty();
54  |     await checkNumberOfTodosInLocalStorage(page, 1);
55  |   });
56  | 
57  |   test('should append new items to the bottom of the list', async ({ page }) => {
58  |     // Create 3 items.
59  |     await createDefaultTodos(page);
60  | 
61  |     // Check test using different methods.
62  |     await expect(page.getByText('3 items left')).toBeVisible();
63  |     await expect(page.getByTestId('todo-count')).toHaveText('3 items left');
64  |     await expect(page.getByTestId('todo-count')).toContainText('3');
65  |     await expect(page.getByTestId('todo-count')).toHaveText(/3/);
66  | 
67  |     // Check all items in one call.
68  |     await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS);
69  |     await checkNumberOfTodosInLocalStorage(page, 3);
70  |   });
71  | 
72  |   test('should show #main and #footer when items added', async ({ page }) => {
73  |     // create a new todo locator
74  |     const newTodo = page.getByPlaceholder('What needs to be done?');
75  | 
76  |     await newTodo.fill(TODO_ITEMS[0]);
77  |     await newTodo.press('Enter');
78  | 
79  |     await expect(page.locator('.main')).toBeVisible();
80  |     await expect(page.locator('.footer')).toBeVisible();
81  |     await checkNumberOfTodosInLocalStorage(page, 1);
82  |   });
83  | });
84  | 
85  | test.describe('Mark all as completed', () => {
86  |   test.beforeEach(async ({ page }) => {
87  |     await createDefaultTodos(page);
88  |     await checkNumberOfTodosInLocalStorage(page, 3);
89  |   });
90  | 
91  |   test.afterEach(async ({ page }) => {
92  |     await checkNumberOfTodosInLocalStorage(page, 3);
93  |   });
94  | 
95  |   test('should allow me to mark all items as completed', async ({ page }) => {
96  |     // Complete all todos.
97  |     await page.getByLabel('Mark all as complete').check();
98  | 
99  |     // Ensure all todos have 'completed' class.
100 |     await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']);
101 |     await checkNumberOfCompletedTodosInLocalStorage(page, 3);
102 |   });
103 | 
104 |   test('should allow me to clear the complete state of all items', async ({ page }) => {
105 |     const toggleAll = page.getByLabel('Mark all as complete');
106 |     // Check and then immediately uncheck.
107 |     await toggleAll.check();
108 |     await toggleAll.uncheck();
109 | 
110 |     // Should be no completed classes.
111 |     await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']);
112 |   });
113 | 
114 |   test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => {
115 |     const toggleAll = page.getByLabel('Mark all as complete');
116 |     await toggleAll.check();
117 |     await expect(toggleAll).toBeChecked();
118 |     await checkNumberOfCompletedTodosInLocalStorage(page, 3);
119 | 
120 |     // Uncheck first todo.
121 |     const firstTodo = page.getByTestId('todo-item').nth(0);
122 |     await firstTodo.getByRole('checkbox').uncheck();
123 | 
124 |     // Reuse toggleAll locator and make sure its not checked.
125 |     await expect(toggleAll).not.toBeChecked();
126 | 
127 |     await firstTodo.getByRole('checkbox').check();
128 |     await checkNumberOfCompletedTodosInLocalStorage(page, 3);
129 | 
130 |     // Assert the toggle all is checked again.
131 |     await expect(toggleAll).toBeChecked();
132 |   });
133 | });
134 | 
135 | test.describe('Item', () => {
136 | 

[dgozman]

Suggested change

	const end = Math.min(source.split('\n').length, location.line + linesBelow);
	const end = Math.min(lines.length, location.line + linesBelow);

[dgozman]

Let's use any other name than window 😄

[github-actions]

Test results for "tests 1"

1 failed
❌ [webkit-library] › library/browsercontext-device.spec.ts:45:5 › device › should scroll to click @webkit-ubuntu-22.04-node18

7 flaky

⚠️ [chromium-library] › library/browsercontext-reuse.spec.ts:256:1 › should work with clock emulation @chromium-ubuntu-22.04-node18
⚠️ [chromium-library] › library/browsercontext-reuse.spec.ts:256:1 › should work with clock emulation @chromium-ubuntu-22.04-node20
⚠️ [chromium-library] › library/browsercontext-reuse.spec.ts:256:1 › should work with clock emulation @chromium-ubuntu-22.04-node22
⚠️ [firefox-library] › library/inspector/cli-codegen-1.spec.ts:986:7 › cli codegen › should not throw csp directive violation errors @firefox-ubuntu-22.04-node18
⚠️ [chromium-library] › library/browsercontext-reuse.spec.ts:256:1 › should work with clock emulation @ubuntu-22.04-chromium-tip-of-tree
⚠️ [webkit-library] › library/ignorehttpserrors.spec.ts:30:3 › should isolate contexts @webkit-ubuntu-22.04-node18
⚠️ [playwright-test] › ui-mode-test-watch.spec.ts:145:5 › should watch all @windows-latest-node18-1

39276 passed, 818 skipped
✔️✔️✔️

Merge workflow run.