Smoke Testing Web Apps: A Practical Guide

Smoke tests are quick, shallow checks that verify a web app’s most critical paths still work after a change. They catch broken builds early—before deeper testing or release—and give you confidence that the app isn’t on fire. This guide walks you through writing meaningful smoke tests that are fast to run and easy to maintain, without turning them into a second full test suite.

What You’ll Need

• A web app with a URL you can access (local or staging).
• A test framework: Playwright, Cypress, Selenium, or even a simple script with a headless browser. Pick one you already use.
• Basic knowledge of your app’s user flows: login, main pages, key actions.
• Access to the codebase where tests will live (or a separate test repo).
• Optional: a CI/CD pipeline to run tests automatically on each deploy.

Step-by-Step

1. Start with a checklist of critical user journeys. Write down the 5–10 actions that, if broken, would make your app unusable. Examples: user can log in, dashboard loads, search returns results, add-to-cart works, checkout completes. Keep this list short—smoke tests are not exhaustive.
2. Choose a tool and set it up. If you’re new, Playwright is a solid choice because it’s fast, cross-browser, and has a simple API. Install it, create a test file, and configure a base URL for your app.
3. Write the first test for the most critical path. Start with the login page (if you have one). In your test, navigate to the login URL, fill in valid credentials (use test accounts, not real ones), submit, and assert that the user lands on the dashboard or home page. This verifies the app boots, the server responds, and auth works.
4. Add a test for each checklist item. For each journey, write a test that performs the minimal steps and asserts one key outcome. For example, for a search feature: go to home page, type a query, press Enter, assert that results appear. Don’t test every edge case—just the happy path.
5. Make tests independent. Each test should be able to run alone. Don’t rely on state from a previous test. Use setup/teardown to create fresh data (e.g., a new user) or reset the database. This prevents one failure from cascading.
6. Use data-testid attributes for stable selectors. Instead of CSS classes that change often, add data-testid="login-button" to key elements. This makes tests resilient to styling changes.
7. Set short timeouts and explicit waits. Smoke tests should fail fast. Use explicit waits for elements that appear after async requests (e.g., wait for a spinner to disappear). Avoid hard-coded sleeps.
8. Run the tests locally. Execute the test suite against your local or staging environment. Ensure all tests pass before moving on.
9. Integrate into CI/CD. Add a step in your pipeline to run smoke tests after deployment. If a test fails, the pipeline should fail, blocking the release. This is the core value of smoke tests.
10. Review and prune regularly. Every few weeks, revisit your tests. Remove ones that no longer reflect critical paths, and add new ones for features that have become essential.

Common Mistakes

• Testing too much. Smoke tests that check every button and validation message become slow and brittle. Stick to the critical paths.
• Hard-coding data that changes. Using real user accounts or specific product IDs can break tests when data changes. Use dedicated test fixtures.
• Ignoring flaky tests. If a test fails intermittently, fix it immediately. Flaky tests erode trust and get ignored.
• Relying on visual selectors. CSS classes and XPaths tied to layout break often. Use semantic attributes like data-testid.
• No teardown. Tests that leave behind data can interfere with other tests. Always clean up after yourself.

Tips

• Keep each test under 30 seconds. If it takes longer, you’re probably testing too much.
• Run smoke tests in parallel to save time, but ensure they’re isolated.
• Use environment variables for credentials and URLs, never hard-code secrets.
• Write tests that are readable: use descriptive test names and comments where needed.
• Start with 3–5 tests if you’re new. Expand only after they’re stable.

Troubleshooting

• Tests pass locally but fail in CI. Check for differences in environment (e.g., base URL, network access, database state). Ensure CI has the same test data and environment variables.
• Element not found. Use the browser’s dev tools to inspect the element. Confirm the selector is correct and that the element is not inside an iframe or shadow DOM. Update the selector or add a wait.
• Test is flaky. Add explicit waits for the specific condition you need (e.g., element visible, text present). Avoid waiting for fixed times. If it’s still flaky, check for race conditions in your app.
• Login fails in test but works manually. You might be using the wrong test account, or the account is locked. Verify the credentials and that the account is active.
• Tests are too slow. Reduce the number of tests, use parallel execution, or stub external APIs if they’re not part of the critical path.

Frequently Asked Questions

How many smoke tests should I have?

Enough to cover your critical paths—typically 5–15. If you have more than 20, you’re likely drifting into functional test territory.

Should smoke tests run on every commit or only on deploy?

On every deploy is a good baseline. Running on every commit can be too slow, but you can run a subset on pull requests.

Can I use smoke tests for a mobile app?

Yes, but this guide focuses on web apps. For mobile, use tools like Appium or Detox, and adapt the principles.

How do I handle tests that need a database?

Use a test database with seeded data, or mock the database layer. Ensure your test setup creates a clean state.

What’s the difference between smoke tests and sanity tests?

Smoke tests verify the build is stable enough for deeper testing. Sanity tests are a subset of regression tests run after a specific change. In practice, they’re often used interchangeably.

Do I need to write smoke tests if I already have unit tests?

Yes. Unit tests check individual components, but smoke tests verify that the whole system integrates and runs. Both are valuable.

Related

• Xfinity Modem Activation: Setup Steps & Fixes
• Windows Task Manager: How to Use It Like a Pro
• Install Maven on Mac: Step-by-Step Guide