fix(tests): close page before server

[nihalgonsalves]

Description

Another attempt at solving the CI timeouts.

#3056 fixed teardown errors by closing the server correctly, but that was only a symptom. These errors started popping up, especially in the ssr-react/ssr-vue tests:

FAIL packages/playground/ssr-react/__tests__/ssr-react.spec.ts
  ● Test suite failed to run
    Timeout - Async callback was not invoked within the 30000 ms timeout specified by jest.setTimeout.Error: Timeout - Async callback was not invoked within the 30000 ms timeout specified by jest.setTimeout.

When analysing the times between server.close() finishing and Async callback errors being created, it was within milliseconds, no matter whether I had 10 s or 15 s configured as the timeout locally.

My understanding is that the server tries to close, but an open page attempts to keep the connection open, ending in an endless cycle. This would explain the immediate close success milliseconds after Jest gives up (and thus quits Playwright).

Additional context

Before this change, I could reliably reproduce the error locally (Node 14, macOS 11) by running:

yarn jest --verbose ssr-vue.spec.ts ssr-react.spec.ts

Additionally, it looks like there are some issues with the page refreshing. Setting DEBUG=pw:api reveals logs such as these:

2021-04-22T18:36:14.978Z pw:api => page.goto started
  pw:api navigating to "http://localhost:9527", waiting until "load" +109ms
  pw:api   navigated to "http://localhost:9527/" +11ms
  pw:api   navigated to "http://localhost:9527/" +72ms
  pw:api   navigated to "http://localhost:9527/" +59ms
  pw:api   navigated to "http://localhost:9527/" +41ms
  pw:api   navigated to "http://localhost:9527/" +25ms
  pw:api   navigated to "http://localhost:9527/" +28ms
  pw:api   navigated to "http://localhost:9527/" +25ms
  pw:api   navigated to "http://localhost:9527/" +27ms
  pw:api   "domcontentloaded" event fired +1ms
  pw:api   navigated to "http://localhost:9527/" +12ms
  pw:api   navigated to "http://localhost:9527/" +14ms
  pw:api   "domcontentloaded" event fired +24ms
  pw:api   "load" event fired +11ms
  pw:api   navigated to "http://localhost:9527/" +3ms

And running

VITE_DEBUG_SERVE=true DEBUG=pw:api yarn jest --verbose ssr-vue.spec.ts ssr-react.spec.ts

results in some flickering behaviour in the headed Playwright/Chromium instance. Maybe a hint for the next bug hunt.

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.