CODEWITHSUNDEEP
typescriptconfigurationplaywrightplaywright-testplaywright-typescript
Joccahontas
Joccahontas

Reputation: 21

Why are my test runner icons on the wrong line, only in certain files?

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

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: Wrong icons

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: Correct icons

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

Upvotes: 2

Views: 44

Answers (1)

I.sh.
I.sh.

Reputation: 1993

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.

Upvotes: 0

Related Questions