When you test autocomplete typeahead search, the hard part is the timing between typing, debounce, network results, keyboard focus, and selection. A search box may look simple, but suggestions can be virtualized, delayed, grouped, personalized, or hidden behind ARIA combobox behavior. BrowserBash lets you describe the search intent in English and verify that the right result appears and can be selected.
Why test autocomplete typeahead search is harder than a normal happy path
Autocomplete is asynchronous by design. The app waits for input, debounces requests, cancels stale results, renders suggestions, and handles keyboard or pointer selection. A brittle test may click the first suggestion before results update, or assert text from a previous query that stayed in the DOM. Some components render options in a portal outside the input container. Others use virtualized lists where only visible suggestions exist. The test needs to behave like a patient user, not a timer.
A selector-first script usually assumes the page is already in the right state. That assumption is fragile for autocomplete and typeahead search. Real users wait, retry, scroll, scan labels, notice errors, and correct themselves. BrowserBash starts closer to that user model. You give it a plain-English objective, and an AI agent drives a real Chrome or Chromium browser step by step. It is not replacing every low-level test you already have. It gives SDETs and AI-agent builders a validation layer that can exercise a flow the way a person describes it.
BrowserBash is free and open source under Apache-2.0, created by The Testing Academy and founded by Pramod Dutta. Install it with npm install -g browserbash-cli, then run browserbash. The current version is 1.5.1. Its strongest fit is end-to-end validation where the page can change shape but the user intent stays stable.
How BrowserBash helps you test autocomplete typeahead search
BrowserBash helps because the objective can name the search term, the expected suggestion, and the outcome after selection. The agent can type, wait for the visible result, choose it, and continue. Deterministic Verify steps can check the selected entity, route, heading, or summary. This is much more meaningful than asserting that a dropdown node exists.
The important distinction is that BrowserBash is not a selector recorder. You do not write page objects. You describe the business outcome and let the agent inspect the live page. Under the hood, it can use local Chrome by default, or providers such as CDP, Browserbase, LambdaTest, and BrowserStack. Stagehand is the default engine, and the builtin engine is available for the Anthropic tool-use loop and required for LambdaTest or BrowserStack.
The model story matters for test privacy. BrowserBash is Ollama-first, which means it defaults to free local models with no API keys and nothing leaving your machine. If a local Ollama model is not available, it can auto-resolve to ANTHROPIC_API_KEY, then OPENAI_API_KEY, then OpenRouter. For hard flows, very small local models around 8B parameters and under can be flaky on long multi-step objectives. A mid-size local model such as a Qwen3 or Llama 3.3 70B-class model, or a capable hosted model, is a more realistic choice.
npm install -g browserbash-cli
browserbash run "Open https://staging.example.com/customers, search for Acme Billing in the typeahead, select the Acme Billing result, and verify the customer profile opens"
For deeper examples, the BrowserBash learning center and BrowserBash tutorials are useful places to connect the concepts to working CLI usage.
Write a plain-English objective for test autocomplete typeahead search
A good typeahead objective includes the query and the exact expected option. If there are similar results, include context such as email, city, product SKU, or account ID. Avoid relying on first result unless ranking is the contract. If ranking is the contract, seed results so the expected order is deterministic.
A good objective names the start URL, the data you expect to use, the visible signals that matter, and the final state. Avoid wording that says only "make sure it works." That gives an agent too much freedom and gives a human reviewer too little information. Say what must be true when the flow succeeds.
For example, you can write the objective as a sentence for a quick local check, then move it into a committed markdown test once the flow becomes part of your release gate. BrowserBash writes a human-readable Result.md after each run, so the result is inspectable by a developer, tester, or AI coding agent.
A practical objective has three parts. First, describe the setup: account, environment, fixture, or saved login. Second, describe the action in user language. Third, describe the assertion in terms a product owner would recognize. That keeps the test stable when a CSS class changes, when a component moves, or when a team swaps one implementation detail for another.
Use markdown tests and variables without leaking secrets
Variables are useful for seeded names, SKUs, emails, and query prefixes. Use an API step to create a unique searchable record, then type a partial query through the UI. That proves the search index, debounce behavior, suggestion rendering, and selection path work together.
BrowserBash markdown tests are committable *_test.md files. They support @import composition and {{variables}} templating. Secret-marked variables are masked as ***** in every log line, which is the right default for credentials, temporary codes, API tokens, and customer-like fixture data.
In version 1.5.0, testmd v2 added version: 2 frontmatter. Steps execute one at a time against a single browser session. Two deterministic step types never touch a model: API steps for seeding data and Verify steps for checking UI state. Consecutive plain-English steps run as grouped agent blocks on the same page. v1 files without frontmatter behave as before. One caveat is important: testmd v2 currently drives the builtin engine, so it needs ANTHROPIC_API_KEY or an ANTHROPIC_BASE_URL compatible gateway. It does not yet run on Ollama or OpenRouter directly.
browserbash run-test site/tests/customer_typeahead_test.md --auth qa-user --agent
browserbash run-all site/tests --shard 2/4 --budget-usd 2.50
A v2 test can combine setup, intent, and deterministic assertions:
---
version: 2
auth: qa-user
---
GET https://staging.example.com/api/test-customers/create?name=Acme%20Billing Expect status 200, store $.id as 'customer_id'
Open https://staging.example.com/customers and type Acme Billing into the customer search box
Select the Acme Billing suggestion from the typeahead results
Verify URL contains "/customers"
Verify text "Acme Billing" is visible
The --agent flag emits NDJSON, one JSON event per line, with exit codes designed for automation: 0 for passed, 1 for failed, 2 for error, infrastructure failure, or budget stop, and 3 for timeout. AI coding agents do not need to parse prose. They can read structured events and the final verdict.
Make verification deterministic wherever possible
For autocomplete, deterministic assertions should happen after the suggestion is selected. Verify the destination URL, profile heading, selected pill, or form value. If the test only verifies that a suggestion appeared, it may miss broken selection behavior. If you need to test no-results, minimum-character thresholds, or debounce cancellation, write separate focused tests with clear expected text.
BrowserBash 1.5.0 introduced deterministic Verify assertions. Supported Verify steps compile to real Playwright checks rather than LLM judgment. That includes URL contains, title is or contains, visible text, a named button, link, or heading being visible, element counts, and stored value equality.
This is the difference between "the agent thinks the page looks right" and "the condition held in the browser." If a deterministic Verify step fails, the evidence is reported in run_end.assertions and in the assertion table in Result.md. If a Verify line falls outside the grammar, it can still run as agent-judged, but it is flagged with judged: true so you can separate deterministic checks from judgment-based checks.
For autocomplete and typeahead search, that split matters. Let the agent do the parts humans naturally do, such as recognizing a visible control or moving through a changing interface. Let deterministic assertions own the final gate wherever the condition can be expressed as URL, title, text, count, or stored value.
Handle authentication and session setup cleanly
Search suggestions are often permission-scoped. A sales user, admin, and customer success user may see different results. Saved auth lets you run the same search journey under the right role. Use isolated fixture records so a real customer name does not collide with a test suggestion.
Saved logins reduce noise in tests that should not spend half their time logging in. With BrowserBash 1.5.0, browserbash auth save <name> --url <login-url> opens a browser. You log in once, press Enter, and BrowserBash saves the Playwright storageState. Reuse it with --auth <name> on run, testmd, run-all, and monitor, or with auth: frontmatter in a test file.
A useful safety detail is that a profile whose saved origins do not cover the target start URL prints a warning instead of silently doing nothing. That helps when staging, preview, and production domains look similar but do not share browser storage.
Save the profile with browserbash auth save qa-user --url https://staging.example.com/login, then reuse it with browserbash run "Open the customer search page and verify the global search input is visible for the saved QA account" --auth qa-user --viewport 1280x720.
For teams adopting BrowserBash across more flows, the BrowserBash features, BrowserBash blog, and open-source GitHub repo give you a quick way to check what is local, what is optional cloud dashboard, and what is implemented in the open.
Run test autocomplete typeahead search in CI and agent workflows
Autocomplete tests are valuable in CI because search components break during refactors of debounce logic, portals, keyboard handling, or API contracts. Keep the flow short. Use seeded records and deterministic Verify steps. The NDJSON agent output helps CI and AI coding agents understand whether the failure happened while waiting for results, selecting an option, or verifying the destination.
The MCP server added in 1.5.0 makes BrowserBash usable from AI coding agents without wrapping the CLI yourself. browserbash mcp serves the CLI over the Model Context Protocol on stdio. You can add it to an MCP host with claude mcp add browserbash -- browserbash mcp, with the same idea applying to Cursor, Windsurf, Codex, and Zed. BrowserBash is also listed on the official MCP Registry as io.github.PramodDutta/browserbash.
The MCP tools are intentionally small: run_objective for one plain-English objective, run_test_file for a *_test.md file, and run_suite for a folder in parallel. Each returns structured verdict JSON with status, summary, final_state, assertions, cost_usd, and duration_ms. A failed test is a successful validation. The tool call succeeds, and the agent reads the verdict instead of guessing.
For CI, BrowserBash includes action.yml at the repo root. It installs the CLI, runs the suite, uploads JUnit, NDJSON, and result artifacts, supports shard: matrix jobs and budget-usd:, and posts a self-updating PR comment with the verdict table. The GitHub Action guide explains the setup details.
Monitor the flow without noisy alerts
A lightweight monitor can protect critical searches such as customer lookup, SKU lookup, or documentation search. Use a stable seeded or public record and stop after verifying the destination. Do not monitor broad free-text search that changes daily unless the expected result is controlled.
Monitor mode is useful when autocomplete and typeahead search has a history of breaking after deployments, provider changes, or design-system updates. browserbash monitor <test|objective> --every 10m --notify <webhook> runs on an interval and alerts only on pass to fail or fail to pass state changes. It does not page the team on every green run. Slack incoming-webhook URLs get Slack formatting automatically, while other URLs receive the raw JSON payload.
The replay cache also matters for monitoring cost. A green run records its actions. The next identical run replays them with zero model calls, and the agent steps back in only when the page changed. That makes an always-on monitor much more practical than a naive AI agent that spends tokens every ten minutes for the same unchanged screen.
Cost governance gives you another guardrail. run_end carries a cost_usd estimate from a bundled per-model price table. Unknown models get no estimate rather than a fake number. run-all --budget-usd 2.50 or --budget-tokens stops launching new tests after the suite crosses the budget. Remaining tests are reported as skipped, the suite exits 2, and spend lands in RunAll-Result.md and JUnit properties.
When to choose this approach, and when not to
Choose BrowserBash when the risk is the end-to-end search experience: typing, waiting, seeing the right suggestion, selecting it, and landing in the right state. Choose unit tests for debounce helpers, ranking functions, query builders, and keyboard reducer logic. Choose API tests for search indexing and permissions if you need exact result sets.
Choose BrowserBash when the user journey matters more than implementation details. It is a strong fit when your team wants to express tests in product language, when AI coding agents need an independent browser verdict, or when selectors are expensive to maintain because the UI is still moving.
Keep lower-level tests where they are cheaper and more precise. A pure unit test is better for date math, permission predicates, parser behavior, or API schema validation. A hand-written Playwright test can still be the best tool when you need exact control of a browser primitive or a highly specialized assertion. BrowserBash is the validation layer on top of those checks, especially for flows that benefit from natural language intent and structured verdicts.
Do not treat any AI browser agent as magic. Be explicit about data, expected state, and boundaries. Use deterministic Verify steps for the final gate. Use saved auth instead of repeatedly exercising login unless login is the subject of the test. Pick a capable model for long journeys. Those choices are what turn a flashy demo into a test you can run before a merge.
Practical checklist before you add the test
Before adding a typeahead test, choose a unique query and expected option. Decide whether selection should happen by mouse, keyboard, or either. Seed data when possible. Then assert the state after selection, because a visible suggestion alone does not prove the workflow works.
Before committing a autocomplete and typeahead search test, run through a short checklist. Is the start state controlled? Are variables used for environment-specific values? Are secrets masked? Is the final assertion deterministic? Does the test explain what failure means? Can it run in CI without a person present, or is it intentionally an interactive smoke check?
For BrowserBash specifically, decide whether the flow belongs in a single objective, a *_test.md file, or a suite. Use --viewport for a single responsive size, and use --matrix-viewport 1280x720,390x844 when the same test should run across desktop and mobile widths. Use run-all --shard 2/4 when parallel CI machines need deterministic slices based on sorted discovery order.
If you are migrating from Playwright, browserbash import <specs-or-dir> can convert many specs into plain-English *_test.md files deterministically, with no model involved. It handles common goto, click, fill, press, check, selectOption, getBy locators, and common expects. Anything untranslatable goes to IMPORT-REPORT.md instead of being dropped or invented. The recorder is useful for new manual discovery: browserbash record <url> opens a visible browser, lets you click through once, and writes a plain-English test when you stop it.
For typeahead components, always decide whether you are testing search relevance or selection mechanics. If relevance is the contract, seed a known set of records and verify the expected option appears in the right position. If selection is the contract, use a unique record and assert the destination after choosing it. Debounced search can also fail when stale results win a race, so include enough of the query to avoid ambiguity and wait for the specific visible suggestion. When keyboard access matters, write a separate objective for arrow-key selection and confirmation instead of mixing pointer and keyboard behavior in the same test. For global search, separate navigation from suggestion quality. One test can prove that selecting a seeded customer opens the right profile. Another can prove that an empty query, short query, or no-results query shows the right message. That separation keeps failures readable. It also prevents a flaky search ranking change from hiding a real bug in selection, routing, or keyboard focus. Finally, capture the exact query string in the test name or description so future failures can be reproduced without guessing what the agent typed.
FAQ
How do I test autocomplete with debounced search?
Type a specific query, wait for the expected visible suggestion, select it, and verify the resulting state. BrowserBash expresses that in plain English and uses real browser behavior. Avoid fixed sleeps when a visible condition is available.
What should I verify in a typeahead test?
Verify the selected result after the user chooses it: destination page, selected pill, form value, or heading. Suggestion visibility is useful, but it is not the whole workflow. Selection bugs are common.
Can BrowserBash test keyboard selection in autocomplete?
Yes, you can describe keyboard-oriented behavior in the objective when it matters. Keep the expected option and final state explicit. For detailed key reducer logic, use lower-level component tests too.
How do I avoid flaky autocomplete tests?
Use seeded records, unique query terms, and deterministic final assertions. Avoid relying on changing production search rankings. Pick a capable model when the UI has multiple similar suggestions.
Ready to try it locally? Install BrowserBash with npm install -g browserbash-cli, then run a plain-English browser check from your terminal. You can also sign up, and an account is optional because the CLI and local dashboard work without one.