Why does my .after() callback not run in my test flow?

[taheroo]

Why does my .after() callback not run in my test flow?

I attempted to .after() callbacks to handle some UI clicks that shortest could not do (2 dropdown menus click), but it doesn't seem to execute and the test ends. Below is a simplified version of my code:

const createHandin = `
To create a new hand-in:
1. Click the Create button in the top-right corner and wait for the dropdown to open
`;

shortest(createHandin).after(async ({ page }) => {
  console.log("debug:starting create handin");
  await page.getByRole('menuitem', { name: 'User Deliverables' }).waitFor({ state: "visible" });
  
  const userDeliverablesOption = page.getByRole('menuitem', { name: 'User Deliverables' });
  if (userDeliverablesOption) {
    await userDeliverablesOption.click();
  } else {
    throw new Error("User Deliverables not found");
  }
  
  const handinOption = page.getByRole('menuitem', { name: 'Hand-in' });
  if (handinOption) {
    await handinOption.click();
  } else {
    throw new Error("Handin option not found");
  }
  
  shortest("Fill in the form", {
    title: "Shortest Handin",
    description: "Shortest Handin",
  });
})

Log

Screenshot saved to: /.shortest/screenshots/screenshot-2025-01-21T11-45-49-026Z.png
  ✓ 
To create a new hand-in:
1. Click the Create button in the top-right corner and wait for the dropdown to open

Expected Behavior:
I expected the .after() callback to execute and log "debug:starting create handin" after the finishes of shortest(createHandin).

Actual Behavior:
The "debug:passed create handin" message never appears in the console, meaning that the .after() callback did not run.

Questions:

1. Why is the .after() callback not executing?
2. How can I modify my code or structure to ensure that all .after() callbacks run as intended?

Any insights or suggestions on how to troubleshoot and resolve this would be greatly appreciated!

[taheroo]

PS: this one works so now I am seeing it going by luck

shortest(`Click the Create button in the top-right corner`).after(async ({ page }) => {
  console.log("debug:starting create handin");
  await page.getByRole('menuitem', { name: 'User Deliverables' }).waitFor({ state: "visible" });
  const userDeliverablesOption = page.getByRole('menuitem', { name: 'User Deliverables' });
  if (userDeliverablesOption) {
    await userDeliverablesOption.click();
  } else {
    throw new Error("User Deliverables not found");
  }
  const handinOption = page.getByRole('menuitem', { name: 'Hand-in' });
  if (handinOption) {
    await handinOption.click();
  } else {
    throw new Error("Handin option not found");
  }
  shortest("Fill in the form", {
    title: "Shortest Handin",
    description: "Shortest Handin",
  })
})

[rmarescu]

Hey @taheroo, could you use this template repository as a starting point to reproduce the issue?