Skip to navigation

This example fills in all the fields on the Watson and Holmes Intake Form, while capturing a video record.

The test spec is hosted online as a Markdown file, so you don’t need to download it. You pass its URL to Doc Detective with the --input argument, and Doc Detective fetches and runs it.

To run the test:

  1. Set up your test environment so the sample form is served at http://localhost:8080/watson_and_holmes_intake_form.html.

  2. Run the hosted form-filler3.md test spec with Doc Detective:

    npx doc-detective --input https://raw.githubusercontent.com/doc-detective/doc-detective/main/docs/examples/watson-and-holmes/form-filler3.md

To record, you must run the test with headless mode turned off. The display window of the browser constrains the view area of the screenshot and video functions.

Code walkthrough

These are the notable additions to the spec used in the Capture screenshot tutorial.

For this example, the headless setting must be false, so that the test actions are visible in the browser.

{/* test {"testId":"form-filler3","detectSteps":false,"runOn":[{"platforms":["windows","mac","linux"],"browsers":{"name":"chrome","headless":false,"viewport":{"width":1180,"height":1480}}}]} */}

Start the recording with the record action and an optional output path.

{/* step {"description":"Start recording.","record":"./output/form-filler3-recording.mp4"} */}

After the actions are complete, stop the recording with the stopRecord action.

{/* step {"description":"Stop recording.","stopRecord":true} */}

Complete test spec

View the complete spec at form-filler3.md.