Switch browser integration tests from jest-puppeteer to Playwright (#2920)

The graphql-ws tests didn't even use a browser, so those just drop the preset and run as plain Jest.

Signed-off-by: Thomas Segismont <tsegismont@gmail.com>

Author: tsegismont

.github/workflows/it.yml

@@ -69,6 +69,9 @@ jobs:
       - run: sh vertx-web-graphql/start-graphiql-tests-server.sh
       - run: npm install
         working-directory: vertx-web-graphql/tests/graphiql
+      - name: Install Playwright browser
+        run: npx playwright install --with-deps chromium
+        working-directory: vertx-web-graphql/tests/graphiql
       - run: npm run test
         working-directory: vertx-web-graphql/tests/graphiql
       - uses: actions/upload-artifact@v4
@@ -102,6 +105,9 @@ jobs:
       - run: sh vertx-web/start-sockjs-write-handler-tests-server.sh
       - run: npm install
         working-directory: vertx-web/tests/sockjs
+      - name: Install Playwright browser
+        run: npx playwright install --with-deps chromium
+        working-directory: vertx-web/tests/sockjs
       - run: npm run test
         working-directory: vertx-web/tests/sockjs
       - uses: actions/upload-artifact@v4

vertx-web-graphql/tests/graphiql/graphiql.test.js

@@ -1,28 +1,11 @@
-const GRAPHIQL_URL = 'http://localhost:8080/graphiql/?query=' + encodeURIComponent('{ hello }')
+import { test, expect } from '@playwright/test'
 
-// Monaco editor renders non-breaking spaces (U+00A0) instead of regular spaces
-function normalizeSpaces(text) {
-  return text.replace(/ /g, ' ')
-}
+test('execute query and verify response', async ({ page }) => {
+  await page.goto('/graphiql/?query=' + encodeURIComponent('{ hello }'), { waitUntil: 'networkidle' })
+  await page.waitForSelector('.graphiql-container', { timeout: 10000 })
 
-test('execute query and verify response', async () => {
-  await page.goto(GRAPHIQL_URL, {waitUntil: 'networkidle0'})
-  await page.waitForSelector('.graphiql-container', {timeout: 10000})
+  await page.locator('.graphiql-execute-button').click()
 
-  const executeButton = await page.waitForSelector('.graphiql-execute-button', {timeout: 5000})
-  await executeButton.click()
-
-  const deadline = Date.now() + 10000
-  let content = ''
-  while (Date.now() < deadline) {
-    content = normalizeSpaces(await page.evaluate(() => {
-      const el = document.querySelector('.graphiql-response')
-      return el ? el.textContent : ''
-    }))
-    if (content.includes('Hello World!')) break
-    await new Promise(r => setTimeout(r, 500))
-  }
-
-  expect(content).toContain('"hello"')
-  expect(content).toContain('Hello World!')
-}, 30000)
+  await expect(page.locator('.graphiql-response')).toContainText('"hello"')
+  await expect(page.locator('.graphiql-response')).toContainText('Hello World!')
+})