[BUG] Unable to live debug and fix a failing playwright test that uses setup/teardown projects

[kirksl]

System info

• Playwright Version: 1.38.1
• Operating System: All
• Browser: All
• Other info: See readme.md in linked-to source code for full details of issue

Source code

• [x] I provided exact source code that allows reproducing the issue locally.

Link to the GitHub repository with the repro

https://github.com/kirksl/playwright

Steps

Prefacing what i'm trying below i'm also trying various combinations under VSCode's Select Configuration -> Default Profile in the Testing activity here without any difference in results selecting only chromium, chromium and global setup, etc.

First I try what she said here https://www.youtube.com/watch?v=tJF7UhA59Gc&t=43s

• I open VSCode with Playwright Test for VSCode plugin installed
• Goto the Testing activity and check the box Show browser for Playwright
• Open a test that is failing example.spec.ts > test 2 and hit the play button for it in the gutter
• The global setup project runs, opens a browser, kills the browser
• The chromium project runs, opens a browser, runs the test, kills the browser
• The global teardown project runs, opens a browser, leaves browser open
• Global setup and teardown don't use the browser so it's just a blank page
• VSCode shows the test's error inline within the test, but because the browser for the test was killed I have no way to live debug and fix it

Second I try what she said here https://www.youtube.com/watch?v=tJF7UhA59Gc&t=2m41s

• I open VSCode with Playwright Test for VSCode plugin installed
• Goto the Testing activity and check the box Show browser for Playwright
• Open a test that is failing example.spec.ts > test 2, set a breakpoint at line where test is failing, right-click play and hit debug test in the gutter
• The global setup project runs, opens a browser, kills the browser
• The chromium project runs, opens a browser, runs the test up to the breakpoint and pauses leaving the browser open
• In debug mode I hit the Step Over debug button to watch the failure occur in the test which kills the browser
• The global teardown project runs, opens a browser, leaves browser open
• Global setup and teardown don't use the browser so it's just a blank page
• VSCode shows the test's error inline within the test, but because the browser for the test was killed I have no way to live debug and fix it

Expected

• In both scenarios I want to do what she does here live editing the test to resolve the locator issue https://www.youtube.com/watch?v=tJF7UhA59Gc&t=1m32s
• Referencing the test steps above when the test in the chromium project fails, I expect the browser for the chromium project to remain open so that I can live debug and fix the test as shown in the video

Actual

• The chromium project runs, opens a browser, runs the test, the test fails, kills the browser
• The global teardown project runs, opens a browser, leaves browser open, which is just a blank page in the browser
• VSCode shows the test's error inline within the test, but because the browser for the test was killed I have no way to live debug and fix it

[pavelfeldman]

Thank you for the detailed report. I can see that when I run the test from the setup and it fails, we run teardown test that has its own page, which closes the one you wanted to look at.

[pavelfeldman]

As a temporary workaround, you could skip your teardown:

teardown.skip('global teardown', async ({ page }) => {

[kirksl]

Thanks @pavelfeldman appreciate the response and the workaround.

Please let me know if you need anything else to further the investigation...

I think this live debug feature and interaction between the editor and the browser would be a great addition to UI Mode by the way

[pavelfeldman]

Btw, in the UI Mode you can use Locator tab as a playground for tuning the selectors. In UI Mode you can also uncheck "teardown" project while you are tuning your setup.

[AdrianoFerrari]

I'm having the same issue (sorry, can't make a repro right now). If I use https://playwright.dev/docs/test-global-setup-teardown#option-1-project-dependencies to setup/teardown, then in UI mode I only see:

• teardown (if it exists)
• setup (if there's no teardown)

I switched to "Option 2" using the globalSetup config option instead, and it works.