agents-cli-automation 1.0.13 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/templates/playwright-agent-ts.md +145 -65
package/package.json
CHANGED
|
@@ -1,83 +1,163 @@
|
|
|
1
|
+
````chatagent
|
|
1
2
|
name: Playwright UI Testing - TypeScript (current repo)
|
|
2
|
-
description: Snapshot and quick guide for the Playwright + TypeScript
|
|
3
|
+
description: Snapshot and quick guide for the Playwright + TypeScript setup present in this repository.
|
|
3
4
|
argument-hint: "(no args)"
|
|
4
5
|
|
|
5
6
|
---
|
|
6
7
|
|
|
7
|
-
# Playwright + TypeScript
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
-
|
|
11
|
-
- **
|
|
12
|
-
|
|
13
|
-
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
8
|
+
# Playwright + TypeScript — repo snapshot
|
|
9
|
+
**Current Setup (Feb 2026)**
|
|
10
|
+
- **@playwright/test**: pinned to a verified stable version
|
|
11
|
+
- **playwright-bdd**: optional generator used in this repo; the `test` script runs `bddgen` to convert Gherkin features into Playwright specs
|
|
12
|
+
- **TypeScript**: pinned to a verified stable version
|
|
13
|
+
|
|
14
|
+
This scaffold uses a generator-based BDD flow: Gherkin feature files in `tests/features/` are converted to Playwright specs by `bddgen` (from `playwright-bdd`), and those specs are executed with `@playwright/test`.
|
|
15
|
+
|
|
16
|
+
Key points
|
|
17
|
+
- Generator flow: the `test` script runs `npx bddgen` followed by `npx playwright test` to generate specs and run them.
|
|
18
|
+
- Features: put Gherkin files in `tests/features/*.feature`.
|
|
19
|
+
- Steps: add step definitions in `tests/steps/*.ts`. Include fixtures (for example `tests/fixtures/**/*.ts`) in the generator `steps` pattern so `bddgen` can connect them to the test instance.
|
|
20
|
+
- Fixtures: `tests/fixtures/base.fixture.ts` provides typed page-object fixtures used by generated specs and step handlers.
|
|
21
|
+
|
|
22
|
+
Quick files to review
|
|
23
|
+
- Playwright config: [playwright.config.ts](playwright.config.ts)
|
|
24
|
+
- TypeScript config: [tsconfig.json](tsconfig.json)
|
|
25
|
+
- Page object example: [tests/pages/login.page.ts](tests/pages/login.page.ts)
|
|
26
|
+
- JSON data utility: [tests/utils/data.ts](tests/utils/data.ts)
|
|
27
|
+
- Fixtures: [tests/fixtures/base.fixture.ts](tests/fixtures/base.fixture.ts)
|
|
28
|
+
- Steps: [tests/steps/loginSteps.ts](tests/steps/loginSteps.ts)
|
|
29
|
+
- Features: [tests/features/login.feature](tests/features/login.feature)
|
|
30
|
+
|
|
31
|
+
Run the tests (generator BDD flow):
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install
|
|
35
|
+
npm install -D playwright-bdd
|
|
36
|
+
# Playwright + TypeScript — repo snapshot
|
|
37
|
+
|
|
38
|
+
## Current setup
|
|
39
|
+
|
|
40
|
+
- **@playwright/test** — pinned to a verified stable version.
|
|
41
|
+
- **playwright-bdd** — optional generator used in this repo; the `test` script runs `bddgen` to convert Gherkin features into Playwright specs.
|
|
42
|
+
- **TypeScript** — pinned to a verified stable version.
|
|
43
|
+
|
|
44
|
+
This repository uses a generator-based BDD flow: Gherkin feature files in `tests/features/` are converted to Playwright specs by `bddgen` (from `playwright-bdd`), and those specs are executed with `@playwright/test`.
|
|
45
|
+
|
|
46
|
+
## Key points
|
|
47
|
+
|
|
48
|
+
- **Generator flow**: the `test` script runs `npx bddgen` followed by `npx playwright test` to generate specs and run them.
|
|
49
|
+
- **Features**: place Gherkin files in `tests/features/*.feature`.
|
|
50
|
+
- **Steps**: implement step definitions in `tests/steps/*.ts`. Include fixtures (for example `tests/fixtures/**/*.ts`) in the generator `steps` pattern so `bddgen` can wire them to the test instance.
|
|
51
|
+
- **Fixtures**: `tests/fixtures/base.fixture.ts` provides typed page-object fixtures used by generated specs and step handlers.
|
|
52
|
+
|
|
53
|
+
## Quick files to review
|
|
54
|
+
|
|
34
55
|
- Playwright config: [playwright.config.ts](playwright.config.ts)
|
|
35
|
-
-
|
|
56
|
+
- TypeScript config: [tsconfig.json](tsconfig.json)
|
|
36
57
|
- Page object example: [tests/pages/login.page.ts](tests/pages/login.page.ts)
|
|
37
|
-
- JSON data
|
|
38
|
-
- Test data: [tests/data/users.json](tests/data/users.json)
|
|
58
|
+
- JSON data utility: [tests/utils/data.ts](tests/utils/data.ts)
|
|
39
59
|
- Fixtures: [tests/fixtures/base.fixture.ts](tests/fixtures/base.fixture.ts)
|
|
40
60
|
- Steps: [tests/steps/loginSteps.ts](tests/steps/loginSteps.ts)
|
|
41
|
-
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
How the flow works here
|
|
45
|
-
- Create page classes that import `Page` from `@playwright/test`; page methods should perform simple interactions and checks (for example, `LoginPage.goto()`, `LoginPage.login()`, `LoginPage.isInventoryVisible()`).
|
|
46
|
-
- Add a small data helper `readTestData(path)` that loads JSON from `tests/data/` so credentials are not hard-coded in steps or specs.
|
|
47
|
-
- Implement `tests/fixtures/base.fixture.ts` that extends Playwright's `test` to provide page-object fixtures (e.g., `loginPage`) so both direct specs and generated BDD specs can reuse them.
|
|
48
|
-
- Write step definitions in `tests/steps/*.ts` using `playwright-bdd`'s `createBdd(test)` helper. Example pattern:
|
|
49
|
-
- import `createBdd` and your `test` fixture: `const { Given, When, Then } = createBdd(test)`
|
|
50
|
-
- register steps that accept fixtures: `Given('I open login page', async ({ loginPage }) => { await loginPage.goto(); })`.
|
|
51
|
-
- Option A — Generator flow: use `npx bddgen` to turn `.feature` files into Playwright specs in `.features-gen` (generator reads `bddConfig` in `playwright.config.ts`). The `bddConfig` must include:
|
|
52
|
-
- `features`: glob pattern pointing to `.feature` files
|
|
53
|
-
- `steps`: glob patterns for step definitions **and fixtures** (e.g., `['tests/steps/**/*.ts', 'tests/fixtures/**/*.ts']`)
|
|
54
|
-
- `outputDir`: where generated specs are written (default `.features-gen`)
|
|
55
|
-
- Option B — Direct spec flow (recommended for quick runs): write a small `tests/specs/*.ts` Playwright test that imports your fixtures and page objects (no generation). This bypasses generator compatibility issues and runs immediately with `npx playwright test`.
|
|
56
|
-
|
|
57
|
-
Run the direct Playwright spec (no generator required):
|
|
61
|
+
- Features: [tests/features/login.feature](tests/features/login.feature)
|
|
62
|
+
|
|
63
|
+
## Run the tests (generator BDD flow)
|
|
58
64
|
|
|
59
65
|
```bash
|
|
60
|
-
npm install
|
|
66
|
+
npm install
|
|
67
|
+
npm install -D playwright-bdd
|
|
61
68
|
npx playwright install
|
|
62
|
-
|
|
69
|
+
npm test
|
|
63
70
|
```
|
|
64
71
|
|
|
65
|
-
|
|
72
|
+
## Notes
|
|
73
|
+
|
|
74
|
+
- The `test` script runs `npx bddgen` and then `npx playwright test`. If `playwright-bdd` is not installed, you'll be prompted to run `npm install -D playwright-bdd`.
|
|
75
|
+
- Generated specs are written to the configured output directory (commonly `.features-gen`) and then executed by Playwright.
|
|
76
|
+
|
|
77
|
+
## How to enable generator-based BDD later
|
|
78
|
+
|
|
79
|
+
- Install `playwright-bdd` as a dev dependency and add `npx bddgen` to the `test` script.
|
|
80
|
+
- Add step definitions under `tests/steps/` and include fixtures in the generator `steps` pattern.
|
|
81
|
+
|
|
82
|
+
## Ways I can help
|
|
83
|
+
|
|
84
|
+
- Add `playwright-bdd` to `devDependencies` and update `package.json` so `npm install` installs it automatically.
|
|
85
|
+
- Add a GitHub Actions workflow that runs `npm test` on push.
|
|
86
|
+
- Expand page objects, feature coverage, or step definitions.
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
_Generated: Playwright + TypeScript snapshot and quick guide._
|
|
91
|
+
|
|
92
|
+
## Data utilities (read JSON / YAML)
|
|
93
|
+
|
|
94
|
+
You can add a small utility to load test data from JSON or YAML. Install the YAML parser and optional types:
|
|
66
95
|
|
|
67
96
|
```bash
|
|
68
|
-
npm
|
|
97
|
+
npm install js-yaml
|
|
98
|
+
npm install -D @types/js-yaml
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Example TypeScript utility (`tests/utils/readData.ts`):
|
|
102
|
+
|
|
103
|
+
```ts
|
|
104
|
+
import fs from 'fs';
|
|
105
|
+
import path from 'path';
|
|
106
|
+
import yaml from 'js-yaml';
|
|
107
|
+
|
|
108
|
+
export function readData(filePath: string): any {
|
|
109
|
+
const ext = path.extname(filePath).toLowerCase();
|
|
110
|
+
const raw = fs.readFileSync(filePath, 'utf8');
|
|
111
|
+
if (ext === '.json') return JSON.parse(raw);
|
|
112
|
+
if (ext === '.yml' || ext === '.yaml') return yaml.load(raw);
|
|
113
|
+
throw new Error(`Unsupported data format: ${ext}`);
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Usage example in a test or step definition:
|
|
118
|
+
|
|
119
|
+
```ts
|
|
120
|
+
import { readData } from '../utils/readData';
|
|
121
|
+
|
|
122
|
+
const login = readData('tests/data/login.yaml');
|
|
123
|
+
// use `login.username`, `login.password` in your steps
|
|
69
124
|
```
|
|
70
125
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
-
|
|
74
|
-
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
-
|
|
83
|
-
|
|
126
|
+
Tips
|
|
127
|
+
|
|
128
|
+
- If you prefer importing JSON directly, enable `resolveJsonModule` in `tsconfig.json`.
|
|
129
|
+
- For large or frequently-modified data files, consider caching the parsed result in the utility.
|
|
130
|
+
|
|
131
|
+
## Dependency updates & provisioning
|
|
132
|
+
|
|
133
|
+
To update dev dependencies in `package.json` to the latest compatible versions you can use `npm-check-updates` (ncu). The command below updates `devDependencies` in `package.json`:
|
|
134
|
+
|
|
135
|
+
```bash
|
|
136
|
+
# update devDependencies in package.json
|
|
137
|
+
npx npm-check-updates -u '/.*/' --dep dev
|
|
138
|
+
|
|
139
|
+
# install updates
|
|
140
|
+
npm install
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
Notes and troubleshooting
|
|
144
|
+
|
|
145
|
+
- `npx npm-check-updates -u` only modifies `package.json`. If `package-lock.json` or `node_modules` pin old versions, run a fresh install:
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
# remove lockfile and node_modules then reinstall (cross-platform idea)
|
|
149
|
+
rm -rf node_modules package-lock.json
|
|
150
|
+
npm install
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
- On Windows PowerShell use:
|
|
154
|
+
|
|
155
|
+
```powershell
|
|
156
|
+
Remove-Item -Recurse -Force node_modules
|
|
157
|
+
Remove-Item package-lock.json
|
|
158
|
+
npm install
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
- If `npm install` reports peer dependency conflicts or fails, it's usually due to incompatible major versions; I can help resolve those selectively.
|
|
162
|
+
|
|
163
|
+
Would you like me to run the `npx npm-check-updates -u '/.*/' --dep dev` and `npm install` commands now, or create a commit/update `package.json` myself? If you prefer, I can also open a PR with the changes.
|