Skip to content

Commit cd8cb90

Browse files
docs: expand docs around saving generated code (#6325)
* docs: expand docs around saving generated code * lint
1 parent a178752 commit cd8cb90

File tree

4 files changed

+102
-3
lines changed

4 files changed

+102
-3
lines changed

docs/api/commands/prompt.mdx

Lines changed: 74 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,14 @@ sidebar_custom_props: { 'new_label': true }
1111

1212
# prompt
1313

14-
`cy.prompt` is a Cypress command that uses AI to convert natural language test steps into executable Cypress tests. It's designed to be flexible - you can use it to quickly generate tests and commit them to source control, or keep it running continuously for self-healing tests that adapt to your app's changes. You can choose the workflow that fits your project's needs.
14+
`cy.prompt` is a Cypress command that uses AI to convert natural language test steps into executable Cypress tests. You can view the generated Cypress code at any time using the **Code** button in the Command Log, giving you full visibility into what commands were created from your prompts.
15+
16+
**`cy.prompt` supports two flexible workflows:**
17+
18+
1. **Generate and export** - Use AI to quickly create tests, review the generated code, and save it to your test files for predictable, version-controlled tests
19+
2. **Continuous self-healing** - Keep `cy.prompt` running in your tests to automatically adapt when your app changes
20+
21+
You can choose the workflow that fits your project's needs.
1522

1623
:::note
1724

@@ -21,6 +28,7 @@ sidebar_custom_props: { 'new_label': true }
2128
- [Choosing your workflow](#Choose-your-workflow) — decide between one-time generation or continuous self-healing
2229
- [How to write effective prompts](#How-to-write-effective-prompts) — craft clear, reliable natural language steps
2330
- [What you can do](#What-you-can-do) — explore supported actions and capabilities
31+
- [Viewing and exporting generated code](#Viewing-and-exporting-generated-code) — see the Cypress code generated from your prompts and save it to your files
2432
- [Setup](#Setup) — enable the command and configure authentication
2533

2634
:::
@@ -94,7 +102,7 @@ When you call `cy.prompt`, Cypress performs a multi-step process:
94102

95103
2. **Generate selectors:** Cypress evaluates your app's DOM and picks a selector based on priority rules (unique identifiers that are likely to be stable).
96104

97-
3. **Generate Cypress code:** Commands are generated and executed in sequence. The Command Log shows both your natural language step and the commands Cypress ran.
105+
3. **Generate Cypress code:** Commands are generated and executed in sequence. The Command Log shows both your natural language step and the commands Cypress ran. You can view the complete generated code at any time using the **Code** button in the Command Log.
98106

99107
4. **Cache for speed:** Generated code is cached. Re-running the same test does not re-call the AI model unless the prompt or DOM changes in a way that invalidates the cached code.
100108

@@ -138,7 +146,13 @@ cy.prompt(
138146
)
139147
```
140148

141-
Use the **Get code** button to view the generated Cypress code. This will display the generated code in a dialog where you can preview what Cypress generated from your prompt. You can save the code to your test file, commit it to your version control system, or copy it to your clipboard.
149+
After the test runs, click the **Code** button in the Command Log to view the generated Cypress code. This opens a dialog showing the complete Cypress commands that were generated from your natural language steps. From there, you can:
150+
151+
- **Save to file** - Replace your `cy.prompt` call with the generated code directly in your test file
152+
- **Copy to clipboard** - Copy the code for use elsewhere
153+
- **Review and modify** - Inspect the generated selectors and commands before committing
154+
155+
This workflow lets you use AI to quickly generate test code, then commit the exact generated code to your repository for predictable, version-controlled tests.
142156

143157
<DocsVideo
144158
src="/img/api/prompt/cy-prompt-demo.mp4"
@@ -170,6 +184,12 @@ cy.prompt([
170184
])
171185
```
172186

187+
Even when using `cy.prompt` for continuous testing, you can still view the generated code at any time. Click the **Code** button in the Command Log to see what Cypress generated, which is especially useful for:
188+
189+
- **Debugging** - Understanding why a test behaved a certain way
190+
- **Learning** - Seeing how natural language maps to Cypress commands
191+
- **Exporting later** - If you decide to switch to Workflow 1, you can export the code at any point
192+
173193
## How to write effective prompts
174194

175195
:::note
@@ -362,6 +382,57 @@ describe('Campaign Management', () => {
362382
})
363383
```
364384

385+
## Viewing and exporting generated code
386+
387+
At any time during or after a test run, you can view the exact Cypress code that `cy.prompt` generated from your natural language steps. This transparency is built into every `cy.prompt` execution.
388+
389+
### How to view generated code
390+
391+
- **Run your test** with `cy.prompt` in Cypress App
392+
- **Click the "Code" button** - This button appears next to each `cy.prompt` command in the Command Log
393+
394+
<DocsImage
395+
src="/img/api/prompt/cy-prompt-export-code.png"
396+
alt="Code button in the Command Log"
397+
/>
398+
399+
- **Review the generated code** - A dialog displays the complete Cypress code with all of the generated commands (e.g., `cy.get()`, `cy.click()`, `cy.type()`) and comments showing which prompt step generated each command.
400+
401+
<DocsImage
402+
src="/img/api/prompt/cy-prompt-generated-test-code.png"
403+
alt="Generated Cypress code dialog"
404+
/>
405+
406+
### What you can do with the generated code
407+
408+
Once you have the generated code, you can:
409+
410+
- **Save code to your test file** - Replace the `cy.prompt` call with the generated Cypress commands for predictable, version-controlled tests.
411+
- **Copy code to your clipboard** - Use the code in other files or share it with your team.
412+
413+
This helps you review and modify the generated code as needed or just use it as a reference to understand what `cy.prompt` is doing behind the scenes.
414+
415+
### Customizing selectors in generated code
416+
417+
You can customize which selectors `cy.prompt` uses when generating Cypress code by configuring the [ElementSelector API](/api/cypress-api/element-selector-api). This lets you control which attributes Cypress prioritizes (like `data-*`, `id`, `aria-label`, etc.) when creating selectors, ensuring the generated code matches your project's selector strategy.
418+
419+
Configure the selector priority in your support file or test file:
420+
421+
```javascript
422+
// cypress/support/e2e.js or in your test file
423+
Cypress.ElementSelector.defaults({
424+
selectorPriority: [
425+
'data-cy', // Prefer data-cy attributes
426+
'attribute:role', // Then ARIA roles
427+
'attribute:aria-label', // Then ARIA labels
428+
'id', // Then IDs
429+
'class', // Finally classes
430+
],
431+
})
432+
```
433+
434+
For more examples and details, see the [ElementSelector API documentation](/api/cypress-api/element-selector-api).
435+
365436
## Setup
366437

367438
### Enable the command

package-lock.json

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
51.8 KB
Loading
121 KB
Loading

0 commit comments

Comments
 (0)