FlowScribe - Help & Documentation

Getting Started

FlowScribe transforms your browser interactions into production-ready test scripts. Follow these simple steps to create your first test:

1

Navigate to Your Application

Open the web page you want to test in your browser.

2

Open FlowScribe

Click the FlowScribe icon in your browser toolbar to open the extension popup.

3

Select Your Framework

Choose your preferred testing framework: Playwright, Selenium, Cypress, or Puppeteer.

4

Start Recording

Click the "Start Recording" button. A floating indicator will appear on the page.

5

Perform Your Test Actions

Click buttons, fill forms, navigate pages - FlowScribe captures everything.

6

Stop & Generate Script

Click "Stop Recording", then "Generate Script" to create your test code.

✅

Pro Tip Your script is ready! Copy it to clipboard or export it as a file.

Recording Tests

What Gets Recorded

FlowScribe automatically captures a wide range of user interactions:

🖱️

Click Actions

Buttons, links, checkboxes, radio buttons, and any clickable elements

⌨️

Text Input

Form fields, text areas, search boxes, and contenteditable elements

📝

Form Interactions

Dropdowns, date pickers, sliders, file uploads, and form submissions

🔄

Navigation

Page loads, URL changes, back/forward navigation, and redirects

📜

Scrolling

Page scrolls and element scrolling within containers

🖼️

iFrame Support

Actions inside iframes are captured with proper context

Recording Controls

Button	Action	Description
Start Recording	Begin capture	Starts recording all user interactions on the current tab
Pause	Temporarily stop	Pauses recording without losing captured actions
Resume	Continue capture	Resumes recording from where you paused
Stop Recording	End capture	Stops recording and prepares actions for script generation

Recording Indicator

When recording is active, a floating indicator appears on your page:

Red pulsing dot - Recording is active
Action counter - Shows number of captured actions
Draggable - Move it anywhere on the page

Adding Assertions

Assertions validate that your application behaves correctly. FlowScribe provides a visual Assertion Builder to add checks to your tests.

✓

Assertions Tab

Access the Assertion Builder by clicking the "Assertions" tab in the FlowScribe popup.

Using the Element Picker

1

Click "Pick Element"

This activates the element picker mode on your page.

2

Hover Over Elements

Elements highlight in purple as you hover. A tooltip shows the element's selector.

3

Click to Select

Click the element you want to assert on. A confirmation message appears.

4

Configure Assertion

Reopen FlowScribe popup - the element data is automatically loaded. Choose your assertion type and value.

Assertion Types

Type	Description	Example Use Case
Visible	Element is visible on page	Verify success message appears
Hidden	Element is not visible	Verify loading spinner disappears
Has Text	Element contains specific text	Verify welcome message shows username
Has Value	Input field contains value	Verify form field is pre-filled
Enabled	Element is interactive	Verify submit button is clickable
Disabled	Element is not interactive	Verify button is disabled before form completion
Attribute	Element has specific attribute value	Verify link href, image src
Count	Number of matching elements	Verify 5 items in list

Assertion Builder Controls

Control	Description
Pick Element	Activates visual element picker on the page. Click any element to select it.
Manual Entry	Manually type a CSS selector instead of using the element picker.
Element Selector (CSS/XPath)	Choose selector type and enter or view the element selector string.
Assertion Type Buttons	Select what to verify: Visible, Hidden, Has Text, Has Value, Enabled, Disabled, Attribute, or Count.
+ Add Assertion	Adds the configured assertion to your test. Appears in the "Added Assertions" list below.
Clear	Resets the assertion form to start fresh.

Managing Assertions

The Added Assertions section at the bottom shows all assertions you've created:

View the count badge showing total assertions
See each assertion with its selector and type
Delete individual assertions using the trash icon
Assertions are automatically included in generated scripts

💡

Quick Assertion While recording, click the "Add Assertion" button to quickly add assertions without stopping your recording.

Script Generation

Generating Your Test Script

After recording, click "Generate Script" to create your test code. The script includes:

All recorded user interactions
Intelligent element selectors with fallbacks
Wait strategies for dynamic content
Your custom assertions
Framework-specific best practices

Script Options

📋

Copy to Clipboard

One-click copy of the entire script

💾

Export as File

Download as .js, .py, or .ts file

📁

Export with POM

Include Page Object Model classes

🔄

Export with CI/CD

Include workflow configuration files

Supported Frameworks

Framework	Language	Best For	Key Features
Playwright	JavaScript/TypeScript	Modern web apps, cross-browser	Auto-wait, multi-browser, trace viewer
Selenium	Python, Java, C#, JS	Enterprise, legacy browsers	Industry standard, WebDriver protocol
Cypress	JavaScript/TypeScript	Frontend testing, debugging	Time-travel debugging, automatic waiting
Puppeteer	JavaScript	Chrome automation, scraping	Direct Chrome DevTools Protocol access

Framework Selection

Choose your framework using either:

Quick Select Grid - Click the framework icon in the Record tab
Dropdown Menu - Select from the framework dropdown

AI Features

FlowScribe integrates with leading AI providers to enhance your test scripts with intelligent improvements.

Supported AI Providers

🤖

OpenAI

GPT-4.1, GPT-4.1-mini models for powerful script enhancement

🧠

Anthropic

Claude 3.5 Sonnet, Claude 3 Opus, Claude 3 Haiku

✨

Google AI

Gemini 1.5 Pro, Gemini 1.5 Flash

What AI Enhancement Does

Intelligent Selectors - Generates the most stable, maintainable selectors
Smart Assertions - Suggests additional assertions based on context
Code Optimization - Improves code structure and readability
Wait Strategies - Adds appropriate waits for dynamic content
Error Handling - Includes retry logic and error recovery

Setting Up AI

1

Open Settings

Click the gear icon in FlowScribe popup

2

Enable AI

Toggle "Enable AI Enhancement" switch

3

Select Provider & Model

Choose your AI provider and preferred model

4

Enter API Key

Paste your API key (encrypted and stored locally)

🔒

API Key Security Your API keys are encrypted using AES-GCM encryption and stored locally in your browser. They are never transmitted to our servers.

Settings & Configuration

Recording Options

Setting	Description	Default
Self-Healing	Generate fallback selectors that adapt to UI changes	Enabled
Network Recording	Capture API requests and responses	Enabled
POM Generation	Create Page Object Model classes	Enabled

CI/CD Integration

FlowScribe can generate configuration files for your CI/CD platform:

GitHub Actions - .github/workflows YAML files
GitLab CI - .gitlab-ci.yml configuration
Jenkins - Jenkinsfile pipeline scripts
Azure DevOps - azure-pipelines.yml
CircleCI - .circleci/config.yml

Advanced Features

Self-Healing Selectors

FlowScribe's self-healing technology generates multiple selector strategies for each element:

data-testid - Highest priority, most stable
#unique-id - Semantic IDs
[aria-label] - Accessibility attributes
[name] - Form element names
role + context - ARIA roles
Text content - Visible text
Smart XPath - Multiple fallbacks

Page Object Model (POM)

When enabled, FlowScribe automatically generates Page Object classes that:

Group related elements by page section
Create reusable interaction methods
Separate test logic from page structure
Follow framework-specific patterns

Network Recording

Capture and mock network requests:

REST API calls with request/response data
GraphQL operations with query names
Generate mock code for your framework

ℹ️

Manifest V3 Limitation Due to Chrome's Manifest V3 restrictions, request body capture may be limited for some requests.

History & Sessions

Access the History tab to:

View past recording sessions
Load previous recordings to continue work
Delete old sessions
Clear all history

Tips & Best Practices

For Better Recordings

Use data-testid attributes - Add data-testid="login-button" to key elements for the most stable selectors
Record at normal speed - Don't rush; let pages fully load between actions
Use pause/resume - Organize complex workflows into logical sections
Test multiple scenarios - Record both happy path and error cases

For Better Scripts

Review generated code - Always review and customize scripts before committing
Add meaningful assertions - Don't just record actions; validate outcomes
Use Page Objects - Enable POM generation for maintainable tests
Parameterize test data - Extract hardcoded values into variables

Selector Best Practices

💡

Selector Priority

FlowScribe prioritizes selectors in this order for maximum stability:

data-testid > id > aria-label > name > text > css

Troubleshooting

Common Issues

Recording doesn't start

Refresh the page and try again
Make sure you're not on a chrome:// or extension page
Check that the extension has permission for the site

Actions not being captured

Ensure the page is fully loaded before interacting
Check if you're interacting inside an iframe (supported but may need page reload)
Some shadow DOM elements may have limited capture

Element picker not working

The popup closes when you click - this is normal browser behavior
After clicking an element, reopen the popup to see the selected element
Press ESC to cancel element picker mode

Script generation fails

Check your AI API key is correct (if using AI enhancement)
Ensure you have recorded at least one action
Try disabling AI enhancement for template-based generation

Generated selectors don't work

Enable Self-Healing for fallback selectors
Add data-testid attributes to your application
Review and adjust selectors in the generated script

Browser Compatibility

Browser	Support	Notes
Chrome 88+	✅ Full	Recommended
Firefox 109+	✅ Full	Use Firefox build
Edge (Chromium)	✅ Full	Use Chrome build
Safari	❌ Not supported	No extension API

Support & Resources

Get Help

GitHub Issues: Report bugs or request features
Email Support: srewoo@gmail.com
Repository: github.com/srewoo/FlowScribe

Contributing

FlowScribe is open source! Contributions are welcome:

Fork the repository
Create a feature branch
Submit a pull request

🔒

Privacy First FlowScribe is designed with privacy in mind. All recordings are processed locally in your browser. Your data never leaves your machine unless you explicitly use AI services with your own API keys.

Version History

Version	Release	Highlights
2.1.0	Current	Assertion Builder, Element Picker, Firefox support, UI redesign
2.0.0	Previous	AI integration, Multi-framework support, Self-healing