playwright-test

Name: playwright-test
Author: Arman-Kudaibergenov

150stars20forks

How to install playwright-test?

arman-kudaibergenov/1c-ai-development-kit/playwright-test

$npx -y skills add Arman-Kudaibergenov/1c-ai-development-kit --skill playwright-test

Installs into the current project.

Summary

Этот скилл MUST быть вызван когда пользователь говорит "напиши UI-тест", "создай playwright тест", "scaffold playwright", "протестируй фичу в браузере". SHOULD также вызывать после деплоя фичи 1С для создания автоматизированного регрессионного теста. Do NOT использовать для интер

Files · 1

View on GitHub

SKILL.md

1	# /playwright-test — Scaffold UI-теста для 1С фичи
2
3	Автономный Playwright-тест, который запускается без AI (`npm run test:ui`), пишет точечные наблюдения в JSONL, а Claude выносит вердикт по логу.
4
5	## Когда использовать
6
7	- После деплоя фичи в базу (`/db-load-xml` → `/db-update`)
8	- Фича затрагивает UI (формы, кнопки, табличные части)
9
10	## Когда НЕ использовать
11
12	- Backend-only фича (новый MCP-инструмент, только BSL без форм)
13	- Изменения только в конфигурации/правах/подсистемах без UI-эффектов
14
15	---
16
17	## Шаг 1 — Scaffold инфраструктуры (одноразово на проект)
18
19	Проверить наличие `package.json` и `playwright.config.js` в корне целевого проекта.
20
21	Если отсутствуют — создать из шаблонов:
22
23	### package.json
24
25	```json
26	{
27	"name": "<project-name>-tests",
28	"private": true,
29	"scripts": {
30	"test:ui": "npx playwright test",
31	"test:ui:headed": "npx playwright test --headed",
32	"test:ui:debug": "npx playwright test --debug"
33	},
34	"devDependencies": {
35	"@playwright/test": "^1.50.0"
36	}
37	}
38	```
39
40	### playwright.config.js
41
42	```javascript
43	const { defineConfig } = require('@playwright/test');
44
45	module.exports = defineConfig({
46	testDir: './tests/playwright',
47	timeout: 60000,
48	retries: 0,
49	use: {
50	// URL базы 1С — подставить из CLAUDE.md проекта
51	baseURL: 'http://localhost:8080',
52	// 1С веб-клиент: headless ненадёжен для некоторых действий
53	headless: true,
54	viewport: { width: 1280, height: 720 },
55	ignoreHTTPSErrors: true,
56	},
57	projects: [
58	{
59	name: '1c-ui',
60	use: { browserName: 'chromium' },
61	},
62	],
63	});
64	```
65
66	После создания:
67	```bash
68	cd <project-root> && npm install && npx playwright install chromium
69	```
70
71	---
72
73	## Шаг 2 — Определить контрольные точки (UI checkpoints)
74
75	До написания теста — определить что именно проверяется. Источники:
76
77	1. `openspec/changes/<feature>/design.md` → секция `## UI checkpoints`
78	2. Form.xml фичи → элементы формы, кнопки, команды
79	3. Здравый смысл → после действия X что меняется на экране?
80
81	Формат контрольной точки:
82	```
83	<действие пользователя> → <ожидаемое наблюдение на экране>
84	```
85
86	Примеры:
87	```
88	Нажать "Провести" → заголовок содержит "№" и дату
89	Заполнить Контрагент → поле "Договор" стало доступно
90	Добавить строку в ТЧ Товары → количество строк увеличилось на 1
91	```
92
93	Если после действия ничего не меняется визуально — тест не может проверить. Нужно доработать UI (сообщение пользователю, смена статуса, индикатор).
94
95	---
96
97	## Шаг 3 — Сгенерировать spec.js
98
99	Создать `tests/playwright/<feature>.spec.js` по паттерну:
100
101	```javascript
102	// tests/playwright/<feature>.spec.js
103	const { test, expect } = require('@playwright/test');
104	const fs = require('fs');
105	const path = require('path');
106
107	const LOG_FILE = path.join(__dirname, '<feature>.log.jsonl');
108	const BASE_URL = '<url-from-project-claude-md>';
109
110	// --- Logging helpers ---
111	function log(step, observation) {
112	const entry = {
113	ts: new Date().toISOString(),
114	step,
115	...observation,
116	};
117	fs.appendFileSync(LOG_FILE, JSON.stringify(entry) + '\n');
118	}
119
120	function clearLog() {
121	if (fs.existsSync(LOG_FILE)) fs.unlinkSync(LOG_FILE);
122	}
123
124	// --- 1C helpers ---
125	async function clipboardPaste(page, value) {
126	await page.evaluate((v) => navigator.clipboard.writeText(v), value);
127	await page.keyboard.press('Control+A');
128	await page.keyboard.press('Control+V');
129	}
130
131	async function checkFormClosed(page) {
132	const hasModal = await page.locator('.modalSurface').count() > 0;
133	const hasValidation = await page.locator('[title="Закрыть (Ctrl+Shift+Z)"]')
134	.filter({ visible: true }).count() > 0;
135	return { hasModal, hasValidation };
136	}
137
138	// --- Tests ---
139	test.describe('<Feature Name>', () => {
140	test.beforeAll(() => clearLog());
141
142	test('checkpoint: <description>', async ({ page }) => {
143	// Navigate
144	await page.goto(BASE_URL);
145	await page.waitForTimeout(2000); // 1C web client init
146
147	// Action
148	// ... (clipboard paste, DLB clicks, etc.)
149
150	// Observe — точечная проверка, НЕ полный DOM
151	const fieldValue = await page.locator('[id$="_FieldName"]').textContent();
152	const isVisible = await page.locator('[id$="_Element"]').isVisible();
153
154	log('checkpoint-name', {
155	fieldValue,
156	isVisible,
157	pass: fieldValue === 'expected',
158	});
159
160	expect(fieldValue).toBe('expected');
161	});
162	});
163	```
164
165	### Правила генерации spec.js
166
167	1. Один test() на контрольную точку — изолированная проверка
168	2. JSONL-лог обязателен — каждый `test()` пишет `log(step, observation)`
169	3. Наблюдения точечные: `isVisible`, `textConten

People who liked this also viewed

6 picks

Type

playwright-test

150stars20forks

View on GitHub

How to install playwright-test?

arman-kudaibergenov/1c-ai-development-kit/playwright-test

$npx -y skills add Arman-Kudaibergenov/1c-ai-development-kit --skill playwright-test

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# /playwright-test — Scaffold UI-теста для 1С фичи
2
3	Автономный Playwright-тест, который запускается без AI (`npm run test:ui`), пишет точечные наблюдения в JSONL, а Claude выносит вердикт по логу.
4
5	## Когда использовать
6
7	- После деплоя фичи в базу (`/db-load-xml` → `/db-update`)
8	- Фича затрагивает UI (формы, кнопки, табличные части)
9
10	## Когда НЕ использовать
11
12	- Backend-only фича (новый MCP-инструмент, только BSL без форм)
13	- Изменения только в конфигурации/правах/подсистемах без UI-эффектов
14
15	---
16
17	## Шаг 1 — Scaffold инфраструктуры (одноразово на проект)
18
19	Проверить наличие `package.json` и `playwright.config.js` в корне целевого проекта.
20
21	Если отсутствуют — создать из шаблонов:
22
23	### package.json
24
25	```json
26	{
27	"name": "<project-name>-tests",
28	"private": true,
29	"scripts": {
30	"test:ui": "npx playwright test",
31	"test:ui:headed": "npx playwright test --headed",
32	"test:ui:debug": "npx playwright test --debug"
33	},
34	"devDependencies": {
35	"@playwright/test": "^1.50.0"
36	}
37	}
38	```
39
40	### playwright.config.js
41
42	```javascript
43	const { defineConfig } = require('@playwright/test');
44
45	module.exports = defineConfig({
46	testDir: './tests/playwright',
47	timeout: 60000,
48	retries: 0,
49	use: {
50	// URL базы 1С — подставить из CLAUDE.md проекта
51	baseURL: 'http://localhost:8080',
52	// 1С веб-клиент: headless ненадёжен для некоторых действий
53	headless: true,
54	viewport: { width: 1280, height: 720 },
55	ignoreHTTPSErrors: true,
56	},
57	projects: [
58	{
59	name: '1c-ui',
60	use: { browserName: 'chromium' },
61	},
62	],
63	});
64	```
65
66	После создания:
67	```bash
68	cd <project-root> && npm install && npx playwright install chromium
69	```
70
71	---
72
73	## Шаг 2 — Определить контрольные точки (UI checkpoints)
74
75	До написания теста — определить что именно проверяется. Источники:
76
77	1. `openspec/changes/<feature>/design.md` → секция `## UI checkpoints`
78	2. Form.xml фичи → элементы формы, кнопки, команды
79	3. Здравый смысл → после действия X что меняется на экране?
80
81	Формат контрольной точки:
82	```
83	<действие пользователя> → <ожидаемое наблюдение на экране>
84	```
85
86	Примеры:
87	```
88	Нажать "Провести" → заголовок содержит "№" и дату
89	Заполнить Контрагент → поле "Договор" стало доступно
90	Добавить строку в ТЧ Товары → количество строк увеличилось на 1
91	```
92
93	Если после действия ничего не меняется визуально — тест не может проверить. Нужно доработать UI (сообщение пользователю, смена статуса, индикатор).
94
95	---
96
97	## Шаг 3 — Сгенерировать spec.js
98
99	Создать `tests/playwright/<feature>.spec.js` по паттерну:
100
101	```javascript
102	// tests/playwright/<feature>.spec.js
103	const { test, expect } = require('@playwright/test');
104	const fs = require('fs');
105	const path = require('path');
106
107	const LOG_FILE = path.join(__dirname, '<feature>.log.jsonl');
108	const BASE_URL = '<url-from-project-claude-md>';
109
110	// --- Logging helpers ---
111	function log(step, observation) {
112	const entry = {
113	ts: new Date().toISOString(),
114	step,
115	...observation,
116	};
117	fs.appendFileSync(LOG_FILE, JSON.stringify(entry) + '\n');
118	}
119
120	function clearLog() {
121	if (fs.existsSync(LOG_FILE)) fs.unlinkSync(LOG_FILE);
122	}
123
124	// --- 1C helpers ---
125	async function clipboardPaste(page, value) {
126	await page.evaluate((v) => navigator.clipboard.writeText(v), value);
127	await page.keyboard.press('Control+A');
128	await page.keyboard.press('Control+V');
129	}
130
131	async function checkFormClosed(page) {
132	const hasModal = await page.locator('.modalSurface').count() > 0;
133	const hasValidation = await page.locator('[title="Закрыть (Ctrl+Shift+Z)"]')
134	.filter({ visible: true }).count() > 0;
135	return { hasModal, hasValidation };
136	}
137
138	// --- Tests ---
139	test.describe('<Feature Name>', () => {
140	test.beforeAll(() => clearLog());
141
142	test('checkpoint: <description>', async ({ page }) => {
143	// Navigate
144	await page.goto(BASE_URL);
145	await page.waitForTimeout(2000); // 1C web client init
146
147	// Action
148	// ... (clipboard paste, DLB clicks, etc.)
149
150	// Observe — точечная проверка, НЕ полный DOM
151	const fieldValue = await page.locator('[id$="_FieldName"]').textContent();
152	const isVisible = await page.locator('[id$="_Element"]').isVisible();
153
154	log('checkpoint-name', {
155	fieldValue,
156	isVisible,
157	pass: fieldValue === 'expected',
158	});
159
160	expect(fieldValue).toBe('expected');
161	});
162	});
163	```
164
165	### Правила генерации spec.js
166
167	1. Один test() на контрольную точку — изолированная проверка
168	2. JSONL-лог обязателен — каждый `test()` пишет `log(step, observation)`
169	3. Наблюдения точечные: `isVisible`, `textConten

People who liked this also viewed

6 picks

Type