fix(video): don't leave a stale test annotation overlay in the page

[Denis (someden)]

installScreencastTitleUpdater() updates the caption from two places: the test.step callbacks and the 'page' event. The page handler is fire-and-forget, and an update reads overlays.get(page) before awaiting showOverlay(), so a step that begins while a page-event update is in flight finds nothing to remove and adds a second overlay. The reference to the first one is lost and it stays in the page for the rest of the recording.

Both overlays are anchored to the same edge and differ by one line, so the previous caption line is drawn over the current one — a ghost that shows wherever it is longer than the text on top of it. With the default top-left position the two line up and the duplicate goes unnoticed; with a bottom position it is plainly visible in the video.

Serialize the updates into a promise chain so removing the previous overlay and adding the next one cannot interleave.

The page list each update works from is a snapshot, so a page that closes while its overlay is being updated rejects the call and aborts the loop — and because the step callbacks await it, that surfaces as the user's test failing with screencast.showOverlay: Target page, context or browser has been closed. The annotation is cosmetic, so each page is now updated on its own and failures go to the debug log instead of the test.

fixes #42796

[Denis (someden)]

@microsoft-github-policy-service agree