Test steps shift VSCode's test runner icons

[jondam93]

For every // step: added to my code, it shifts the icon for the test runner one line down. See icons in left hand margin:

Is this a known issue?

[vitalets]

I assume there can be such situation, but I can't reproduce it. Could you share the steps how you get it?
When I simply add more steps, runner icons shift correctly:

[vitalets]

While checking this issue, I've realized that there is no configuration setup for VS Code extension is readme.
I've updated the readme. Could you try to add the following lines to .vscode/settings.json:

"playwright.env": {
  "NODE_OPTIONS": "-r playwright-magic-steps"
},

[jondam93]

I already had the configuration added to settings.json at the time of posting, so that unfortunately doesn't fix anything.
It's hard to pinpoint exactly what steps I've made in order to get this bug, as I just added the magic steps to an existing project.
When I try to reproduce the bug in a fresh setup, I am also unable to do so.

[jondam93]

Actually, upon removing the configuration from .vscode/settings.json, the icons are once again placed where they should be:

[jondam93]

I've found something that has made me if possible even more confused. It seems the file itself is affected, rather than the code.

See examples below, where two files with different names have the exact same code. However, example.spec.ts behaves as expected, while dashboard.spec.ts has the described issue:

The files are right next to each other in the /tests directory

[jondam93]

I posted a question to StackOverflow with detailed steps on how to reproduce:
https://stackoverflow.com/questions/79414236/why-are-my-test-runner-icons-on-the-wrong-line-only-in-certain-files

[vitalets]

@jondam93

Could you please try two scenarios:

1. When you face that issue, restart VS code extensions -> doesn't it help?

And another one:

2. When you face that issue, run npx playwright clear-cache to clear Playwright cache with transpiled files.

[jondam93]

Tried both with no success, unfortunately.
I've also tried disabling all extensions in order to see if it's an issue there, but as soon as I enable the Playwright extension the icons shift.

[vitalets]

Hmm, ok, thank you! In the situation when example.spec.ts has correct icons, but dashboard.spec.ts does not -> what if you rename dashboard.spec.ts to let's say dashboard123.spec.ts?

[jondam93]

I've tried renaming it to a lot of different names, including example.spec.ts, but unfortunately the icons remain wrong

[vitalets]

And when you comment these line, icons go to correct place even without re-running tests?

[jondam93]

Yes, when commenting out the lines the test runner refreshes and the icons reappear at the correct place

[vitalets]

I'll check Playwright vscode extension sources, maybe it can help.
In general the problem is following: during compilation steps add extra line for closing }); of the step function. That's why line offset can shift.