Skip to main content

Your First Test

Write effective tests using natural language descriptions.

Good Test Descriptions​

Specific and actionable:

✅ "Test user can log in with email and password"
✅ "Check shopping cart updates when adding products" 
✅ "Verify contact form submits successfully"

Too vague:

❌ "Test the app"
❌ "Make sure everything works"
❌ "Check the website"

Step-by-Step First Test​

1. Start Your App​

npm run dev  # or your start command

Confirm it's running at http://localhost:3000

2. Create the Test​

  1. In VS Code, press Cmd+Alt+C
  2. Enter: "Test the homepage loads and shows navigation"
  3. Click "Run Test"

3. Watch It Execute​

  • Progress appears in VS Code notifications
  • AI analyzes your page structure
  • Browser actions happen remotely
  • Results compile automatically

4. Review Results​

Check the Test Results panel for:

  • Pass/Fail status
  • Screenshot of final page state
  • Execution log showing AI decisions
  • Performance metrics (load time, elements found)

Writing Better Tests​

Include User Context​

✅ "Test new user registration flow"
✅ "Test existing user login with valid credentials"
✅ "Test guest checkout process"

Specify Expected Outcomes​

✅ "Test login redirects to dashboard after success"
✅ "Test form shows error message for invalid email"
✅ "Test cart icon updates count when adding items"

Test User Journeys, Not Just Pages​

✅ "Test complete purchase flow from product page to confirmation"
✅ "Test user can create account, login, and update profile"

Common Patterns​

"Test main navigation menu works on desktop"
"Test mobile hamburger menu opens and closes"
"Test breadcrumb navigation on product pages"

Form Testing​

"Test contact form with valid data submits successfully"
"Test registration form shows validation errors"
"Test password reset form sends confirmation email"

Content Testing​

"Test product listings display correctly with images and prices"
"Test blog post loads with comments and sharing buttons"
"Test search results show relevant products"

Understanding Test Results​

Success Indicators​

  • ✅ Green status in Test Results panel
  • Screenshot matches expected page
  • No error messages in execution log
  • Performance within acceptable range

Failure Analysis​

  • ❌ Red status with specific failure reason
  • Screenshot shows error state or unexpected page
  • Execution log explains where AI got stuck
  • Suggestions for test improvement

Next Steps​

Test multiple flows: Try testing login, search, form submission

Review patterns: Look at successful tests to understand what works

Iterate descriptions: Refine vague tests to be more specific

Ready for more? Learn about Understanding Results to get the most from your tests.