KoreaDevKNOWLEDGE SHARING

Content typeLearn

AI SOFTWARE DEVELOPMENT · 06 / 10

Testing and AI development quality

Divide the defects that each layer can detect, from type checks through unit, integration, contract, and browser E2E tests, and close the AI correction loop with release evidence.

Difficulty
Practical
Structure
Lessons 8 · Labs 2 · Assessment

CORE UNIT 1 / 1

Testing and AI development quality

Divide the defects that each layer can detect, from type checks through unit, integration, contract, and browser E2E tests, and close the AI correction loop with release evidence.

Difficulty
Practical
Structure
Lessons 8 · Labs 2 · Assessment

Diagrams and tables: composed by the author using each lesson's official primary sources. Find the originals and review dates at the end of that lesson.

NEW HIRE ONBOARDING

Start in the order you would receive your first assignment

So that even a new hire with no prior IT background can follow along, we start with the situation, the task, the evidence, and when to report, before difficult definitions.

  1. 01

    Read the situation in one sentence

    The payment-button test only checks whether a `button` exists. The actual defect is that clicking twice creates two orders.

  2. 02

    Today's assignment

    Distinguish the defects each testing layer finds from those it misses.

  3. 03

    Evidence that shows the work is complete

    Reverse response order and finish the old request with success and failure separately; verify that current results and feedback remain intact.

  4. 04

    When to stop and ask a senior colleague

    Duplicate fixtures, slow suites, and drift across environments must be managed.

Unpack unfamiliar terms first

Boundaries of type, unit, integration, and E2E tests
Testing layers are not a hierarchy; they are defenses that catch different failures where detection is less costly.
Unit tests and determinism
A good unit test does not copy implementation lines; it quickly isolates inputs and observable contracts.
API·schema·integration test
The purpose of an integration test is to verify not merely that components exist but that they understand the same contract.

Questions for this course

Why did it change, and what must be verified?

Do not merely memorize a technology's advantages; check the conditions under which they hold and the new failure boundaries they introduce.

OBSERVABLE OUTCOMES

What you can do after this course

  1. Distinguish the defects each testing layer finds from those it misses.
  2. Design Playwright assertions around user-observable behavior and use isolated test data.
  3. Perform the AI coding quality loop, from reproducing the failure to re-verifying under the same conditions.

PREREQUISITE CHECK

Three things to check before reading

This is not a test of memorized answers. Think about each question first, then open the explanation to review the foundational concepts used in this course.

1Is the test proof that the code is correct?

It is evidence that the selected inputs and observations matched expectations. Missing conditions and incorrectly specified expectations remain outside what the passing test establishes.

2Is it enough to choose only one: unit tests or E2E tests?

Fast, narrow tests and real integration paths find different defects, so combine them according to risk.

3Is it acceptable for a flaky test to pass after rerunning it?

Hiding the cause undermines release confidence. Isolate time, shared state, network, and selectors to restore a deterministic signal.

TEXTBOOK GUIDE

Main text that covers each concept from its background to the criteria for judging it

We explain the material section by section so readers new to IT can connect causes and effects without memorizing terms.

CONCEPT FLOW

How the chapters connect

The chapters are not isolated short answers to memorize. Follow them from left to right to see how each chapter's concepts support the next decision.

  1. 1.Boundaries of type, unit, integration, and E2E tests
  2. 2.Unit tests and determinism
  3. 3.API·schema·integration test
  4. 4.Verify user behavior with Playwright
  5. 5.AI correction loop and release gate
  6. 6.Separate the source of expected answers from the implementation
  7. 7.Diagnose intermittent failures with evidence rather than retry counts
  8. 8.Verify that late responses cannot overwrite the latest user choice
Testing and AI development quality: the overall map. If you lose track while reading the detailed explanations and chapters below, return to this sequence.
Figure 6-1. Testing and AI development quality: concept developmentShows how each chapter’s choices and limits lead to the problems of the next chapter.
  1. 1
    Boundaries of type, unit, integration, and E2E tests

    Testing layers are not a hierarchy; they are defenses that catch different failures where detection is less costly.

  2. 2
    Unit tests and determinism

    A good unit test does not copy implementation lines; it quickly isolates inputs and observable contracts.

  3. 3
    API·schema·integration test

    The purpose of an integration test is to verify not merely that components exist but that they understand the same contract.

  4. 4
    Verify user behavior with Playwright

    Browser tests wait and assert around user-recognized roles, labels, and outcomes rather than CSS selectors.

  5. 5
    AI correction loop and release gate

    If AI wrote a test, that test must also be verified with independent evidence and intentional failures.

  6. 6
    Separate the source of expected answers from the implementation

    A test that copies a calculation can approve the same error; derive expected values independently from requirements.

  7. 7
    Diagnose intermittent failures with evidence rather than retry counts

    Preserve the first failure state and timing so reruns do not erase the cause.

  8. 8
    Verify that late responses cannot overwrite the latest user choice

    The correct asynchronous UI result belongs to the current selection, not necessarily the last response to arrive.

CONTROLLED EXPLANATION

Decision flow for discarding a late search error

Current state: Old request: sea

Decision flow for discarding a late search error

Source: author-designed from official Playwright testing principles. Read request order separately from response order in this simulated search.

Input changesB success arrives firstA error arrives laterDiscard stale response1Old request: sea2Current request: mountain3Mountain results shown4A’s late error5Current result preserved
  1. Old request: sea

    Hold request A’s response.

  2. Current request: mountain

    Record request B as current.

  3. Mountain results shown

    Verify B succeeds and loading ends.

  4. A’s late error

    Its identity differs from current B.

  5. Current result preserved

    Mountain results and feedback remain.

1 → 2
Input changes
2 → 3
B success arrives first
3 → 4
A error arrives later
4 → 5
Discard stale response

Arrows show arrival order controlled by the test. The final node is the user state that must survive the stale error.

CONCRETE CASES

Selection criteria for all courses

TABLE 6-1

Selection criteria for all courses

Compare the technology in each chapter by how it works, the new costs it adds, and the evidence to check, not by its name.

Table 6-1. Testing and AI development quality: design decision criteria
.Core mechanismCosts to watchEvidence to check
1. Boundaries of type, unit, integration, and E2E testsLayers fast feedback at small scope with real integration evidence at broad scope.Duplicate fixtures, slow suites, and drift across environments must be managed.For each recent defect, classify which gate should have caught it first and find the missing boundaries.
2. Unit tests and determinismControls dependencies and narrows the input-output contract to produce fast, reproducible failures.Excessive mocking and coupling to the implementation create false stability and maintenance costs.Introduce mutations or deliberate defects to confirm that the test actually fails.
3. API·schema·integration testRuns real boundary serialization and state transitions in an isolated environment.Environment startup time, fixture drift, and external service instability add cost.Run important contracts against old-consumer/new-provider and new-consumer/old-provider combinations.
4. Verify user behavior with PlaywrightThe browser executes real DOM, events, and network requests, then asserts until the expected user-visible outcome appears.It introduces slow execution, data isolation, and environment dependencies.Verify the same journey with keyboard, mobile viewport, slow responses, and error responses.
5. AI correction loop and release gateReproducible commands and immutable revisions link code changes to observable results.Reducing suite costs and false positives requires ownership and ongoing cleanup.Introduce mutations into the test itself and verify that the requirement and an independent oracle catch the failure.
6. Separate the source of expected answers from the implementationA requirement-derived table of inputs and expected values breaks shared mistakes between implementation and tests.Policy-owner review takes time, and ambiguous policy must be clarified before code.Build the shipping-policy boundary table and identify which row fails when the comparison is wrong.
7. Diagnose intermittent failures with evidence rather than retry countsLinking the first divergence to shared resource identifiers can expose a race hidden behind a timeout.Diagnostic artifacts can expose account data, so use pseudonymous fixtures and restricted access.Compare parallel runs with shared and isolated accounts and identify the first request that diverges.
8. Verify that late responses cannot overwrite the latest user choiceComparing current and responding request identities at the state-update boundary blocks stale overwrites.Cancellation and discard logic add complexity, requiring request lifetimes and error states to be designed together.Reverse response order and finish the old request with success and failure separately; verify that current results and feedback remain intact.

CHAPTER 1 / 8

Boundaries of type, unit, integration, and E2E tests

Testing layers are not a hierarchy; they are defenses that catch different failures where detection is less costly.

Why this concept became necessary

A type check verifies value shapes, unit tests verify small computations, integration tests verify module, database, and API contracts, and E2E tests verify the flows users see in a real browser. Even if the lower layers pass, serialization and deployment settings at the upper boundaries can still be wrong.

Writing every case as an E2E test is slow and makes causes hard to isolate, while relying only on mocked unit tests misses real integration errors. Place fast tests at the lowest layer where a defect first appears, and cover core journeys through real boundaries.

Figure 6-2. Boundaries of type, unit, integration, and E2E tests: decision flowThe chain from the problem conditions through the working principle to verification evidence.
Problems and selection criteria

Testing layers are not a hierarchy; they are defenses that catch different failures where detection is less costly.

How it works

Layers fast feedback at small scope with real integration evidence at broad scope.

Verification evidence

For each recent defect, classify which gate should have caught it first and find the missing boundaries.

Follow it through a concrete system

Unit tests can quickly check boundary values in a tax-calculation function, but incorrectly serialized monetary units in JSON or a migration missing a column emerge at integration boundaries. Browser E2E checks the full path from the user clicking a button to seeing the final result, but narrowing the cause of failure is costly. Instead of duplicating the same defect checks across all layers, distinguish the least costly detection layer from the critical journeys that must be protected.

When designing testing layers, examine where recent incidents escaped detection rather than asking what percentage should be unit tests. If types were correct but authorization was missing, contract and abuse tests are needed. If the API was correct but submission through the keyboard failed, browser tests are needed. Update the defect classification regularly so the suite follows actual risk.

Selection criteria and failure boundaries

Duplicate fixtures, slow suites, and drift across environments must be managed.

Misconceptions to avoid: It is incorrect to assume that the test pyramid means a fixed ratio or a ban on E2E tests.

Verify it yourself

For each recent defect, classify which gate should have caught it first and find the missing boundaries.

What to judgeLayers fast feedback at small scope with real integration evidence at broad scope.

To summarize this chapter

Testing layers are not a hierarchy; they are defenses that catch different failures where detection is less costly.

Official sources for this chapter

The technical facts in the text were reviewed against the following primary sources. The author reconstructed the diagrams and comparisons using these materials.

  1. Microsoft, 「Playwright Best PracticesReview date 2026-08-28 · Scope Latest official documentation

CHAPTER 2 / 8

Unit tests and determinism

A good unit test does not copy implementation lines; it quickly isolates inputs and observable contracts.

Why this concept became necessary

Making time, randomness, global state, and the network explicit dependencies lets the same input produce the same result. Tabulate boundary values, invalid inputs, and invariants, and state the expected behavior in each test name.

When a Mock specifies internal call order too precisely, safe refactors can fail tests while incorrect actual results can still pass. Verify pure calculations by their values and boundary adapters with contracts and small integration tests.

Figure 6-3. Unit tests and determinism: decision flowThe chain from the problem conditions through the working principle to verification evidence.
Problems and selection criteria

A good unit test does not copy implementation lines; it quickly isolates inputs and observable contracts.

How it works

Controls dependencies and narrows the input-output contract to produce fast, reproducible failures.

Verification evidence

Introduce mutations or deliberate defects to confirm that the test actually fails.

Follow it through a concrete system

An expiration function that reads the current time directly returns different results depending on when the test runs. Passing the clock in as a dependency lets you repeat just before expiration, the exact boundary, and after expiration with the same values. Random IDs, environment variables, and global caches must be controlled the same way to separate code failures from environmental ones.

Mocks are useful for blocking external payment calls, but checking only how many times an internal helper was called just duplicates the implementation. First verify user-observable contracts such as inputs, returned business results, and stored state, and supplement the adapter itself with contract tests close to the real protocol. If a test keeps passing after a mutation is introduced, an important assertion is missing regardless of the coverage number.

Selection criteria and failure boundaries

Excessive mocking and coupling to the implementation create false stability and maintenance costs.

Misconceptions to avoid: 100% line coverage does not verify every meaningful path.

Verify it yourself

Introduce mutations or deliberate defects to confirm that the test actually fails.

What to judgeControls dependencies and narrows the input-output contract to produce fast, reproducible failures.

To summarize this chapter

A good unit test does not copy implementation lines; it quickly isolates inputs and observable contracts.

Official sources for this chapter

The technical facts in the text were reviewed against the following primary sources. The author reconstructed the diagrams and comparisons using these materials.

  1. Microsoft, 「Playwright AssertionsReview date 2026-08-28 · Scope Latest official documentation
  2. Microsoft, 「TypeScript HandbookReview date 2026-08-28 · Scope Latest official documentation

CHAPTER 3 / 8

API·schema·integration test

The purpose of an integration test is to verify not merely that components exist but that they understand the same contract.

Why this concept became necessary

Verify that the provider and consumer use status, schema, error, auth, and version with the same meaning. Test database migrations under rollout conditions where old and new code versions coexist, and test whether rollback is possible.

A test container or temporary database isolates data while exercising actual engine behavior. Do not use a production dump as is; validate constraints and query plans with minimal fixtures and anonymized representative cases.

Figure 6-4. API·schema·integration test: decision flowThe chain from the problem conditions through the working principle to verification evidence.
Problems and selection criteria

The purpose of an integration test is to verify not merely that components exist but that they understand the same contract.

How it works

Runs real boundary serialization and state transitions in an isolated environment.

Verification evidence

Run important contracts against old-consumer/new-provider and new-consumer/old-provider combinations.

Follow it through a concrete system

If a consumer expects `status: "paid"` but the provider changes the enum to `completed`, both JSON schemas can be individually valid yet fail when used together. Contract tests must compare actual consumer expectations and provider responses by version. Error statuses, retry headers, pagination, and authorization are as much part of the contract as normal responses.

Database changes in particular involve a time dimension. You may need to add a nullable column first, confirm that old and new code can both read and write, and enforce not-null only after the backfill finishes. Migration tests must cover not just an empty database but existing data of representative size, reruns after interruption, and rollback conditions before they can justify a production deployment.

Selection criteria and failure boundaries

Environment startup time, fixture drift, and external service instability add cost.

Misconceptions to avoid: It is incorrect to assume that identical schema files make the consumer and provider compatible.

Verify it yourself

Run important contracts against old-consumer/new-provider and new-consumer/old-provider combinations.

What to judgeRuns real boundary serialization and state transitions in an isolated environment.

To summarize this chapter

The purpose of an integration test is to verify not merely that components exist but that they understand the same contract.

Official sources for this chapter

The technical facts in the text were reviewed against the following primary sources. The author reconstructed the diagrams and comparisons using these materials.

  1. Microsoft, 「TypeScript HandbookReview date 2026-08-28 · Scope Latest official documentation
  2. Microsoft, 「Playwright Best PracticesReview date 2026-08-28 · Scope Latest official documentation

CHAPTER 4 / 8

Verify user behavior with Playwright

Browser tests wait and assert around user-recognized roles, labels, and outcomes rather than CSS selectors.

Why this concept became necessary

Web-first assertions retry until an element reaches the expected state, using actual UI signals rather than arbitrary sleeps. Role and accessible-name selectors test the screen's meaning while exposing accessibility problems.

Each test uses its own browser context and data, and third-party services are stubbed at controllable boundaries. Core login and purchase flows exercise the real application path without sending external payment side effects to production.

Figure 6-5. Verify user behavior with Playwright: decision flowThe chain from the problem conditions through the working principle to verification evidence.
Problems and selection criteria

Browser tests wait and assert around user-recognized roles, labels, and outcomes rather than CSS selectors.

How it works

The browser executes real DOM, events, and network requests, then asserts until the expected user-visible outcome appears.

Verification evidence

Verify the same journey with keyboard, mobile viewport, slow responses, and error responses.

Follow it through a concrete system

A Playwright test that locates a `button` by CSS class can break during a design refactor while missing the disappearance of a user-recognizable label. Locate it by accessible role and name, for example `getByRole("button", { name: "Submit order" })`, then check that the order number and status appear after clicking. This brings the test closer to the user contract.

Browser tests should wait for business signals. A 3-second sleep wastes time in fast environments and still fails in slow ones, whereas an assertion linked to a success message or network response finishes as soon as the condition is met. Create independent accounts and orders for each test and clean them up afterward so earlier state does not contaminate parallel runs or retries.

Selection criteria and failure boundaries

It introduces slow execution, data isolation, and environment dependencies.

Misconceptions to avoid: An element existing in the DOM does not mean the user can complete the task.

Verify it yourself

Verify the same journey with keyboard, mobile viewport, slow responses, and error responses.

What to judgeThe browser executes real DOM, events, and network requests, then asserts until the expected user-visible outcome appears.

To summarize this chapter

Browser tests wait and assert around user-recognized roles, labels, and outcomes rather than CSS selectors.

Official sources for this chapter

The technical facts in the text were reviewed against the following primary sources. The author reconstructed the diagrams and comparisons using these materials.

  1. Microsoft, 「Playwright AssertionsReview date 2026-08-28 · Scope Latest official documentation
  2. Microsoft, 「Playwright Best PracticesReview date 2026-08-28 · Scope Latest official documentation

CHAPTER 5 / 8

AI correction loop and release gate

If AI wrote a test, that test must also be verified with independent evidence and intentional failures.

Why this concept became necessary

First observe a red test that reproduces the defect, make it green with the smallest change, and then run the full affected scope. Compare the diff with the requirement to confirm that the agent did not change the test’s expected values to match a wrong result.

Release evidence includes the source revision, test commands and results, build artifact, security and accessibility checks, and remaining risks. Record causes and recovery instead of hiding a failed gate through simple retries.

Figure 6-6. AI correction loop and release gate: decision flowThe chain from the problem conditions through the working principle to verification evidence.
Problems and selection criteria

If AI wrote a test, that test must also be verified with independent evidence and intentional failures.

How it works

Reproducible commands and immutable revisions link code changes to observable results.

Verification evidence

Introduce mutations into the test itself and verify that the requirement and an independent oracle catch the failure.

Follow it through a concrete system

When AI fixes a production error, first turn the failure the user observed into an automated test and confirm that the test fails on the existing revision. If an agent changes both the code and the test expectations at once, it can turn a wrong result into the new correct answer, so compare the diff against the issue's acceptance criterion or an independent oracle.

A release gate must link not only successful command names but also the tested source revision, dependency lock, build-artifact digest, and result files. Hiding intermittent failures through retries or arbitrarily excluding affected tests makes a green status meaningless. After deployment, use the same representative journeys and operational metrics to check for regressions, and automatically stop or roll back if thresholds are exceeded.

Selection criteria and failure boundaries

Reducing suite costs and false positives requires ownership and ongoing cleanup.

Misconceptions to avoid: Tests written by AI do not objectively verify code written by AI.

Verify it yourself

Introduce mutations into the test itself and verify that the requirement and an independent oracle catch the failure.

What to judgeReproducible commands and immutable revisions link code changes to observable results.

To summarize this chapter

If AI wrote a test, that test must also be verified with independent evidence and intentional failures.

Official sources for this chapter

The technical facts in the text were reviewed against the following primary sources. The author reconstructed the diagrams and comparisons using these materials.

  1. Anthropic, 「Demystifying Evals for AI AgentsReview date 2026-08-28 · Scope Latest official documentation
  2. Microsoft, 「Playwright Best PracticesReview date 2026-08-28 · Scope Latest official documentation

CHAPTER 6 / 8

Separate the source of expected answers from the implementation

A test that copies a calculation can approve the same error; derive expected values independently from requirements.

Why this concept became necessary

When AI writes both a discount calculation and its tests, both files can share the same incorrect rounding rule. First identify the document and person that established the expected values. Having two things to compare does not make the check independent.

An oracle is the reference used to judge correctness. Saving the program output as the expected value can preserve current behavior but cannot establish requirement compliance. Before changing code, define policy order and boundary values in a small table.

Do not fill the table with ordinary inputs alone. Select points where meaning changes, such as minimum amounts before and after discounts, empty items, and negative quantities. For prohibited inputs, do not substitute an arbitrary amount; specify the rejection state and user guidance as the expected result.

When an exact answer is difficult to specify, use relationships between transformed inputs and outputs. For a teaching example of sorting, reversing the input should preserve the set of sorted values. State assumptions too, such as whether removing duplicates is permitted.

Figure 6-7. Separate the source of expected answers from the implementation: decision flowThe chain from the problem conditions through the working principle to verification evidence.
Problems and selection criteria

A test that copies a calculation can approve the same error; derive expected values independently from requirements.

How it works

A requirement-derived table of inputs and expected values breaks shared mistakes between implementation and tests.

Verification evidence

Build the shipping-policy boundary table and identify which row fails when the comparison is wrong.

Follow it through a concrete system

Assume a teaching shipping policy grants free shipping when the discounted item total is at least KRW 30,000. An original total of KRW 32,000 with a KRW 3,000 discount must be compared as KRW 29,000. An implementation that uses the original total and a copied test can pass together. Keep the shipping amount as a separate policy value to avoid confusing the free-shipping condition with fee changes.

A reviewer marks the after-discount condition in the table and independently specifies that shipping is charged. The developer links the table identifier to the test name. If the implementer also changes the policy, review that requirement change separately from the behavioral fix. Record the table approval date to distinguish later policy-driven expectation changes from regressions.

A snapshot of the whole screen can fail when date wording changes. If the purpose is checking shipping policy, assert the amount and reason directly to isolate the issue. Retain a separate snapshot when wording or layout is itself a requirement. Repeated failures caused by unrelated screen changes can lead reviewers to ignore genuine amount errors.

Finish by checking that a deliberately changed comparison fails the boundary tests. Testing KRW 30,000 and KRW 29,999 distinguishes an inclusive threshold from a strict one. Preserve the failure evidence to show that the tests monitor policy rather than merely execute code. Checking both sides of the threshold also rejects a fake implementation that always returns one value.

Selection criteria and failure boundaries

Policy-owner review takes time, and ambiguous policy must be clarified before code.

Misconceptions to avoid: A calculation in another file is not necessarily independent; copied formulas share errors.

Verify it yourself

Build the shipping-policy boundary table and identify which row fails when the comparison is wrong.

What to judgeA requirement-derived table of inputs and expected values breaks shared mistakes between implementation and tests.

To summarize this chapter

A test that copies a calculation can approve the same error; derive expected values independently from requirements.

Official sources for this chapter

The technical facts in the text were reviewed against the following primary sources. The author reconstructed the diagrams and comparisons using these materials.

  1. Microsoft, 「Playwright Best PracticesReview date 2026-08-28 · Scope Latest official documentation
  2. Anthropic, 「Demystifying Evals for AI AgentsReview date 2026-08-28 · Scope Latest official documentation

CHAPTER 7 / 8

Diagnose intermittent failures with evidence rather than retry counts

Preserve the first failure state and timing so reruns do not erase the cause.

Why this concept became necessary

An intermittently failing test can hide different execution conditions under one name. Shared accounts, leftover data from earlier runs, response ordering, and time zones are common differences. Before calling it bad luck, capture evidence that allows those conditions to be compared.

A failure record needs the code revision, browser version, test-data identifier and first divergent observation. The final error alone can hide an earlier incorrect navigation. Traces and network records support hypotheses but do not diagnose causes automatically.

Change one condition at a time when narrowing causes. Passing after disabling parallelism supports a race or shared-data hypothesis but does not prove it. Restore parallelism with separate accounts to test the isolation hypothesis.

Temporary quarantine does not remove the user risk the test monitored. Record an owner, reproduction conditions, substitute checks, and reintegration criteria. Silently excluding the test improves the reported rate by hiding coverage, not by improving the product.

Figure 6-8. Diagnose intermittent failures with evidence rather than retry counts: decision flowThe chain from the problem conditions through the working principle to verification evidence.
Problems and selection criteria

Preserve the first failure state and timing so reruns do not erase the cause.

How it works

Linking the first divergence to shared resource identifiers can expose a race hidden behind a timeout.

Verification evidence

Compare parallel runs with shared and isolated accounts and identify the first request that diverges.

Follow it through a concrete system

Assume two teaching account-settings tests change the same user’s display name. Each waits for saving, but in parallel the other test overwrites the final value. Increasing button wait time does not change shared data ownership. A shared account has no conflict in a solo run, so local success does not prove parallel safety.

Comparing request bodies and post-response reads shows two names written to the same user identifier. Switch to separate accounts while preserving parallelism and response delay. Correct save feedback and the correct name after refresh provide evidence that the race has been removed. Recording the owner account for each request also detects reading another test’s saved result as success.

If an external service actually went down, account isolation will not fix the failure. Test internal UI behavior using a controlled error response and check external connectivity under a separate contract. This prevents an outage and incorrect application error handling from sharing an indistinguishable failure. The external double’s error code and body must match the contract the app handles to remain diagnostically useful.

Finally rerun the original parallel conditions and compare the first failure with the corrected execution. Record both success without retries and the disappearance of data conflicts. More repeated runs are not a substitute for evidence that the cause was removed. Verify cleanup of isolated data so leftover state cannot become the cause again in the next run.

Selection criteria and failure boundaries

Diagnostic artifacts can expose account data, so use pseudonymous fixtures and restricted access.

Misconceptions to avoid: Passing on retry does not establish that no defect exists; conditions may have changed by chance.

Verify it yourself

Compare parallel runs with shared and isolated accounts and identify the first request that diverges.

What to judgeLinking the first divergence to shared resource identifiers can expose a race hidden behind a timeout.

To summarize this chapter

Preserve the first failure state and timing so reruns do not erase the cause.

Official sources for this chapter

The technical facts in the text were reviewed against the following primary sources. The author reconstructed the diagrams and comparisons using these materials.

  1. Microsoft, 「Playwright Best PracticesReview date 2026-08-28 · Scope Latest official documentation

CHAPTER 8 / 8

Verify that late responses cannot overwrite the latest user choice

The correct asynchronous UI result belongs to the current selection, not necessarily the last response to arrive.

Why this concept became necessary

A rapidly changing search field can send requests in one order and receive responses in another. A slow first request may replace the second result after it appears. Every request can succeed while the user sees information unrelated to the current input.

UI state needs to identify the request that produced a result as well as the search term. Check that the response still matches the current selection when applying it. Cancellation may reduce waste, but response validation is still needed when cancellation arrives late or server work continues.

Observe completion for the selected query rather than waiting for all network activity to stop. Verify that the input, result heading, and error feedback belong to the same request generation. Include stale failures that could replace a newer successful screen with an error.

The same contract applies to previews, delivery-region choices, and document navigation. A request completed after leaving a view must not alter the next view’s state. Keep discarded responses diagnosable without exposing internal request numbers to users.

Figure 6-9. Verify that late responses cannot overwrite the latest user choice: decision flowThe chain from the problem conditions through the working principle to verification evidence.
Problems and selection criteria

The correct asynchronous UI result belongs to the current selection, not necessarily the last response to arrive.

How it works

Comparing current and responding request identities at the state-update boundary blocks stale overwrites.

Verification evidence

Reverse response order and finish the old request with success and failure separately; verify that current results and feedback remain intact.

Follow it through a concrete system

In a teaching book search, hold the response for the first query, sea, and return the later query, mountain, first. Release the sea response after the mountain list appears. If the input and results still refer to mountain, the stale success was ignored. Use different headings and items for the two results to detect false passes where only the input changes.

A test that controls only successful responses is incomplete. Failing the old sea request could still remove the current mountain result. Run stale-success and stale-failure cases separately to verify that the latest selection survives either status. If error feedback is not bound to the latest request, an incorrect warning may remain even when the list survives.

Include accessibility observations in the same flow. The task is not complete if the result announcement reads an old count or loading never ends, even when the visible list is correct. Check current results, completed loading, and assistive-technology announcements together. The goal is to verify that visual and assistive-technology states describe the same request.

Record the order in which requests were held and released and the expected UI state at each point. Connect controlled responses to UI conditions instead of using long arbitrary waits. Preserve the same response order after fixing the defect to verify regression protection. Releasing a held response after navigation additionally checks the view’s lifetime boundary.

Selection criteria and failure boundaries

Cancellation and discard logic add complexity, requiring request lifetimes and error states to be designed together.

Misconceptions to avoid: HTTP success alone does not make a response safe to display; it must match the current selection.

Verify it yourself

Reverse response order and finish the old request with success and failure separately; verify that current results and feedback remain intact.

What to judgeComparing current and responding request identities at the state-update boundary blocks stale overwrites.

To summarize this chapter

The correct asynchronous UI result belongs to the current selection, not necessarily the last response to arrive.

Official sources for this chapter

The technical facts in the text were reviewed against the following primary sources. The author reconstructed the diagrams and comparisons using these materials.

  1. Microsoft, 「Playwright AssertionsReview date 2026-08-28 · Scope Latest official documentation
  2. Microsoft, 「Playwright Best PracticesReview date 2026-08-28 · Scope Latest official documentation

INTERACTIVE LAB 1 / 2

Lab 1 · Fix a passing but meaningless test

The payment-button test only checks whether a `button` exists. The actual defect is that clicking twice creates two orders.

Choose a check that directly catches the regression.

Choose an answer

Correct answer A

A. Reproduce double clicks and slow responses, then verify one idempotency key, exactly one order, and a UI that prevents duplicates.A decision that accounts for conditions, working principles, and failure boundaries together.

B. Snapshot only the button's CSS color.It considers only some benefits and omits prerequisites or newly introduced failure boundaries.

C. Increase the test timeout and keep only existence assertions.It treats the responsibilities of different layers as one and misses the actual verification points.

D. Raise only the coverage number to 100%.It relies on technology names or trends, with no observable evidence from the current requirements.

INTERACTIVE LAB 2 / 2

Lab 2 · Design a regression check from reversed responses

In a simulated book search, a sea query is followed by a mountain query. Mountain results appear first, but a late sea error replaces the screen with an error. The current test checks only that mountain results appeared briefly.

Choose a change that directly tests the missed condition and explain why the latest request’s final state is the criterion.

Choose an answer

Correct answer B

A. Increase the delay until all responses finish and retain the existence check.More time does not check whether a stale error overwrites current results, so the same defect can pass.

B. Inject the late sea error, then verify the mountain input and results remain, loading ends and no stale error appears.This directly detects the user-facing defect by observing both the final state for the current selection and rejection of stale failure.

C. Remove the sea request and test only mountain search.Removing the competing old request loses the reproduction condition; solo search success cannot prove ordering safety.

D. Change the expected result to the screen’s error message.The requirement is to preserve current results; matching expectations to the defect makes implementation and test share the error.

KEY TERMS

Key terms in this unit

Boundaries of type, unit, integration, and E2E tests
Layers fast feedback at small scope with real integration evidence at broad scope.
Unit tests and determinism
Controls dependencies and narrows the input-output contract to produce fast, reproducible failures.
API·schema·integration test
Runs real boundary serialization and state transitions in an isolated environment.
Verify user behavior with Playwright
The browser executes real DOM, events, and network requests, then asserts until the expected user-visible outcome appears.
AI correction loop and release gate
Reproducible commands and immutable revisions link code changes to observable results.
Separate the source of expected answers from the implementation
A requirement-derived table of inputs and expected values breaks shared mistakes between implementation and tests.
Diagnose intermittent failures with evidence rather than retry counts
Linking the first divergence to shared resource identifiers can expose a race hidden behind a timeout.
Verify that late responses cannot overwrite the latest user choice
Comparing current and responding request identities at the state-update boundary blocks stale overwrites.

UNIT WORKBOOK

Exercises and worksheets for applying concepts to new situations

Start by checking basic principles, then expand to practical workplace decisions. After submitting an answer, you can see why every option is correct or incorrect, not just the correct answer.

THREE-LEVEL ASSESSMENT

From basic principles to operational decisions

After you submit an answer, you can see not only the correct answer but also why each option is right or wrong.

Basic Question 1

What is the benefit of web-first assertions?

Choose an answer

Correct answer B

A. Share test data.It relies on technology names or trends, with no observable evidence from the current requirements.

B. Instead of a fixed sleep, recheck the condition until the expected user-visible state appears.A decision that accounts for conditions, working principles, and failure boundaries together.

C. Send all network traffic to production.It considers only some benefits and omits prerequisites or newly introduced failure boundaries.

D. Ignore the accessible name.It treats the responsibilities of different layers as one and misses the actual verification points.

Apply Question 2

What goes wrong when a mock checks only the internal call order of an implementation?

Choose an answer

Correct answer C

A. A runtime schema is generated automatically.It treats the responsibilities of different layers as one and misses the actual verification points.

B. Browser compatibility is proven.It relies on technology names or trends, with no observable evidence from the current requirements.

C. Real output errors can be missed, and tests can break even during safe refactors.A decision that accounts for conditions, working principles, and failure boundaries together.

D. Tests always become faster and more accurate.It considers only some benefits and omits prerequisites or newly introduced failure boundaries.

Capstone Question 3

What counts as sufficient release evidence for AI-generated code?

Choose an answer

Correct answer D

A. The agent's completion message.It considers only some benefits and omits prerequisites or newly introduced failure boundaries.

B. Only a single type check.It treats the responsibilities of different layers as one and misses the actual verification points.

C. The fact that many lines were changed.It relies on technology names or trends, with no observable evidence from the current requirements.

D. A reproduction test linked to the requirement, the full gate, an immutable build, and a record of remaining risk.A decision that accounts for conditions, working principles, and failure boundaries together.

PRIMARY SOURCES

Course references

This list collects the sources for each chapter. The text and author-created diagrams were prepared by directly reviewing the originals below.

PERSONAL WORKSHEET

A learning worksheet you adapt to your own environment

Your input remains only on the current browser screen and is not stored or transmitted externally. Use categories and pseudonyms instead of actual sensitive information.

OFFICIAL SOURCES

Verify against official sources

Technical, compatibility, and model information reviewed: August 2026

LEARNING RECORD

Have you reviewed the text, decision activities, and all explanations?

Completion status is stored only in this browser.