I have a very specific issue where the icons for starting and stopping tests are shifting depending on when file was created:

In example above, you can see that in example.spec.ts, the icons are on the correct lines. In test.spec.ts however, the icons are shifted one line for each // step:.

// step: comes from playwright-magic-steps, a package that allows me to write Playwright's test steps in a less cluttered way, which my team wants.

It's obvious that the issue is related to the package, but I cannot figure out what could possibly be the cause.

Scenario A

Clone my demo repo for this specific issue:

git clone

npm install

In .vscode/settings.json, add the following:

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

In example.spec.ts and every other .spec.ts-file, see that the icons are on the wrong lines:

Scenario B

In a clean folder, install Playwright and playwright-magic-steps:

npm init playwright@latest

npm install -D playwright-magic-steps

In the created example.spec.ts, change the comments to be // step::

import { test, expect } from "@playwright/test";

test("has title", async ({ page }) => {
  await page.goto("/");

  // step: test1
  await expect(page).toHaveTitle(/Playwright/);
});

test("get started link", async ({ page }) => {
  await page.goto("/");

  // step: step 2
  await page.getByRole("link", { name: "Get started" }).click();

  // step: step 3
  await expect(
    page.getByRole("heading", { name: "Installation" })
  ).toBeVisible();
});

In .vscode/settings.json, add the following:

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

In example.spec.ts, see that the icons are on the correct lines:

Create a new file test.spec.ts and copy the code from example.spec.ts. The icons are now on the wrong lines:

I have a very specific issue where the icons for starting and stopping tests are shifting depending on when file was created:

In example above, you can see that in example.spec.ts, the icons are on the correct lines. In test.spec.ts however, the icons are shifted one line for each // step:.

// step: comes from playwright-magic-steps, a package that allows me to write Playwright's test steps in a less cluttered way, which my team wants.

It's obvious that the issue is related to the package, but I cannot figure out what could possibly be the cause.

Scenario A

Clone my demo repo for this specific issue:

git clone https://github.com/jondam93/playwright-magic-steps

npm install

In .vscode/settings.json, add the following:

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

In example.spec.ts and every other .spec.ts-file, see that the icons are on the wrong lines:

Scenario B

In a clean folder, install Playwright and playwright-magic-steps:

npm init playwright@latest

npm install -D playwright-magic-steps

In the created example.spec.ts, change the comments to be // step::

import { test, expect } from "@playwright/test";

test("has title", async ({ page }) => {
  await page.goto("https://playwright.dev/");

  // step: test1
  await expect(page).toHaveTitle(/Playwright/);
});

test("get started link", async ({ page }) => {
  await page.goto("https://playwright.dev/");

  // step: step 2
  await page.getByRole("link", { name: "Get started" }).click();

  // step: step 3
  await expect(
    page.getByRole("heading", { name: "Installation" })
  ).toBeVisible();
});

In .vscode/settings.json, add the following:

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

In example.spec.ts, see that the icons are on the correct lines:

Create a new file test.spec.ts and copy the code from example.spec.ts. The icons are now on the wrong lines:

• typescript
• configuration
• playwright
• playwright-test
• playwright-typescript

• Please see: Why should I not upload images of code/data/errors? Thank you. – Sergey A Kryukov Commented Feb 5 at 22:30
• 3 @SergeyAKryukov I haven't posted images of relevant code, but of the user interface where the error appears. This is correct according to the link you posted, under section "When should I use images?". – Joccahontas Commented Feb 6 at 6:33
• You apparently misread that section. But what is really important is the logics, not formalities. How can we read the error message, copy IDs and other information? If you still think that the image is useful, it should complement textual presentation of the error, not replace it. However, it's up to you. Just keep in mind, that if your presentation of the problem is purely readable, inconvenient, inaccurate, etc., nobody will be interested in paying attention to this problem. – Sergey A Kryukov Commented Feb 6 at 6:54
• With all due respect, you apparently misread either that section, my post, or both. The images in my post are included to illustrate a problem that cannot be reproduced in text. It's a purely visual bug, with no error output. All relevant code has been included both in code blocks and as a linked repo. – Joccahontas Commented yesterday
• ...a problem that cannot be reproduced in text? I understand. I don't mean you should not provide a picture. But you still also provide the corresponding text. With a text, people can do the search, text copy/past — there are many reasons to provide text. Please understand. See also: Why should I not upload images of code/data/errors? Note that I don't think you should not upload images with text, I just say it's not enough. Thank you. – Sergey A Kryukov Commented yesterday

1 Answer 1

For me, refreshing the test list solved this. You can either click "Refresh Tests" in the Test Explorer extension, Or hit it's shortcut Ctrl + : and then Ctrl + r.

It solve both the arrows being miss-located issue, and "No tests found" when you click on a green arrow.