test: address conflicts in port usage for browser-related test suites. (

#4306)

examples/playwright/test/basic.test.ts

@@ -5,15 +5,17 @@ import { chromium } from 'playwright'
 import type { Browser, Page } from 'playwright'
 import { expect } from '@playwright/test'
 
+const PORT = 3001
+
 // unstable in Windows, TODO: investigate
 describe.runIf(process.platform !== 'win32')('basic', async () => {
   let server: PreviewServer
   let browser: Browser
   let page: Page
 
   beforeAll(async () => {
-    server = await preview({ preview: { port: 3000 } })
-    browser = await chromium.launch()
+    server = await preview({ preview: { port: PORT } })
+    browser = await chromium.launch({ headless: true })
     page = await browser.newPage()
   })
 
@@ -25,7 +27,7 @@ describe.runIf(process.platform !== 'win32')('basic', async () => {
   })
 
   test('should change count when button clicked', async () => {
-    await page.goto('http://localhost:3000')
+    await page.goto(`http://localhost:${PORT}`)
     const button = page.getByRole('button', { name: /Clicked/ })
     await expect(button).toBeVisible()
 

examples/puppeteer/test/basic.test.ts

@@ -1,17 +1,19 @@
 import { afterAll, beforeAll, describe, expect, test } from 'vitest'
 import { preview } from 'vite'
 import type { PreviewServer } from 'vite'
-import puppeteer from 'puppeteer'
+import { launch } from 'puppeteer'
 import type { Browser, Page } from 'puppeteer'
 
+const PORT = 3000
+
 describe('basic', async () => {
   let server: PreviewServer
   let browser: Browser
   let page: Page
 
   beforeAll(async () => {
-    server = await preview({ preview: { port: 3000 } })
-    browser = await puppeteer.launch()
+    server = await preview({ preview: { port: PORT } })
+    browser = await launch({ headless: true })
     page = await browser.newPage()
   })
 
@@ -22,22 +24,16 @@ describe('basic', async () => {
     })
   })
 
-  // TODO make more stable
-  test.skip('should have the correct title', async () => {
-    try {
-      await page.goto('http://localhost:3000')
-      const button = (await page.$('#btn'))!
-      expect(button).toBeDefined()
+  test('should have the correct title', async () => {
+    await page.goto(`http://localhost:${PORT}`)
+    const button = (await page.$<HTMLButtonElement>('#btn'))!
+    expect(button).toBeDefined()
 
-      let text = await page.evaluate(btn => btn.textContent, button)
-      expect(text).toBe('Clicked 0 time(s)')
+    let text = await page.evaluate(btn => btn.textContent, button)
+    expect(text).toBe('Clicked 0 time(s)')
 
-      await button.click()
-      text = await page.evaluate(btn => btn.textContent, button)
-    }
-    catch (e) {
-      console.error(e)
-      expect(e).toBeUndefined()
-    }
+    await button.click()
+    text = await page.evaluate(btn => btn.textContent, button)
+    expect(text).toBe('Clicked 1 time(s)')
   }, 60_000)
 })