[BUG] Playwright inspector highlights the wrong line of code when running from mocha

[PawelWesolowski]

Context:
System:

• OS: macOS 13.2.1
• Memory: 9.20 MB / 16.00 GB

Binaries:

• Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
• Yarn: 1.22.19 - /usr/local/bin/yarn
• npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm

Languages:

• Bash: 3.2.57 - /bin/bash

npmPackages:

• playwright: 1.29.2 => 1.29.2

Code Snippet

https://github.com/PawelWesolowski/playwright-repro-repo-for-wrong-line

Describe the bug

When running playwright lib from a mocha test written in typescript, the inspector will highlight wrong line of the test file. When the test fails, wrong line is being reported.

This is almost the same as #19944 but reproduced by a mocha-runner, not a cucumber-runner.

[pavelfeldman]

Looks like your mocha setup is not generating source maps when it compiles TS. As a side note, using @playwright/test will make you several times more productive as it'll manage parallelism, browser contexts, trace files the best way possible. Making it work with mocha will take weeks and will still be wrong.

[PawelWesolowski]

I agree that it looks like it is not generating source maps but it is more complex. I have now pushed a new commit with simple setup for mocha-typescript test based on mocha example. The new simple test reports the assertion fail line correctly (line 25) as long as the code for Playwright test is commented out. When playwright code is included in the run, the failing line number is 22.
It is a bit similar behaviour as reported here.

Thanks for the advice but I have a pretty stable setup since the 1.7 version of Playwright. It is far from "wrong". I just hope that Playwright will support its usage as the "APIs for launching and interacting with browsers".
Besides, we use IntelliJ and it has a missing feature...

[pavelfeldman]

I'm not sure what I should be doing with that repo. I run it and it passes, I uncomment the commented line and everything stalls.

It is far from "wrong"

You'll be surprised!

I just hope that Playwright will support its usage as the "APIs for launching and interacting with browsers".

Playwright Library will keep working. But the playwright assertions that you take from @playwright/test can stop working outside of @playwright/test at any moment...

[pavelfeldman]

We need more information to act on this report. As long as we can't repro it, it is unlikely with can make progress with it. Allow me to close it, but please file a new one and link to this issue when you get back to it!

[PawelWesolowski]

I'm not sure what I should be doing with that repo. I run it and it passes, I uncomment the commented line and everything stalls.

Sorry, I did not notice that after I stripped the tsconfig.json to minimum the inspector actually stopped showing anything when the execution reached await page.pause(). I have now pushed a new version of tsconfig. The inspector will now show up and you will be able to press play to continue.

There are 2 tests there - both do not pass. Do the following:

• run npm test correct-line.test.ts will fail and reporter will state correctly that the error occurred at line 25
• uncomment wrong-line.uitest.ts and run npm test again. You will then notice 3 things:
  • correct-line-test.ts is no longer reporting error on line 25
  • wrong-line.uitest.ts will open inspector with line 22 highlighted (as on screenshot in the bug description) which is not the correct line. It should be 26.
  • if you press play in the inspector the wrong-line.uitest.ts will report that this assertion failed at line 30 instead of 34

playwright assertions that you take from @playwright/test can stop working outside of @playwright/test at any moment...

this is actually very important information

[PawelWesolowski]

Please reopen. The sourcemaps are setup correctly. The test which is not using playwright proves it. In that test the lines for assertion exceptions are reported correctly as long as playwright's lib is uncommented.