[Bug]: The command "npx playwright show-trace" doesn't work with trace zipped folder if name contains spaces

[AlexKomanov]

Playwright version

1.12.3

Operating system

Windows

What browsers are you seeing the problem on?

No response

Other information

Node.js version: v14.16.1
Windows version: 10
WebStorm version 2021.1.3

What happened? / Describe the bug

I record a trace for each test that I perform.
In order to avoid file overwriting - I use the title of the test (testInfo.title) as the name of the file (see the complete code in the section below).

After test performing - I get the following trace zipped folder:

As can be seen - the name of the zipped folder is 'Search and buy item.zip'.

In order to open the trace of the test, I use the "npx playwright show-trace" command via the IDE terminal. Using the terminal autocompletion - I get the following path:

But the attempt to perform this command with the provided path - triggers error:

Only if I'll remove the spaces from the zipped directory (for example: 'Searchandbuyitem.zip') - it will work as well.

See the full code in the section below.

Code snippet to reproduce your bug

import test, { BrowserContext, Page } from "@playwright/test";
import BasePage from "../../common/BasePage";
import ApplicationUrl from "../../helpers/applicationUrl";
import Header from "../components/Header";
import RegisterForm from "../components/RegisterForm";
import UpperNavigationMenu from "../components/UpperNavigationMenu";
import MerchandisePage from "../pages/MerchandisePage";

test.describe("Buy Merchandise Feature", async () => {
  let basePage: BasePage;
  let header: Header;
  let registerForm: RegisterForm;
  let upperNavigationMenu: UpperNavigationMenu;
  let merchandisePage: MerchandisePage;


  test.beforeAll(async ({ }) => {});

  test.beforeEach(async ({ page, context}) => {
    basePage = new BasePage(page);
    header = new Header(page);
    registerForm = new RegisterForm(page);
    upperNavigationMenu = new UpperNavigationMenu(page);
    merchandisePage = new MerchandisePage(page);

    await basePage.loadApplication(ApplicationUrl.ESRO);
    await context.tracing.start({
      screenshots: true,
      snapshots: true,
    });
  });

  test.afterAll(async ({browser}) => {
    await browser.close();
  });

  test.afterEach(async ({context, page, }, testInfo) => {
      await context.clearCookies();

      //await page.screenshot();
    await context.tracing.stop({path: 'traces/'+ testInfo.status + '/' + testInfo.title +'.zip'});
    //await page.close();
    //await context.close();


  });

  test.only('Search and buy item', async ({browser}) => {
    let firstName = basePage.getRandomFirstName;
    let lastName = basePage.getRandomLastName;
    let email = basePage.getRandomMail;
    let phone = basePage.getRandomPhone;

    await header.openRegisterForm();
    await registerForm.fillRegisterFormWithSkip(firstName, lastName, email, phone);
    await header.validateUserDetails(firstName, lastName);

    await upperNavigationMenu.chooseMenuTab('Merchandise');
    await upperNavigationMenu.validateEndPoint('/merchandise');
    await merchandisePage.searchAndChooseItem('Tea');
  })

});

Relevant log output

No response

[aslushnikov]

@AlexKomanov This seems to be an NPX issue on Windows:

• [BUG] Quotes not respected npm/npx#43
• [BUG] npm/npx is not handling directories with spaces (on Windows) correctly npm/cli#502

The official "workaround" for this would be to install NPM v7:

$ npm i -g npm@v7

[AlexKomanov]

@aslushnikov
Thanks!
Worked for me perfectly!!!