Using box with nested test.step()?

Question

test.step() could be used in a nested way according to this doc: https://playwright.dev/docs/api/class-test#test-step And test.step() has box feature (same link) Then what happens if all nested test.step()s have box option enabled? When error happens, would the top of the call stack point to the nearest line that called test.step() or the top one? A, or B in the following case?

async function login(page) { // pointing to this line? A
  await test.step('Outer step', async () => { // pointing to this line? B
    await test.step('Inner step', async () => {
      // error happened.
    }, { box: true });
  }, { box: true });
};

Answer 1

Short Answer: All of them

Long Answer: The error will be visible to all levels of the nested steps

According to the documentation:

When the step is boxed, errors thrown from the step internals point to the step call site. See below for more details. So this means that if an error happens inside the step, it will be point to the box containing it, no matter how many layers deep the error happened at

So for example if you have:

  await test.step('Level 1', async () => { // Error appears here, cause it happened inside 
    await test.step('Level 2', async () => { // But here as well
      await test.step('Level 3', async () => { // and here as well
        await expect(page).toHaveTitle(/Wrong/); // error happened here
      }, { box: true });
    }, { box: true });
  }, { box: true });

In the report you will see something like this: