Standalone Mode
Auto-Browse can be used independently of Playwright’s test framework, making it perfect for automation scripts, web scraping, or any browser-based tasks.
Overview
In standalone mode, Auto-Browse:
- Manages the browser lifecycle automatically
- Creates and configures pages
- Handles cleanup
- Provides a simple, natural language interface
Basic Usage
Here’s a simple example of using Auto-Browse in standalone mode:
import { auto } from "auto-browse";
async function main() {
try {
// Navigate to a website
await auto("go to https://example.com");
// Take a snapshot to analyze the page
await auto("take a snapshot");
// Perform actions using natural language
const heading = await auto("get the main heading text");
console.log("Main heading:", heading);
} catch (error) {
console.error("Error:", error);
}
}
main().catch(console.error);
A more complex example showing form automation:
import { auto } from "auto-browse";
async function automateForm() {
try {
// Navigate to the form
await auto("go to https://httpbin.org/forms/post");
// Take a snapshot to analyze the page structure
await auto("take a snapshot");
// Fill out form fields
await auto('type "John Doe" in the customer name field');
await auto('select "Large" for size');
await auto('select "Mushroom" for topping');
await auto('check "cheese" in extras');
// Submit and verify
await auto("click the Order button");
await auto("take a snapshot of the response page");
// Extract confirmation details
const confirmation = await auto("get the order confirmation text");
console.log("Order confirmed:", confirmation);
} catch (error) {
console.error("Error:", error);
}
}
automateForm().catch(console.error);
Running Scripts
To run standalone scripts:
# Using ts-node
npx ts-node your-script.ts
# Or using nodemon for development
npx nodemon your-script.ts
Best Practices
- Error Handling
try {
await auto("perform action");
} catch (error) {
// Handle specific error types
if (error.message.includes("element not found")) {
// Handle element not found
} else if (error.message.includes("timeout")) {
// Handle timeout
}
throw error;
}
- Taking Snapshots
// Take snapshots to help Auto-Browse understand the page
await auto("take a snapshot");
// Take named snapshots for reference
await auto('take a snapshot named "before-login"');
await auto('take a snapshot named "after-login"');
- Descriptive Commands
// Good - clear and specific
await auto('type "user@example.com" in the email field');
// Less clear
await auto('type "user@example.com" in input');
Common Use Cases
- Web Scraping
async function scrapeData() {
await auto("go to https://example.com/products");
await auto("take a snapshot");
// Get all product titles
const titles = await auto("get text of all product title elements");
// Get specific product details
const price = await auto('get the price for product "Example Item"');
}
- Site Testing
async function testSite() {
await auto("go to https://example.com");
// Check navigation
await auto("verify the main navigation menu is visible");
await auto("click the About link");
await auto("verify the URL contains /about");
// Test responsiveness
await auto("set viewport to mobile size");
await auto("verify the mobile menu button is visible");
}
- Data Entry Automation
async function enterData(records) {
for (const record of records) {
await auto("click the Add New button");
await auto(`type "${record.name}" in the name field`);
await auto(`type "${record.email}" in the email field`);
await auto("click Save");
await auto("verify success message is shown");
}
}
Next Steps