Files
vercel__next.js/test/development/basic/tailwind-jit.test.ts
Tim Neutkens e860cec656 test: migrate webdriver callers to next.browser (#93941)
### What?

Migrate remaining direct `next-webdriver` test callers that have a
`NextInstance` to `next.browser()`, and expose the shared `Playwright`
browser type from `e2e-utils`.

### Why?

`NextInstance.browser` should be the supported browser-opening interface
for test fixtures, with `next-webdriver` kept as the private
implementation detail.

### How?

Updated affected development, e2e, and production tests to call
`next.browser()` directly, passing `baseUrl` where tests intentionally
target a manually spawned or proxied server. Shared helpers now receive
browser callbacks from the test context, and browser types import
`Playwright` from `e2e-utils` instead of deriving from `next.browser` or
importing from private paths.

<!-- NEXT_JS_LLM_PR -->
2026-05-22 14:01:58 +02:00

67 lines
2.0 KiB
TypeScript

import { join } from 'path'
import { FileRef, nextTestSetup, type Playwright } from 'e2e-utils'
import { check } from 'next-test-utils'
// [TODO]: It is unclear why turbopack takes longer to run this test
// remove once it's fixed
if (process.env.IS_TURBOPACK_TEST) {
jest.setTimeout(1000 * 60 * 5)
}
describe('TailwindCSS JIT', () => {
const { next } = nextTestSetup({
files: {
'postcss.config.js': new FileRef(
join(__dirname, 'tailwind-jit/postcss.config.js')
),
'tailwind.config.js': new FileRef(
join(__dirname, 'tailwind-jit/tailwind.config.js')
),
pages: new FileRef(join(__dirname, 'tailwind-jit/pages')),
},
dependencies: {
tailwindcss: '2.2.19',
postcss: '8.3.5',
},
})
it('works with JIT enabled', async () => {
let browser: Playwright
try {
browser = await next.browser('/')
const text = await browser.elementByCss('.text-6xl').text()
expect(text).toMatch(/Welcome to/)
const cssBlue = await browser
.elementByCss('#test-link')
.getComputedCss('color')
expect(cssBlue).toBe('rgb(37, 99, 235)')
const aboutPagePath = join('pages', 'index.js')
const originalContent = await next.readFile(aboutPagePath)
const editedContent = originalContent.replace(
'<a className="text-blue-600" href="https://nextjs.org" id="test-link">',
'<a className="text-red-600" href="https://nextjs.org" id="test-link">'
)
await browser.eval('window.REAL_HMR = 1;')
// change the content
try {
await next.patchFile(aboutPagePath, editedContent)
await check(
() => browser.elementByCss('#test-link').getComputedCss('color'),
/rgb\(220, 38, 38\)/
)
expect(await browser.eval('window.REAL_HMR')).toBe(1)
} finally {
// add the original content
await next.patchFile(aboutPagePath, originalContent)
}
} finally {
if (browser) {
await browser.close()
}
}
})
})