@assertrx/dino 1.0.0
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/README.md +293 -0
- package/extensions/dino.ts +70 -0
- package/extensions/mabl-mcp.ts +306 -0
- package/extensions/playwright-mcp.ts +142 -0
- package/package.json +47 -0
- package/prompts/create-pr.md +110 -0
- package/prompts/generate-bdd-from-url.md +65 -0
- package/prompts/generate-pom-from-url-cli.md +48 -0
- package/prompts/generate-pom-from-url.md +45 -0
- package/prompts/generate-spec-from-feature.md +64 -0
- package/prompts/heal-playwright-failures.md +106 -0
- package/prompts/setup-playwright.md +81 -0
- package/scripts/start-dino.cmd +8 -0
- package/scripts/start-dino.mjs +226 -0
- package/scripts/start-dino.ps1 +9 -0
- package/scripts/start-dino.sh +10 -0
- package/skills/acli/SKILL.md +292 -0
- package/skills/bdd-gherkin/SKILL.md +552 -0
- package/skills/build-review-interface/SKILL.md +96 -0
- package/skills/error-analysis/SKILL.md +164 -0
- package/skills/eval-audit/SKILL.md +183 -0
- package/skills/evaluate-rag/SKILL.md +177 -0
- package/skills/generate-synthetic-data/SKILL.md +131 -0
- package/skills/mabl-mcp/SKILL.md +79 -0
- package/skills/playwright-cli/SKILL.md +246 -0
- package/skills/playwright-cli/advanced-workflows.md +679 -0
- package/skills/playwright-cli/core-commands.md +375 -0
- package/skills/playwright-cli/device-emulation.md +475 -0
- package/skills/playwright-cli/request-mocking.md +373 -0
- package/skills/playwright-cli/running-custom-code.md +553 -0
- package/skills/playwright-cli/screenshots-and-media.md +457 -0
- package/skills/playwright-cli/session-management.md +425 -0
- package/skills/playwright-cli/storage-and-auth.md +487 -0
- package/skills/playwright-cli/test-generation.md +336 -0
- package/skills/playwright-cli/tracing-and-debugging.md +501 -0
- package/skills/playwright-core/SKILL.md +101 -0
- package/skills/playwright-core/accessibility.md +1517 -0
- package/skills/playwright-core/angular.md +1086 -0
- package/skills/playwright-core/api-testing.md +1623 -0
- package/skills/playwright-core/assertions-and-waiting.md +703 -0
- package/skills/playwright-core/auth-flows.md +1081 -0
- package/skills/playwright-core/authentication.md +1409 -0
- package/skills/playwright-core/browser-apis.md +673 -0
- package/skills/playwright-core/browser-extensions.md +319 -0
- package/skills/playwright-core/canvas-and-webgl.md +494 -0
- package/skills/playwright-core/clock-and-time-mocking.md +427 -0
- package/skills/playwright-core/common-pitfalls.md +1318 -0
- package/skills/playwright-core/component-testing.md +1179 -0
- package/skills/playwright-core/configuration.md +731 -0
- package/skills/playwright-core/crud-testing.md +945 -0
- package/skills/playwright-core/debugging.md +827 -0
- package/skills/playwright-core/drag-and-drop.md +992 -0
- package/skills/playwright-core/electron-testing.md +622 -0
- package/skills/playwright-core/error-and-edge-cases.md +1181 -0
- package/skills/playwright-core/error-index.md +1903 -0
- package/skills/playwright-core/file-operations.md +749 -0
- package/skills/playwright-core/file-upload-download.md +1012 -0
- package/skills/playwright-core/fixtures-and-hooks.md +1072 -0
- package/skills/playwright-core/flaky-tests.md +883 -0
- package/skills/playwright-core/forms-and-validation.md +1056 -0
- package/skills/playwright-core/i18n-and-localization.md +622 -0
- package/skills/playwright-core/iframes-and-shadow-dom.md +488 -0
- package/skills/playwright-core/locator-strategy.md +588 -0
- package/skills/playwright-core/locators.md +743 -0
- package/skills/playwright-core/mobile-and-responsive.md +1669 -0
- package/skills/playwright-core/multi-context-and-popups.md +581 -0
- package/skills/playwright-core/multi-user-and-collaboration.md +477 -0
- package/skills/playwright-core/network-mocking.md +1395 -0
- package/skills/playwright-core/nextjs.md +1013 -0
- package/skills/playwright-core/performance-testing.md +608 -0
- package/skills/playwright-core/react.md +1082 -0
- package/skills/playwright-core/search-and-filter.md +1366 -0
- package/skills/playwright-core/security-testing.md +624 -0
- package/skills/playwright-core/service-workers-and-pwa.md +524 -0
- package/skills/playwright-core/test-architecture.md +569 -0
- package/skills/playwright-core/test-data-management.md +1209 -0
- package/skills/playwright-core/test-organization.md +947 -0
- package/skills/playwright-core/third-party-integrations.md +754 -0
- package/skills/playwright-core/trace-analysis.md +161 -0
- package/skills/playwright-core/visual-regression.md +1027 -0
- package/skills/playwright-core/vue.md +1162 -0
- package/skills/playwright-core/websockets-and-realtime.md +623 -0
- package/skills/playwright-core/when-to-mock.md +827 -0
- package/skills/playwright-pom/SKILL.md +94 -0
- package/skills/playwright-pom/page-object-model.md +921 -0
- package/skills/playwright-pom/pom-vs-fixtures-vs-helpers.md +937 -0
- package/skills/validate-evaluator/SKILL.md +215 -0
- package/skills/write-judge-prompt/SKILL.md +144 -0
- package/themes/dino.json +66 -0
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Bridge Microsoft Playwright MCP tools into pi.dev as custom tools.
|
|
3
|
+
*
|
|
4
|
+
* This extension spawns `@playwright/mcp` as a local stdio MCP server,
|
|
5
|
+
* lists the tools it exposes, and registers each one with pi so the agent
|
|
6
|
+
* can call them like any other tool.
|
|
7
|
+
*/
|
|
8
|
+
import { createRequire } from "node:module";
|
|
9
|
+
import path from "node:path";
|
|
10
|
+
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
|
|
11
|
+
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
|
|
12
|
+
import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
|
|
13
|
+
import { Type, type TSchema } from "typebox";
|
|
14
|
+
|
|
15
|
+
const require = createRequire(import.meta.url);
|
|
16
|
+
|
|
17
|
+
function jsonSchemaToTypeBox(schema: unknown): TSchema {
|
|
18
|
+
if (!schema || typeof schema !== "object") {
|
|
19
|
+
return Type.Any();
|
|
20
|
+
}
|
|
21
|
+
const s = schema as Record<string, any>;
|
|
22
|
+
|
|
23
|
+
switch (s.type) {
|
|
24
|
+
case "object": {
|
|
25
|
+
const properties: Record<string, TSchema> = {};
|
|
26
|
+
const required = new Set<string>(s.required ?? []);
|
|
27
|
+
for (const [key, value] of Object.entries(s.properties ?? {})) {
|
|
28
|
+
const child = jsonSchemaToTypeBox(value);
|
|
29
|
+
properties[key] = required.has(key) ? child : Type.Optional(child);
|
|
30
|
+
}
|
|
31
|
+
return Type.Object(properties);
|
|
32
|
+
}
|
|
33
|
+
case "array":
|
|
34
|
+
return Type.Array(jsonSchemaToTypeBox(s.items));
|
|
35
|
+
case "string":
|
|
36
|
+
return Type.String({ description: s.description });
|
|
37
|
+
case "number":
|
|
38
|
+
case "integer":
|
|
39
|
+
return Type.Number({ description: s.description });
|
|
40
|
+
case "boolean":
|
|
41
|
+
return Type.Boolean({ description: s.description });
|
|
42
|
+
case "null":
|
|
43
|
+
return Type.Null();
|
|
44
|
+
default:
|
|
45
|
+
break;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
if (Array.isArray(s.enum)) {
|
|
49
|
+
return Type.Union(s.enum.map((value: unknown) => Type.Literal(value)));
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
return Type.Any({ description: s.description });
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export default async function (pi: ExtensionAPI) {
|
|
56
|
+
let serverPath: string;
|
|
57
|
+
try {
|
|
58
|
+
const pkgPath = require.resolve("@playwright/mcp/package.json");
|
|
59
|
+
serverPath = path.join(path.dirname(pkgPath), "cli.js");
|
|
60
|
+
} catch {
|
|
61
|
+
console.warn(
|
|
62
|
+
"[playwright-mcp] @playwright/mcp is not installed. " +
|
|
63
|
+
"Run `npm install` in the Dino package directory."
|
|
64
|
+
);
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
const transport = new StdioClientTransport({
|
|
69
|
+
command: process.execPath,
|
|
70
|
+
args: [serverPath],
|
|
71
|
+
stderr: "inherit",
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
const client = new Client({
|
|
75
|
+
name: "dino-playwright-mcp",
|
|
76
|
+
version: "0.1.0",
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
try {
|
|
80
|
+
await client.connect(transport);
|
|
81
|
+
} catch (err) {
|
|
82
|
+
console.warn("[playwright-mcp] Could not connect to Playwright MCP server:", err);
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
let tools;
|
|
87
|
+
try {
|
|
88
|
+
const result = await client.listTools();
|
|
89
|
+
tools = result.tools;
|
|
90
|
+
} catch (err) {
|
|
91
|
+
console.warn("[playwright-mcp] Could not list Playwright MCP tools:", err);
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
for (const tool of tools) {
|
|
96
|
+
pi.registerTool({
|
|
97
|
+
name: tool.name,
|
|
98
|
+
label: tool.name,
|
|
99
|
+
description: tool.description ?? ``,
|
|
100
|
+
promptSnippet: tool.name.startsWith("browser_")
|
|
101
|
+
? `Browser automation via Playwright MCP: ${tool.description ?? tool.name}`
|
|
102
|
+
: `Playwright MCP tool: ${tool.description ?? tool.name}`,
|
|
103
|
+
parameters: jsonSchemaToTypeBox(tool.inputSchema),
|
|
104
|
+
async execute(_toolCallId, params) {
|
|
105
|
+
const result = await client.callTool({
|
|
106
|
+
name: tool.name,
|
|
107
|
+
arguments: (params ?? {}) as Record<string, unknown>,
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
const content = result.content.map((item) => {
|
|
111
|
+
if (item.type === "text") {
|
|
112
|
+
return { type: "text" as const, text: item.text };
|
|
113
|
+
}
|
|
114
|
+
if (item.type === "image") {
|
|
115
|
+
return {
|
|
116
|
+
type: "image" as const,
|
|
117
|
+
data: item.data,
|
|
118
|
+
mimeType: item.mimeType,
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
return { type: "text" as const, text: JSON.stringify(item) };
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
return { content, details: result };
|
|
125
|
+
},
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
console.log(`[playwright-mcp] Registered ${tools.length} Playwright MCP tool(s).`);
|
|
130
|
+
|
|
131
|
+
const cleanup = async () => {
|
|
132
|
+
try {
|
|
133
|
+
await transport.close();
|
|
134
|
+
await client.close();
|
|
135
|
+
} catch {
|
|
136
|
+
// ignore cleanup errors
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
process.on("SIGINT", cleanup);
|
|
140
|
+
process.on("SIGTERM", cleanup);
|
|
141
|
+
pi.on("session_shutdown", cleanup);
|
|
142
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@assertrx/dino",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A friendly purple dinosaur pi package with a custom TUI header, theme, and Playwright skills.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"pi-package"
|
|
7
|
+
],
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"author": "",
|
|
10
|
+
"files": [
|
|
11
|
+
"extensions",
|
|
12
|
+
"prompts",
|
|
13
|
+
"skills",
|
|
14
|
+
"themes",
|
|
15
|
+
"README.md",
|
|
16
|
+
"scripts"
|
|
17
|
+
],
|
|
18
|
+
"scripts": {
|
|
19
|
+
"start:all": "node scripts/start-dino.mjs",
|
|
20
|
+
"start:api": "node scripts/start-dino.mjs",
|
|
21
|
+
"postinstall": "npx playwright install chromium"
|
|
22
|
+
},
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"@mablhq/mabl-cli": "^2.127.20",
|
|
25
|
+
"@modelcontextprotocol/sdk": "^1.30.0",
|
|
26
|
+
"@playwright/cli": "^0.1.18",
|
|
27
|
+
"@playwright/mcp": "^0.0.79",
|
|
28
|
+
"typebox": "^1.1.38"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"@earendil-works/pi-coding-agent": "*"
|
|
32
|
+
},
|
|
33
|
+
"pi": {
|
|
34
|
+
"extensions": [
|
|
35
|
+
"./extensions"
|
|
36
|
+
],
|
|
37
|
+
"prompts": [
|
|
38
|
+
"./prompts"
|
|
39
|
+
],
|
|
40
|
+
"skills": [
|
|
41
|
+
"./skills"
|
|
42
|
+
],
|
|
43
|
+
"themes": [
|
|
44
|
+
"./themes"
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Create a GitHub PR for current changes, installing gh and git setup if needed
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
Create a GitHub pull request for the changes in the current workspace. Install the GitHub CLI (`gh`) if it is missing, and handle both existing git repos and brand-new projects.
|
|
6
|
+
|
|
7
|
+
## Steps
|
|
8
|
+
|
|
9
|
+
1. **Check for GitHub CLI**.
|
|
10
|
+
- Run `bash` commands to check `gh --version` or `which gh`.
|
|
11
|
+
- If `gh` is present, note the version and continue.
|
|
12
|
+
- If `gh` is missing, install it:
|
|
13
|
+
- **macOS / Homebrew**: `brew install gh`
|
|
14
|
+
- **Windows / winget**: `winget install --id GitHub.cli`
|
|
15
|
+
- **Windows / chocolatey**: `choco install gh`
|
|
16
|
+
- **Ubuntu / Debian**: `sudo apt update && sudo apt install -y gh`
|
|
17
|
+
- **Fedora / RHEL**: `sudo dnf install -y gh`
|
|
18
|
+
- After installing, verify with `gh --version`.
|
|
19
|
+
|
|
20
|
+
2. **Check `gh` authentication**.
|
|
21
|
+
- Run `gh auth status`.
|
|
22
|
+
- If not authenticated, ask the user to run `gh auth login` manually (do not paste tokens into chat). Do not proceed until authenticated.
|
|
23
|
+
|
|
24
|
+
3. **Detect git project state**.
|
|
25
|
+
- Check whether `.git` exists in the current workspace.
|
|
26
|
+
|
|
27
|
+
### A. Existing git project
|
|
28
|
+
|
|
29
|
+
If `.git` exists:
|
|
30
|
+
|
|
31
|
+
1. **Inspect changes**.
|
|
32
|
+
- Run `git status --short` to see modified/untracked files.
|
|
33
|
+
- Show the user a concise summary of the changes.
|
|
34
|
+
|
|
35
|
+
2. **Prepare a branch**.
|
|
36
|
+
- Get the current branch with `git branch --show-current`.
|
|
37
|
+
- If currently on `main` or `master`, create and switch to a feature branch:
|
|
38
|
+
```bash
|
|
39
|
+
git checkout -b update/<short-description>
|
|
40
|
+
```
|
|
41
|
+
- Use a descriptive branch name based on the changes.
|
|
42
|
+
|
|
43
|
+
3. **Configure git identity if needed**.
|
|
44
|
+
- Run `git config user.name` and `git config user.email`.
|
|
45
|
+
- If either is missing, ask the user for a name and email, then set them locally:
|
|
46
|
+
```bash
|
|
47
|
+
git config user.name "Name"
|
|
48
|
+
git config user.email "email@example.com"
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
4. **Commit and push**.
|
|
52
|
+
- Stage the relevant changes with `git add`.
|
|
53
|
+
- Commit with a clear message. Ask the user for a message if one is not obvious, or use a sensible default summarizing the changes.
|
|
54
|
+
- Push the branch:
|
|
55
|
+
```bash
|
|
56
|
+
git push -u origin <branch-name>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
5. **Create the pull request**.
|
|
60
|
+
- Use `gh pr create` with non-interactive flags:
|
|
61
|
+
```bash
|
|
62
|
+
gh pr create --title "<title>" --body "<body>" --base <base-branch>
|
|
63
|
+
```
|
|
64
|
+
- Derive the PR title and body from the commit message and changed files.
|
|
65
|
+
- If a PR already exists for this branch, run `gh pr view <branch>` and report the URL instead.
|
|
66
|
+
|
|
67
|
+
### B. New project without git
|
|
68
|
+
|
|
69
|
+
If `.git` does not exist:
|
|
70
|
+
|
|
71
|
+
1. **Ask the user** for:
|
|
72
|
+
- The desired GitHub repository name.
|
|
73
|
+
- Whether it should be public or private.
|
|
74
|
+
- The GitHub owner/organization (default to the authenticated user).
|
|
75
|
+
|
|
76
|
+
2. **Create the remote repository**.
|
|
77
|
+
- Run:
|
|
78
|
+
```bash
|
|
79
|
+
gh repo create <owner>/<repo> --<public|private> --source=. --remote=origin --push
|
|
80
|
+
```
|
|
81
|
+
- If the user only provided a repo name without an owner, use `gh repo create <repo> --<public|private> --source=. --remote=origin --push`.
|
|
82
|
+
|
|
83
|
+
3. **Configure git identity**.
|
|
84
|
+
- Ask for name and email if not already set globally.
|
|
85
|
+
|
|
86
|
+
4. **Commit the current code**.
|
|
87
|
+
- Run:
|
|
88
|
+
```bash
|
|
89
|
+
git add .
|
|
90
|
+
git commit -m "Initial commit"
|
|
91
|
+
git push -u origin main
|
|
92
|
+
```
|
|
93
|
+
- If `main` is not the default branch name, use `master` or ask the user.
|
|
94
|
+
|
|
95
|
+
5. **Report the repository URL**.
|
|
96
|
+
|
|
97
|
+
## Rules
|
|
98
|
+
|
|
99
|
+
- Never paste credentials or tokens into the chat.
|
|
100
|
+
- Ask the user before creating a public repo if privacy matters.
|
|
101
|
+
- Do not run `gh auth login` automatically; prompt the user to authenticate manually.
|
|
102
|
+
- Do not overwrite or ignore local git configuration without asking.
|
|
103
|
+
- If there are no changes to commit, report that and stop.
|
|
104
|
+
- Keep the PR title/body concise and relevant to the actual changes.
|
|
105
|
+
|
|
106
|
+
After completing, summarize:
|
|
107
|
+
- Whether `gh` was installed or already present.
|
|
108
|
+
- The repository and branch used.
|
|
109
|
+
- The commit message and PR URL (if created).
|
|
110
|
+
- Any errors or manual steps the user still needs to take.
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Generate exhaustive Gherkin BDD scenarios for a single page using the bdd-gherkin skill
|
|
3
|
+
argument-hint: "<URL> [output-dir]"
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Use the `bdd-gherkin` skill and `playwright-cli` commands to inspect the page at $1 and generate exhaustive Gherkin BDD scenarios for **that page only**. Fall back to the Playwright MCP bridge (`browser_*` tools) only if `playwright-cli` is unavailable or fails.
|
|
7
|
+
|
|
8
|
+
## Preferred tooling
|
|
9
|
+
|
|
10
|
+
- **Primary:** `playwright-cli` (`open`, `snapshot`, `goto`, `click`, `fill`, etc.)
|
|
11
|
+
- **Fallback:** Playwright MCP (`browser_navigate`, `browser_snapshot`, etc.)
|
|
12
|
+
|
|
13
|
+
## Workflow
|
|
14
|
+
|
|
15
|
+
1. **Load the BDD skill**.
|
|
16
|
+
- Read `skills/bdd-gherkin/SKILL.md` first and follow its rules.
|
|
17
|
+
|
|
18
|
+
2. **Inspect the target page with `playwright-cli` first**.
|
|
19
|
+
- Check whether `playwright-cli` is on PATH. If not, use `npx -p @playwright/cli playwright-cli ...`.
|
|
20
|
+
- Run `playwright-cli open $1` to load the page.
|
|
21
|
+
- Run `playwright-cli snapshot` to capture the accessibility tree, visible fields, buttons, links, tables, and any validation/error messages.
|
|
22
|
+
- If `playwright-cli` cannot be resolved or its commands fail, fall back to the Playwright MCP bridge: use `browser_navigate` to load $1 and `browser_snapshot` to inspect it.
|
|
23
|
+
- If the page requires authentication and an env file is provided, follow the secure login flow from the `playwright-cli` skill.
|
|
24
|
+
- Identify the primary actor(s), the business capability the page supports, and every interactive element or workflow step on the page.
|
|
25
|
+
- Do **not** navigate away from the page; generate scenarios for the page pointed to by $1 only.
|
|
26
|
+
|
|
27
|
+
3. **Derive business context**.
|
|
28
|
+
- From the page content, determine:
|
|
29
|
+
- The business feature/capability (e.g., "Transfer Money", "User Login", "Apply for Loan").
|
|
30
|
+
- The primary actor(s) (e.g., customer, admin, visitor).
|
|
31
|
+
- The business value provided by the page.
|
|
32
|
+
- Required fields, optional fields, constraints, and possible outcomes.
|
|
33
|
+
- If the page is ambiguous or critical business rules are not visible (e.g., user roles, backend rules), ask **one or two concise clarifying questions** before generating scenarios. Otherwise, proceed directly.
|
|
34
|
+
|
|
35
|
+
4. **Generate exhaustive Gherkin scenarios**.
|
|
36
|
+
Cover the following categories for the page:
|
|
37
|
+
|
|
38
|
+
- **Happy path** — successful completion of the primary action.
|
|
39
|
+
- **Validation / invalid input** — missing required fields, malformed input, out-of-range values, wrong formats.
|
|
40
|
+
- **Edge cases** — boundary values, empty input, maximum/minimum lengths, special characters, whitespace, zero/null amounts.
|
|
41
|
+
- **Business rules / state-based cases** — preconditions that affect behavior (e.g., insufficient balance, locked account, existing record).
|
|
42
|
+
- **Error / negative cases** — visible error messages, disabled actions, failed submissions.
|
|
43
|
+
- **UI / interaction cases** — toggles, show/hide password, dropdown dependencies, disabled fields, cancel/reset actions.
|
|
44
|
+
- **Accessibility / usability cases** — keyboard focus, visible labels, error announcement (if inferable from the page).
|
|
45
|
+
|
|
46
|
+
5. **Follow Gherkin best practices**.
|
|
47
|
+
- Use a single-focused Scenario for each behavior.
|
|
48
|
+
- Use **exactly one `When` action per scenario**; move setup details into `Given` or `Background`.
|
|
49
|
+
- Use `Background` liberally for shared preconditions.
|
|
50
|
+
- Use data tables when a `Given` step has two or more fields.
|
|
51
|
+
- Use business language, not Selenium/implementation detail.
|
|
52
|
+
- Include a business value statement (`As a ... I want ... So that ...`) when it adds clarity.
|
|
53
|
+
- Use Scenario Outlines only when data variation is the central focus.
|
|
54
|
+
- Keep tags minimal.
|
|
55
|
+
|
|
56
|
+
6. **Save the feature file**.
|
|
57
|
+
- Write the generated Gherkin to `${2:-tests/features/}/<page-name>.feature`.
|
|
58
|
+
- Use a clear, kebab-case file name derived from the page (e.g., `transfer-money-page.feature`, `login-page.feature`).
|
|
59
|
+
- If the page supports multiple distinct capabilities, split into multiple feature files in the output directory.
|
|
60
|
+
|
|
61
|
+
## Output
|
|
62
|
+
|
|
63
|
+
- The saved `.feature` file path(s).
|
|
64
|
+
- A brief summary of the scenario categories covered (happy path, validation, edge cases, errors, etc.).
|
|
65
|
+
- Any clarifying assumptions made about business rules or user roles.
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Generate Playwright Page Object Models from a live URL using playwright-cli
|
|
3
|
+
argument-hint: "<URL> [output-dir] [auth-env-file]"
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Use the `playwright-pom` skill and `playwright-cli` commands to generate Page Object Models from the website at $1.
|
|
7
|
+
|
|
8
|
+
Scope and rules:
|
|
9
|
+
- Start at $1 and explore only pages on the same origin.
|
|
10
|
+
- Use `playwright-cli open <url>` to launch the browser. If `playwright-cli` is not on PATH, use `npx -p @playwright/cli playwright-cli open <url>` instead.
|
|
11
|
+
- Use `playwright-cli snapshot` to capture the accessibility tree and element refs for each page.
|
|
12
|
+
- Use `playwright-cli goto <url>` or `playwright-cli click <ref>` to navigate to additional pages.
|
|
13
|
+
- Generate one focused page object per unique page or reusable component.
|
|
14
|
+
- Use resilient locators: `getByRole`, `getByLabel`, `getByTestId`, `getByPlaceholder`, `getByText` (in that order). Use CSS/XPath only as a last resort.
|
|
15
|
+
- Each page object should expose high-level business methods (e.g., `loginAs(user)`, `searchFor(term)`) built from the low-level locators.
|
|
16
|
+
- Keep selectors and URLs inside the page object; tests should read like user workflows.
|
|
17
|
+
- Save generated files under `${2:-tests/pom/}` with clear, kebab-case names (e.g., `login-page.ts`).
|
|
18
|
+
- Only target applications you own or have explicit authorization to test.
|
|
19
|
+
- Do not interact with destructive actions (delete, remove, sign out) unless explicitly requested.
|
|
20
|
+
- Stop after covering the main interactive pages; report which pages were generated and which were skipped.
|
|
21
|
+
|
|
22
|
+
## Authentication
|
|
23
|
+
|
|
24
|
+
If the site requires login, handle credentials securely:
|
|
25
|
+
|
|
26
|
+
1. **Preferred: provide an auth env file** as the third argument (`$3`).
|
|
27
|
+
- The env file should contain variables such as:
|
|
28
|
+
```bash
|
|
29
|
+
POM_AUTH_URL=https://example.com/login
|
|
30
|
+
POM_USERNAME=user@example.com
|
|
31
|
+
POM_PASSWORD=secret
|
|
32
|
+
```
|
|
33
|
+
- Load the file in a single bash command, use the variables immediately to fill the login form via `playwright-cli fill`/`click`, and **do not echo, log, or persist the values anywhere**.
|
|
34
|
+
- Do not include the env file in generated POMs, snapshots, or test code.
|
|
35
|
+
- Mark the env file in `.gitignore` and delete it when the session is complete.
|
|
36
|
+
- After logging in, you may use `playwright-cli state-save <file>` to persist the authenticated session if you need to revisit pages.
|
|
37
|
+
|
|
38
|
+
2. **Fallback: manual login**.
|
|
39
|
+
- If no env file is provided, `playwright-cli open` the login page and ask the user to complete authentication manually in the browser session.
|
|
40
|
+
- Then continue generating POMs from the authenticated state.
|
|
41
|
+
|
|
42
|
+
3. **Never** ask the user to paste credentials into the chat, and **never** hardcode credentials into generated files.
|
|
43
|
+
|
|
44
|
+
After generating, summarize:
|
|
45
|
+
- The pages and components covered
|
|
46
|
+
- The output file paths
|
|
47
|
+
- Any pages that could not be inspected and why
|
|
48
|
+
- How authentication was handled (env file or manual)
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Generate Playwright Page Object Models from a live URL using the Playwright MCP bridge
|
|
3
|
+
argument-hint: "<URL> [output-dir] [auth-env-file]"
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Use the `playwright-pom` skill and the Playwright MCP `browser_*` tools to generate Page Object Models from the website at $1.
|
|
7
|
+
|
|
8
|
+
Scope and rules:
|
|
9
|
+
- Start at $1 and explore only pages on the same origin.
|
|
10
|
+
- Use `browser_navigate` to open each page and `browser_snapshot` to inspect the accessibility tree.
|
|
11
|
+
- Generate one focused page object per unique page or reusable component.
|
|
12
|
+
- Use resilient locators: `getByRole`, `getByLabel`, `getByTestId`, `getByPlaceholder`, `getByText` (in that order). Use CSS/XPath only as a last resort.
|
|
13
|
+
- Each page object should expose high-level business methods (e.g., `loginAs(user)`, `searchFor(term)`) built from the low-level locators.
|
|
14
|
+
- Keep implementation details (selectors, URLs) inside the page object; tests should read like user workflows.
|
|
15
|
+
- Save the generated files under `${2:-tests/pom/}` using clear, kebab-case names (e.g., `login-page.ts`).
|
|
16
|
+
- Only target applications you own or have explicit authorization to test.
|
|
17
|
+
- Do not interact with destructive actions (delete, remove, sign out) unless explicitly requested.
|
|
18
|
+
- Stop after covering the main interactive pages; report which pages were generated and which were skipped.
|
|
19
|
+
|
|
20
|
+
## Authentication
|
|
21
|
+
|
|
22
|
+
If the site requires login, handle credentials securely:
|
|
23
|
+
|
|
24
|
+
1. **Preferred: provide an auth env file** as the third argument (`$3`).
|
|
25
|
+
- The env file should contain variables such as:
|
|
26
|
+
```bash
|
|
27
|
+
POM_AUTH_URL=https://example.com/login
|
|
28
|
+
POM_USERNAME=user@example.com
|
|
29
|
+
POM_PASSWORD=secret
|
|
30
|
+
```
|
|
31
|
+
- Load the file in a single bash command, use the values immediately to log in via `browser_navigate` + `browser_fill_form`/`browser_type`, and **do not echo, log, or persist the values anywhere**.
|
|
32
|
+
- Do not include the env file in generated POMs, snapshots, or test code.
|
|
33
|
+
- Mark the env file in `.gitignore` and delete it when the session is complete.
|
|
34
|
+
|
|
35
|
+
2. **Fallback: manual login**.
|
|
36
|
+
- If no env file is provided, `browser_navigate` to the login page and ask the user to complete login manually in the browser session.
|
|
37
|
+
- Then continue generating POMs from the authenticated state.
|
|
38
|
+
|
|
39
|
+
3. **Never** ask the user to paste credentials into the chat, and **never** hardcode credentials into generated files.
|
|
40
|
+
|
|
41
|
+
After generating, summarize:
|
|
42
|
+
- The pages and components covered
|
|
43
|
+
- The output file paths
|
|
44
|
+
- Any pages that could not be inspected and why
|
|
45
|
+
- How authentication was handled (env file or manual)
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Generate a Playwright test spec from a Gherkin feature file, reusing existing POMs
|
|
3
|
+
argument-hint: "<URL> <feature-file> <pom-dir> [output-dir]"
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Generate a TypeScript Playwright test spec file that implements the Gherkin scenarios from `$2` for the page at `$1`, reusing existing Page Object Models from `$3`. Create new POMs only when absolutely necessary.
|
|
7
|
+
|
|
8
|
+
## Inputs
|
|
9
|
+
|
|
10
|
+
- `$1` — URL of the page under test (used to inspect current UI state and validate selectors).
|
|
11
|
+
- `$2` — Path to the `.feature` file to implement.
|
|
12
|
+
- `$3` — Directory containing existing POM `.ts` files.
|
|
13
|
+
- `$4` — Optional output directory for the generated spec. Defaults to `tests/specs/`.
|
|
14
|
+
|
|
15
|
+
## Workflow
|
|
16
|
+
|
|
17
|
+
1. **Load the Playwright skill**.
|
|
18
|
+
- Read `skills/playwright-core/SKILL.md` to follow Playwright best practices.
|
|
19
|
+
|
|
20
|
+
2. **Inspect the page at `$1`**.
|
|
21
|
+
- Prefer `playwright-cli` (`open`, `snapshot`). If unavailable, fall back to Playwright MCP (`browser_navigate`, `browser_snapshot`).
|
|
22
|
+
- Capture the accessibility tree, form fields, buttons, links, tables, and any visible validation or error messages.
|
|
23
|
+
- Do not navigate away from the page unless required to verify a shared component.
|
|
24
|
+
|
|
25
|
+
3. **Read the feature file**.
|
|
26
|
+
- Read `$2` with the `read` tool.
|
|
27
|
+
- Parse every `Scenario`, `Scenario Outline`, and `Examples` table.
|
|
28
|
+
- Note the `Feature`, `Background`, actors, and expected outcomes.
|
|
29
|
+
|
|
30
|
+
4. **Discover available POMs**.
|
|
31
|
+
- List all `.ts` files in `$3` using `bash` (e.g., `find $3 -name "*.ts"`).
|
|
32
|
+
- Read every POM file to understand:
|
|
33
|
+
- Which page/component it represents.
|
|
34
|
+
- The public locators and high-level business methods (e.g., `loginAs`, `initiateTransfer`).
|
|
35
|
+
- Whether an exported `test` fixture file exists (e.g., `fixtures.ts`, `index.ts`).
|
|
36
|
+
- Build a mental map of reusable components and cross-page navigation helpers (e.g., `BankLayout`).
|
|
37
|
+
|
|
38
|
+
5. **Map scenarios to POM methods**.
|
|
39
|
+
- For each Gherkin scenario, decide which existing POM(s) implement the necessary actions and assertions.
|
|
40
|
+
- Reuse existing business methods whenever possible; do not duplicate selector logic in the spec.
|
|
41
|
+
- If a scenario needs a component that is not yet modeled, first check whether it belongs in an existing POM (e.g., a shared layout component, a dialog in a page POM). Only create a new POM file if the gap is significant and reusable.
|
|
42
|
+
|
|
43
|
+
6. **Generate the Playwright spec**.
|
|
44
|
+
- Write a `.spec.ts` file under `${4:-tests/specs/}` using kebab-case naming derived from the feature (e.g., `login-page.spec.ts`).
|
|
45
|
+
- Use existing fixtures if `$3` exports a `test` object (e.g., `import { test, expect } from '../pom'`). Otherwise, import POM classes and instantiate them in a `test.beforeEach` or per-test helper.
|
|
46
|
+
- Each Gherkin scenario should map to one Playwright `test(...)`.
|
|
47
|
+
- Use `test.describe` to group tests by feature or capability when helpful.
|
|
48
|
+
- Use `test.beforeEach` for shared `Background` preconditions.
|
|
49
|
+
- Use `expect` assertions that match the `Then` steps.
|
|
50
|
+
- For `Scenario Outline` `Examples`, generate one test per example row or use a parameterized loop with `test.each`/`test.describe.each`.
|
|
51
|
+
- Keep tests readable and free of low-level selectors; all selectors should come from POMs.
|
|
52
|
+
|
|
53
|
+
7. **Cross-check against the live page**.
|
|
54
|
+
- Where practical, verify that the POM methods used in the generated spec actually match the live page elements observed in step 2.
|
|
55
|
+
- If a POM method name suggests behavior that differs from the current page, prefer updating the POM method call or asking the user rather than hardcoding selectors in the spec.
|
|
56
|
+
|
|
57
|
+
## Output
|
|
58
|
+
|
|
59
|
+
- Save the generated spec file to `${4:-tests/specs/}<feature-name>.spec.ts`.
|
|
60
|
+
- Report:
|
|
61
|
+
- The spec file path.
|
|
62
|
+
- Which POM files were reused and how.
|
|
63
|
+
- Any POMs that were updated or newly created (should be rare).
|
|
64
|
+
- Any scenarios that could not be mapped to existing POMs and why.
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Detect, diagnose, and auto-heal failed Playwright tests by updating selectors, waits, and assertions, then re-run to verify
|
|
3
|
+
argument-hint: "[test-pattern] [max-iterations]"
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Run the Playwright test suite, detect failures, diagnose the root cause of each failing test, apply safe fixes, and re-run until the tests pass or the retry budget is exhausted. Only target applications and test code you own or have authorization to modify.
|
|
7
|
+
|
|
8
|
+
## Steps
|
|
9
|
+
|
|
10
|
+
1. **Inspect the workspace**.
|
|
11
|
+
- Use `bash` to list the project root and locate `playwright.config.ts`, `playwright.config.js`, or the configured `testDir`.
|
|
12
|
+
- Identify the test command from `package.json` (e.g., `test:e2e`, `test`, `e2e`).
|
|
13
|
+
- Determine whether the user supplied a test pattern in `$1`; if not, use the default project test command or `npx playwright test`.
|
|
14
|
+
|
|
15
|
+
2. **Run the tests and capture structured results**.
|
|
16
|
+
- Prefer running with JSON and line reporters so failures are machine-readable:
|
|
17
|
+
```bash
|
|
18
|
+
npx playwright test <pattern> --reporter=line,json --output=./test-results
|
|
19
|
+
```
|
|
20
|
+
- Save JSON output to a file, e.g. `./test-results/playwright-results.json`.
|
|
21
|
+
- If running all tests is too slow, first list tests with `npx playwright test --list`, then run only the failing subset once identified.
|
|
22
|
+
|
|
23
|
+
3. **Parse failures**.
|
|
24
|
+
- From the JSON report, collect each failed test: file path, test title, project/browser, error message, and the last run attempt.
|
|
25
|
+
- Count distinct failures. If zero failures, stop and report success.
|
|
26
|
+
|
|
27
|
+
4. **Gather diagnostics for each failure**.
|
|
28
|
+
- Locate the trace archive for each failing test under `./test-results/` (typically `<test-file>-<project>-<hash>/trace.zip`).
|
|
29
|
+
- Locate screenshots and videos in the same output directory.
|
|
30
|
+
- Read the failing test source file using `read`.
|
|
31
|
+
- Open the trace to inspect the DOM, locator resolution, network, and console errors:
|
|
32
|
+
```bash
|
|
33
|
+
npx playwright show-trace <path-to-trace.zip>
|
|
34
|
+
```
|
|
35
|
+
or, if unavailable, use `npx playwright test <file> --trace on` and re-run.
|
|
36
|
+
- Extract the relevant failing line, the locator used, the expected value, and any surrounding context (fixtures, setup, teardown).
|
|
37
|
+
|
|
38
|
+
5. **Classify the root cause**.
|
|
39
|
+
For each failure, decide which category applies:
|
|
40
|
+
- **Locator broken** — selector no longer matches an element (renamed class/id, removed element, dynamic content).
|
|
41
|
+
- **Timing / flakiness** — element appears but assertion or action races with rendering/network/JS.
|
|
42
|
+
- **Assertion mismatch** — expected text/URL/value changed legitimately (UI copy, route, data).
|
|
43
|
+
- **Environment / data** — missing dependency, wrong baseURL, test data conflict, auth expired, viewport.
|
|
44
|
+
- **Real product bug** — failure represents an actual regression; not safe to auto-heal.
|
|
45
|
+
|
|
46
|
+
6. **Apply safe auto-heals**.
|
|
47
|
+
Only make changes when the cause is clearly one of the first four categories. Prefer minimal, resilient edits:
|
|
48
|
+
- **Fix locators**:
|
|
49
|
+
- Replace brittle CSS/XPath selectors with semantic Playwright locators in this priority order: `getByRole`, `getByLabel`, `getByPlaceholder`, `getByText`, `getByTestId`.
|
|
50
|
+
- If a dynamic class is unavoidable, prefer stable attributes (`data-testid`, `aria-label`, role + name) over class names.
|
|
51
|
+
- **Fix timing / flakiness**:
|
|
52
|
+
- Add explicit waits via web-first assertions (`await expect(locator).toBeVisible()`).
|
|
53
|
+
- Use `page.waitForURL`, `page.waitForLoadState`, or `page.waitForResponse` when navigation/network is involved.
|
|
54
|
+
- Remove `page.waitForTimeout` if present; replace with deterministic waits.
|
|
55
|
+
- **Fix assertions**:
|
|
56
|
+
- Use `expect(locator).toHaveText(/partial/)` or `toContainText` instead of exact string assertions when copy is volatile.
|
|
57
|
+
- Update URLs to match current routing only if the new route is clearly correct.
|
|
58
|
+
- **Fix environment/data**:
|
|
59
|
+
- Adjust `baseURL`, test fixtures, or setup steps.
|
|
60
|
+
- Regenerate or reseed test data if it is clearly stale.
|
|
61
|
+
- Avoid sweeping rewrites. Edit only the failing tests and helper functions directly responsible.
|
|
62
|
+
|
|
63
|
+
7. **Re-run failed tests**.
|
|
64
|
+
- Run only the previously failing tests with the same reporter setup.
|
|
65
|
+
- Capture results and compare with the previous run.
|
|
66
|
+
|
|
67
|
+
8. **Iterate with a retry budget**.
|
|
68
|
+
- Use `max-iterations` from `$2`; default to `3` if not provided.
|
|
69
|
+
- Repeat steps 3–7 until either all targeted tests pass or the budget is exhausted.
|
|
70
|
+
- If a fix introduces a new failure, revert that change before trying an alternative.
|
|
71
|
+
|
|
72
|
+
9. **Report and escalate**.
|
|
73
|
+
- If all targeted tests pass after healing, report the changes and verification results.
|
|
74
|
+
- If failures remain, summarize:
|
|
75
|
+
- Which tests still fail.
|
|
76
|
+
- The most likely root cause (locator, timing, assertion, environment, product bug).
|
|
77
|
+
- The trace/screenshot paths for human inspection.
|
|
78
|
+
- Recommended next steps or a proposed fix that requires user confirmation.
|
|
79
|
+
|
|
80
|
+
## Rules
|
|
81
|
+
|
|
82
|
+
- Do not auto-heal tests against applications you do not own or have explicit authorization to test.
|
|
83
|
+
- Do not blindly weaken assertions to make tests pass when the failure signals a real product regression.
|
|
84
|
+
- Do not change production application source code; only modify test files, page objects, fixtures, and config.
|
|
85
|
+
- Prefer `getByRole`/`getByTestId` over CSS/XPath; keep selectors as resilient as possible.
|
|
86
|
+
- Never use `page.waitForTimeout` as a fix; always prefer deterministic waits.
|
|
87
|
+
- Keep one behavior per test; do not bundle unrelated fixes into a single large edit.
|
|
88
|
+
- Use `edit` for precise test/code changes; use `write` only for new files or complete rewrites you author.
|
|
89
|
+
- Preserve TypeScript types and existing code style.
|
|
90
|
+
- Do not delete trace archives, screenshots, or videos; they are the primary diagnostic artifacts.
|
|
91
|
+
- Stop iterating if a failure clearly indicates a product bug or requires human product decisions (copy, routing, data).
|
|
92
|
+
|
|
93
|
+
## Safety check before editing
|
|
94
|
+
|
|
95
|
+
For each proposed change, verify:
|
|
96
|
+
1. The original failing line and error message are clearly understood.
|
|
97
|
+
2. The fix addresses the diagnosed root cause, not just the symptom.
|
|
98
|
+
3. The change follows Playwright best practices from the `playwright-core` skill.
|
|
99
|
+
4. The same test passes after the fix in the next iteration.
|
|
100
|
+
|
|
101
|
+
After completing, summarize:
|
|
102
|
+
- Total failures found and the iteration count used.
|
|
103
|
+
- Files modified and the nature of each fix (locator, wait, assertion, fixture, config).
|
|
104
|
+
- Final test run results.
|
|
105
|
+
- Any remaining failures, their likely root cause, and the paths to trace/screenshot artifacts.
|
|
106
|
+
- Any changes that need human review before merging.
|