Skip to content

Commit 07e3cef

Browse files
maticzavmaticzav
committed
Improve Seed BrowserUse Docs Example and Build
1 parent 1b88d9d commit 07e3cef

File tree

19 files changed

+437
-99
lines changed

19 files changed

+437
-99
lines changed

‎.env.example‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,7 @@ BROWSER_USE_API_KEY=""
33

44
# https://resend.com/
55
RESEND_API_KEY=""
6-
RESEND_FROM_EMAIL="[email protected]"
6+
7+
# NOTE: You can use `[email protected]`` to send email to your account in the testing phase.
8+
# We recommend you verify your domain when rolling out Use QA internally.
9+
RESEND_FROM_EMAIL="Example <[email protected]>"

‎Dockerfile‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
FROM node:23-alpine AS deps
2+
3+
RUN corepack enable && corepack prepare pnpm@latest --activate
4+
5+
WORKDIR /app
6+
COPY package.json pnpm-lock.yaml ./
7+
RUN pnpm install --frozen-lockfile
8+
9+
# Builder --------------------------------------------------------------------
10+
11+
FROM node:23-alpine AS builder
12+
13+
RUN corepack enable && corepack prepare pnpm@latest --activate
14+
15+
WORKDIR /app
16+
17+
COPY --from=deps /app/node_modules ./node_modules
18+
COPY . .
19+
20+
RUN pnpm build
21+
22+
# Runner ---------------------------------------------------------------------
23+
24+
FROM node:23-alpine AS runner
25+
26+
RUN corepack enable && corepack prepare pnpm@latest --activate
27+
28+
WORKDIR /app
29+
ENV NODE_ENV=production
30+
31+
32+
COPY --from=builder /app ./
33+
34+
EXPOSE 3000
35+
36+
CMD ["pnpm", "start"]

‎README.md‎

Lines changed: 218 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,227 @@
1-
# Use QA
1+
# 🎯 Use QA
22

3-
E2E QA testing example using BrowserUse, showcasing as many features of BrowserUse as possible, having a copy-pastable code that can easily be reused.
3+
**AI-Powered E2E Testing Platform** ✨
44

5-
# Set Up
5+
> A comprehensive, production-ready QA testing solution powered by BrowserUse AI agents. Automate your web application testing with intelligent agents that think, act, and validate like human testers—but faster, more consistently, and around the clock.
6+
7+
[![Docker](https://img.shields.io/badge/Docker-Ready-blue?logo=docker)](https://docker.com) [![BrowserUse](https://img.shields.io/badge/BrowserUse-Integrated-green)](https://browser-use.com) [![Next.js](https://img.shields.io/badge/Next.js-15-black?logo=next.js)](https://nextjs.org) [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?logo=typescript)](https://typescriptlang.org)
8+
9+
<p align="center">
10+
<img src="media/run.png" alt="Test Run in Progress" width="600px">
11+
</p>
12+
13+
## ✨ Key Features & Highlights
14+
15+
### 🤖 **AI-Powered Testing Engine**
16+
17+
- **Intelligent Agents**: Leverages BrowserUse with GPT-4o/o3 models for human-like testing
18+
- **Natural Language Tests**: Write test cases in plain English—no complex selectors needed
19+
- **Smart Evaluation**: AI agents validate end states against success criteria with precision
20+
- **Adaptive Execution**: Handles dynamic content, popups, and unexpected UI changes
21+
22+
### 🎯 **Advanced Test Management**
23+
24+
- **Test Suites**: Organize related tests into logical groups by domain or feature
25+
- **Step-by-Step Definitions**: Break down complex user journeys into clear, actionable steps
26+
- **Visual Test Editor**: Intuitive interface for creating and managing test scenarios
27+
- **Flexible Evaluation**: Define custom success criteria for any testing scenario
28+
29+
### ⏰ **Automated Scheduling & Monitoring**
30+
31+
- **Cron Integration**: Schedule test runs hourly, daily, or on custom intervals
32+
- **Real-time Execution**: Watch your tests run live with detailed step-by-step progress
33+
- **Complete Audit Trail**: Full history of all test runs with timestamps and results
34+
- **Status Tracking**: Monitor test suite health with comprehensive dashboards
35+
36+
### 📧 **Smart Notifications**
37+
38+
- **Instant Alerts**: Get notified immediately when tests fail via email
39+
- **Failure Details**: Receive detailed error reports with context and screenshots
40+
- **Team Collaboration**: Share test results and failures with your entire team
41+
- **Customizable Recipients**: Configure notifications per test suite
42+
43+
### 🛡️ **Enterprise-Grade Security**
44+
45+
- **Domain Restrictions**: Limit AI agents to specific allowed domains
46+
- **Proxy Support**: Built-in proxy integration for secure testing
47+
- **Ad Blocker**: Clean testing environment without distractions
48+
- **Encrypted Storage**: Secure handling of sensitive test data
49+
50+
## 🚀 Quick Start Guide
51+
52+
### Prerequisites
53+
54+
- 🐳 **Docker** & Docker Compose installed
55+
- 🔑 **BrowserUse API Key** (get yours at [browser-use.com](https://browser-use.com))
56+
- 📧 **Resend API Key** (optional, for email notifications)
57+
58+
### ⚡ 3-Step Setup
659

760
```bash
8-
# Clone repository
9-
git clone [email protected]:browser-use/use-qa.git
61+
# 1️⃣ Clone the repository
62+
git clone https://github.com/browser-use/use-qa.git
63+
cd use-qa
1064

11-
# Copy Environment Variables and Fill API Key
65+
# 2️⃣ Configure environment variables
1266
cp .env.example .env
67+
# Edit .env and add your API keys
1368

14-
# Start
69+
# 3️⃣ Launch the platform
1570
docker compose up
1671
```
72+
73+
🎉 **That's it!** Visit [http://localhost:3000](http://localhost:3000) to start creating your first test suite.
74+
75+
### 🔧 Environment Variables
76+
77+
Create a `.env` file with the following:
78+
79+
```env
80+
# Required: BrowserUse API Integration
81+
BROWSER_USE_API_KEY=your_browseruse_api_key_here
82+
83+
# Database Configuration
84+
DATABASE_URL=postgresql://postgres:postgres@postgres:5432/qa-use
85+
86+
# Optional: Email Notifications
87+
RESEND_API_KEY=your_resend_api_key_here
88+
89+
# Optional: Inngest Configuration (for production)
90+
INNGEST_SIGNING_KEY=your_inngest_signing_key
91+
INNGEST_BASE_URL=http://inngest:8288
92+
```
93+
94+
<p align="center">
95+
<img src="media/suite.png" alt="Test Suite Interface" width="600px">
96+
</p>
97+
98+
## 💡 How It Works
99+
100+
### 🎯 **Intelligent Test Execution**
101+
102+
1. **Define Your Test**: Write test steps in natural language
103+
104+
```
105+
Steps:
106+
1. Go to example.com
107+
2. Click the search button
108+
3. Type "laptop" in the search field
109+
4. Press enter and wait for results
110+
111+
Success Criteria:
112+
The page should show at least 3 laptop search results
113+
```
114+
115+
2. **AI Agent Takes Over**: BrowserUse AI agents execute your test
116+
- Navigate to pages like a human user
117+
- Interact with elements intelligently
118+
- Handle unexpected popups and dialogs
119+
- Adapt to layout changes and dynamic content
120+
121+
3. **Smart Validation**: AI evaluates results against your criteria
122+
- Checks final page state precisely
123+
- Compares actual vs. expected outcomes
124+
- Provides detailed pass/fail reports
125+
- Captures screenshots and recordings
126+
127+
### 🔄 **Automated Workflows**
128+
129+
- **Continuous Monitoring**: Schedule tests to run automatically
130+
- **Failure Detection**: Instant alerts when something breaks
131+
- **Historical Analysis**: Track test reliability over time
132+
- **Team Notifications**: Keep everyone informed of system health
133+
134+
## 🎯 Perfect Use Cases
135+
136+
### 🛒 **E-Commerce Testing**
137+
138+
- Product search and filtering
139+
- Shopping cart functionality
140+
- Checkout process validation
141+
- User account management
142+
143+
### 📊 **SaaS Application Testing**
144+
145+
- User onboarding flows
146+
- Feature functionality checks
147+
- Integration testing
148+
- Performance monitoring
149+
150+
### 🏢 **Enterprise Workflows**
151+
152+
- Critical business processes
153+
- Compliance validation
154+
- Multi-step form submissions
155+
- Dashboard and reporting features
156+
157+
### 🔄 **Regression Testing**
158+
159+
- Pre-deployment validation
160+
- Release confidence checks
161+
- Cross-browser compatibility
162+
- Mobile responsiveness testing
163+
164+
## 🚀 Getting Started with Your First Test
165+
166+
### 1. **Create a Test Suite**
167+
168+
- Navigate to the dashboard
169+
- Click "Create Suite"
170+
- Set your application domain (e.g., `example.com`)
171+
- Configure notification preferences
172+
173+
### 2. **Add Your First Test**
174+
175+
- Click "Add Test" in your suite
176+
- Write a descriptive test name
177+
- Add step-by-step instructions
178+
- Define success criteria
179+
180+
### 3. **Run and Monitor**
181+
182+
- Hit "Run Test" to execute immediately
183+
- Watch the live execution in real-time
184+
- Review results and recordings
185+
- Set up automated scheduling
186+
187+
### 4. **Scale Your Testing**
188+
189+
- Add more tests to your suite
190+
- Configure cron schedules
191+
- Set up team notifications
192+
- Monitor long-term trends
193+
194+
## 🤝 Contributing
195+
196+
We welcome contributions! This project showcases the full capabilities of BrowserUse and serves as a reference implementation for AI-powered testing platforms.
197+
198+
### Development Setup
199+
200+
```bash
201+
# Start development environment
202+
docker compose -f docker-compose.dev.yaml up --watch
203+
204+
# Run type checking
205+
pnpm run test:types
206+
```
207+
208+
## 📚 Resources & Links
209+
210+
- 🤖 **[BrowserUse Documentation](https://docs.browser-use.com)** - Learn about AI browser automation
211+
- 🌐 **[BrowserUse Cloud](https://cloud.browser-use.com)** - Try BrowserUse in your browser
212+
- 📧 **[Resend Documentation](https://resend.com/docs)** - Email integration guide
213+
- ⚡ **[Inngest Documentation](https://inngest.com/docs)** - Background job processing
214+
215+
## 📄 License
216+
217+
This project is open source and available under the [MIT License](LICENSE).
218+
219+
---
220+
221+
<div align="center">
222+
223+
**Built with ❤️ by the BrowserUse team**
224+
225+
[⭐ Star on GitHub](https://github.com/browser-use/use-qa) • [🐛 Report Bug](https://github.com/browser-use/use-qa/issues) • [💡 Request Feature](https://github.com/browser-use/use-qa/issues)
226+
227+
</div>

‎docker-compose.dev.yaml‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
services:
2+
app:
3+
build:
4+
context: .
5+
dockerfile: Dockerfile.dev
6+
develop:
7+
watch:
8+
- path: ./drizzle.config.ts
9+
target: /app/drizzle.config.ts
10+
action: sync+restart
11+
- path: ./package.json
12+
target: /app/package.json
13+
action: rebuild
14+
- path: ./next.config.ts
15+
target: /app/next.config.ts
16+
action: sync+restart
17+
- path: ./tsconfig.json
18+
target: /app/tsconfig.json
19+
action: sync+restart
20+
# NOTE: NextJS supports hot reloading for the src directory!
21+
- action: sync
22+
path: ./src
23+
target: /app/src
24+
25+
env_file:
26+
- .env
27+
environment:
28+
- DATABASE_URL=postgresql://postgres:postgres@postgres:5432/qa-use
29+
#
30+
- WATCHPACK_POLLING=true
31+
- CHOKIDAR_USEPOLLING=true
32+
#
33+
- INNGEST_DEV=1
34+
- INNGEST_BASE_URL=http://inngest:8288
35+
ports:
36+
- '3000:3000'
37+
depends_on:
38+
postgres:
39+
condition: service_healthy
40+
migrate:
41+
condition: service_completed_successfully
42+
networks:
43+
- qause-network
44+
45+
inngest:
46+
image: inngest/inngest
47+
command: 'inngest dev -u http://app:3000/api/inngest'
48+
ports:
49+
- '8288:8288'
50+
depends_on:
51+
- app
52+
networks:
53+
- qause-network
54+
55+
postgres:
56+
restart: always
57+
image: postgres:15
58+
healthcheck:
59+
test: ['CMD-SHELL', 'pg_isready -U postgres']
60+
interval: 5s
61+
timeout: 5s
62+
retries: 5
63+
64+
environment:
65+
- POSTGRES_USER=postgres
66+
- POSTGRES_PASSWORD=postgres
67+
- POSTGRES_DB=qa-use
68+
ports:
69+
- '5432:5432'
70+
volumes:
71+
- ./data/postgres:/var/lib/postgresql/data
72+
command: postgres -c max_connections=1000
73+
networks:
74+
- qause-network
75+
76+
migrate:
77+
build:
78+
context: .
79+
dockerfile: Dockerfile.dev
80+
command: pnpm drizzle-kit migrate --config ./drizzle.config.ts
81+
environment:
82+
- DATABASE_URL=postgresql://postgres:postgres@postgres:5432/qa-use
83+
depends_on:
84+
postgres:
85+
condition: service_healthy
86+
87+
develop:
88+
watch:
89+
- action: rebuild
90+
path: ./drizzle.config.ts
91+
target: /app/drizzle.config.ts
92+
- action: rebuild
93+
path: ./drizzle
94+
target: /app/drizzle
95+
96+
restart: on-failure
97+
networks:
98+
- qause-network
99+
100+
networks:
101+
qause-network:
102+
driver: bridge

0 commit comments

Comments
 (0)