First, create a tsconfig.json
file in your tests
directory with the following content:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist"
}
}
These options configure the TypeScript compiler to target ECMAScript 6, use the CommonJS module system, resolve modules using Node.js, generate source maps for debugging, and output compiled files to the dist
directory.
Next, add two scripts to your package.json
:
{
"scripts": {
"pretest": "tsc --incremental --project tests",
"test": "playwright test --config=playwright.config.ts"
}
}
The pretest
script compiles your TypeScript files in the tests
directory using the tsconfig.json
you created earlier. The test
script runs the Playwright test with the configuration specified in the playwright.config.ts
file.
In your playwright.config.ts
file, import defineConfig
from @playwright/test
and configure the web server:
import { defineConfig } from '@playwright/test';
export default defineConfig({
webServer: {
command: 'npm run start-server',
url: 'https://ray.run',
timeout: 120000,
reuseExistingServer: true
}
});
This configuration starts a web server using the npm run start-server
command, sets the server URL to https://ray.run
, allows a maximum of 120 seconds for the server to start, and reuses an existing server instance if available.
Finally, run npm run test
to build your TypeScript code and run it with the Playwright Test runner. You've now successfully configured TypeScript for your Playwright tests!
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].